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 (

GIS风险四色图

{/* , border: '1px solid rgb(204, 204, 204);' */}
); }; export default BI061MapeGISShow;