实现点击地图上的省份，在点击经纬度坐标位置附近利用Overlay实现提示框提示相关省份名称。本文介绍了如何通过OpenLayers库实现点击地图上的省份，并在点击的经纬度坐标位置附近显示提示框，提示相关省份名称。首先，定义了两个全局变量map和popupp，分别用于存储地图实例和弹窗。通过useState预留了一个状态name，用于存储省份名称。接着，设置了地图的视图中心点和瓦片图层，包括影像图层、底图图层和标注图层。矢量图层的数据源来自阿里云DataV，并设置了矢量图层的样式。通过Overlay获取弹窗元素，并为地图添加点击事件，利用forEachFeatureAtPixel方法获取点击的省份信息，并显示在弹窗中。最后，整体代码展示了如何将这些功能整合到一个React组件中。
一、解释
let map=null;
let popupp=null;
全局定义两个变量，用来存储map实例对象和popup弹窗const [name,setname]=useState('');
提前预留一个state，方便后续存储省份名称let view=new View({center:fromLonLat([116.3903,39.9072]),zoom:4})
let yingxianglayer=new TileLayer({source:new XYZ({url :"http://t3.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=528881a2c3d647268c04ab43dc46bd51"})})
let ditulayer=new TileLayer({source:new XYZ({url :"http://t5.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=528881a2c3d647268c04ab43dc46bd51"})})
let biaojilayer=new TileLayer({source:new XYZ({url :"http://t3.tianditu.com/DataServer?T=cva_w&tk=faf4cf166d31edcaba5de523eae8084f&x={x}&y={y}&l={z}"})})
定义view，设置center中心点并且设置为墨卡托坐标系
其余内容是设置瓦片图层，包括了影像图层、底图图层和标注图层
具体的source里面的url 配置可以去天地图上自己申请（之前文章也有些过，可以去看一下我其它文章中有写）
let vectorsource=new VectorSource({url:"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",format:new GeoJSON()})
let vectorlayer=new VectorLayer({
source:vectorsource,
style:new Style({
fill:new Fill({
color:"rgba(255,0,0,0.4)"
}),
stroke:new Stroke({
color:'green',
width:3
})
})
})
设置矢量图层，这个是最重要的图层
图层数据源来自dataV，之前也有些过，可以去看下我之前openlayer文章
style部分的是设置这个是矢量图层的样式popupp=new Overlay({
element:document.getElementById("popupp"),
})
获取id为popupp的Overlay
<div id="popupp">
{name}
</div>
这里面的name就是用来存储省份名的state
map.on('singleclick', function(evt) {
map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
if (layer === vectorlayer) {
console.log('Clicked on the vector layer');
let pixel=evt.pixel;
console.log("pixel",pixel)
let features=map.getFeaturesAtPixel(pixel);
console.log("features",features[0])
let selectname=features[0].get('name');
setname(features[0].get('name'))
let center=fromLonLat(features[0].get('center'))
console.log("selectname",selectname)
console.log("center",center)
popupp.setPosition(center);
map.addOverlay(popupp);
}else{
console.log('Clicked on the tile layer');
}
});
});
为map添加点击事件
并利用map的forEachFeatureAtPixel事件来获取相关信息二、整体代码
import { useState ,useEffect} from 'react';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Style from 'ol/style/Style.js';
import Fill from 'ol/style/Fill.js';
import Stroke from 'ol/style/Stroke.js';
import Icon from 'ol/style/Icon.js';
import Feature from 'ol/Feature.js';
import Polygon from 'ol/geom/Polygon.js';
import Point from 'ol/geom/Point.js';
import Overlay from 'ol/Overlay.js';
import {fromLonLat} from 'ol/proj';
import './System.css'
import 'ol/ol.css';
let map=null;
let popupp=null;
function System() {
const [name,setname]=useState('');
let view=new View({center:fromLonLat([116.3903,39.9072]),zoom:4})
let yingxianglayer=new TileLayer({source:new XYZ({url :"http://t3.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=528881a2c3d647268c04ab43dc46bd51"})})
let ditulayer=new TileLayer({source:new XYZ({url :"http://t5.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=528881a2c3d647268c04ab43dc46bd51"})})
let biaojilayer=new TileLayer({source:new XYZ({url :"http://t3.tianditu.com/DataServer?T=cva_w&tk=faf4cf166d31edcaba5de523eae8084f&x={x}&y={y}&l={z}"})})
let vectorsource=new VectorSource({url:"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",format:new GeoJSON()})
let vectorlayer=new VectorLayer({
source:vectorsource,
style:new Style({
fill:new Fill({
color:"rgba(255,0,0,0.4)"
}),
stroke:new Stroke({
color:'green',
width:3
})
})
})
useEffect(()=>{
map=new Map({
target:"mapp",
view:view,
layers:[
yingxianglayer,
ditulayer,
biaojilayer,
vectorlayer
]
})
popupp=new Overlay({
element:document.getElementById("popupp"),
})
map.addOverlay(popupp)
map.on('singleclick', function(evt) {
map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
if (layer === vectorlayer) {
console.log('Clicked on the vector layer');
let pixel=evt.pixel;
console.log("pixel",pixel)
let features=map.getFeaturesAtPixel(pixel);
console.log("features",features[0])
let selectname=features[0].get('name');
setname(features[0].get('name'))
let center=fromLonLat(features[0].get('center'))
console.log("selectname",selectname)
console.log("center",center)
popupp.setPosition(center);
map.addOverlay(popupp);
}else{
console.log('Clicked on the tile layer');
}
});
});
},[])
return (
<>
<div id="mapp" style={{width: "100%",height: "97vh"}}>
<div id="popupp">
{name}
</div>
</div>
</>
)
}
export default System
