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;
|