228 lines
7.3 KiB
JavaScript
228 lines
7.3 KiB
JavaScript
import React, { useEffect, useRef } from 'react';
|
||
|
||
const BI061MapeGISShow = () => {
|
||
|
||
|
||
const mapRef = useRef(null);
|
||
//const apiKey = '0b79a07d2808103ab84aa56485c331a8'; // 替换为实际申请的密钥 官网
|
||
// const apiKey = '55eaaac541e4991692fbb90ad9bc6e07'; // 替换为实际申请的密钥 传宇 sps
|
||
const apiKey = 'dc7674bd0cc6a7ca86ca563b1fb1681a'; // 替换为实际申请的密钥 wyw
|
||
const LngLat = [118.15752, 24.53469]
|
||
const zoom = 15
|
||
|
||
// 使用useEffect钩子加载天地图API并初始化地图
|
||
// createSquareOverlay = (listPlatlng) => {
|
||
|
||
// if (listPlatlng) {
|
||
// var listP = []
|
||
// listPlatlng.forEach(element => {
|
||
// listP.push(new T.LngLat(element.lng, element.lat))
|
||
// });
|
||
|
||
|
||
// let square = new T.Polygon(listP,
|
||
// {
|
||
// color: 'blue',
|
||
// weight: 3,
|
||
// opacity: 0.8,
|
||
// fillColor: '#00f',
|
||
// fillOpacity: 0.2
|
||
// }
|
||
// );
|
||
// return square;
|
||
// }
|
||
// }
|
||
|
||
useEffect(() => {
|
||
// 动态加载天地图API
|
||
const loadScript = () => {
|
||
const script = document.createElement('script');
|
||
script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${apiKey}`;
|
||
script.onload = () => {
|
||
// 初始化地图
|
||
const map = new T.Map(mapRef.current);
|
||
map.centerAndZoom(new T.LngLat(LngLat[0], LngLat[1]), zoom); // 学院
|
||
|
||
// 添加影像底图
|
||
const layer = new T.TileLayer(
|
||
`https://t` + Math.round(Math.random() * 7) + `.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${apiKey}`,
|
||
{
|
||
// subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
||
tileSize: 256,
|
||
zoomOffset: 1
|
||
}
|
||
);
|
||
map.addLayer(layer);
|
||
|
||
// // 添加矢量底图
|
||
// const layers = new T.TileLayer(
|
||
// `https://t` + Math.round(Math.random() * 7) + `.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${apiKey}`,
|
||
// {
|
||
// subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
|
||
// tileSize: 256,
|
||
// zoomOffset: 1
|
||
// }
|
||
// );
|
||
// map.addLayer(layers);
|
||
|
||
// 添加标注图层（可选）
|
||
const annotationLayer = new T.TileLayer(
|
||
`https://t` + Math.round(Math.random() * 7) + `.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${apiKey}`,
|
||
{
|
||
// subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
|
||
tileSize: 256,
|
||
zoomOffset: 1
|
||
}
|
||
);
|
||
map.addLayer(annotationLayer);
|
||
|
||
const targetArea = {
|
||
lng: 118.1579177,
|
||
lat: 24.5339106,
|
||
width: 0.001, // 经度方向宽度（约1公里）
|
||
height: 0.001 // 纬度方向高度（约1公里）
|
||
};
|
||
|
||
// // 创建正方形覆盖物
|
||
const createSquareOverlay = (listPlatlng) => {
|
||
if (listPlatlng) {
|
||
var listP = []
|
||
listPlatlng.forEach(element => {
|
||
listP.push(new T.LngLat(element.lng, element.lat))
|
||
});
|
||
let square = new T.Polygon(listP,
|
||
{
|
||
color: 'blue',
|
||
weight: 3,
|
||
opacity: 0.8,
|
||
fillColor: '#00f',
|
||
fillOpacity: 0.2
|
||
}
|
||
);
|
||
return square;
|
||
}
|
||
};
|
||
|
||
|
||
|
||
var listPointXLK = [
|
||
{ lat: 26.3431, lng: 116.90326 },
|
||
{ lat: 26.34545, lng: 116.90368 },
|
||
{ lat: 26.34745, lng: 116.90456 },
|
||
{ lat: 26.34874, lng: 116.90652 },
|
||
{ lat: 26.34889, lng: 116.90907 },
|
||
{ lat: 26.34806, lng: 116.91156 },
|
||
{ lat: 26.34651, lng: 116.91253 },
|
||
{ lat: 26.34481, lng: 116.91218 },
|
||
{ lat: 26.34324, lng: 116.91162 },
|
||
{ lat: 26.34141, lng: 116.91031 },
|
||
{ lat: 26.34074, lng: 116.90871 },
|
||
{ lat: 26.34083, lng: 116.9071 },
|
||
{ lat: 26.34095, lng: 116.90484 },
|
||
{ lat: 26.34181, lng: 116.90409 }]
|
||
//添加覆盖
|
||
const square2 = createSquareOverlay(listPointXLK);
|
||
map.addOverLay(square2);
|
||
|
||
|
||
|
||
|
||
var listPointXY = [
|
||
{ lat: 24.53471, lng: 118.15748 },
|
||
{ lat: 24.53547, lng: 118.15795 },
|
||
{ lat: 24.53496, lng: 118.15891 },
|
||
{ lat: 24.53416, lng: 118.1584 },
|
||
|
||
// {lat: 24.53337, lng: 118.15661},
|
||
// {lat: 24.53464, lng: 118.15739},
|
||
// {lat: 24.53408, lng: 118.15833},
|
||
// {lat: 24.53292, lng: 118.15756},
|
||
]
|
||
//添加覆盖
|
||
const square3 = createSquareOverlay(listPointXY);
|
||
map.addOverLay(square3);
|
||
|
||
|
||
|
||
|
||
|
||
//点击地图 记录描点 有需要时记录否则隐藏
|
||
map.addEventListener('click', (e) => {
|
||
console.log(e.lnglat);
|
||
});
|
||
};
|
||
document.body.appendChild(script);
|
||
};
|
||
loadScript();
|
||
|
||
|
||
// 组件卸载时清理地图
|
||
return () => {
|
||
if (window.T && window.T.Map) {
|
||
const map = new T.Map(mapRef.current);
|
||
map.clearOverLays();
|
||
map.clearLayers();
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
|
||
|
||
|
||
// useEffect(() => {
|
||
// // 初始化地图
|
||
// const initMap = async () => {
|
||
// const parser = new WMTSCapabilities();
|
||
// const capabilitiesUrl = 'http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=WMTS';
|
||
|
||
// // 解析服务元数据
|
||
// const response = await fetch(capabilitiesUrl);
|
||
// const text = await response.text();
|
||
// const result = parser.read(text);
|
||
|
||
// // 获取影像图层参数
|
||
// const imgLayer = result.Contents.Layer.find(layer => layer.Identifier === 'img');
|
||
// // debugger
|
||
// // const tileMatrixSet = imgLayer.TileMatrixSet.find(tms => tms.identifier === 'w');
|
||
|
||
// // 创建WMTS图层
|
||
// const wmtsSource = new WMTS({
|
||
// url: 'http://t{s}.tianditu.gov.cn/img_w/wmts',
|
||
// layer: 'img',
|
||
// matrixSet: 'w',
|
||
// format: 'tiles',
|
||
// style: 'default',
|
||
// // tileGrid: new WMTSTileGrid({
|
||
// // origin: tileMatrixSet.TileMatrix[0].TopLeftCorner,
|
||
// // resolutions: tileMatrixSet.TileMatrix.map(tm => tm.ScaleDenominator),
|
||
// // matrixIds: tileMatrixSet.TileMatrix.map(tm => tm.identifier)
|
||
// // }),
|
||
// params: { 'tk': apiKey }
|
||
// });
|
||
|
||
// // 创建地图实例
|
||
// const map = new Map({
|
||
// target: mapRef.current,
|
||
// layers: [new TileLayer({ source: wmtsSource })],
|
||
// view: new View({
|
||
// center: [LngLat[0], LngLat[1]], // 北京坐标
|
||
// zoom: zoom
|
||
// })
|
||
// });
|
||
// };
|
||
|
||
// initMap();
|
||
// }, []);
|
||
|
||
return (
|
||
<div style={{ textAlign: 'center', backgroundColor: 'white', width: '100%', height: 'Auto', overflowY: 'hidden', position: 'relative', alignItems: 'center' }}>
|
||
<h1>GIS风险四色图</h1>
|
||
{/* , border: '1px solid rgb(204, 204, 204);' */}
|
||
<div style={{ width: '90%', height: '1300px' }}
|
||
ref={mapRef} />
|
||
</div>
|
||
);
|
||
|
||
};
|
||
|
||
export default BI061MapeGISShow; |