openlayer:10点击地图上某些省份利用Overlay实现提示省份名称

实现点击地图上的省份，在点击经纬度坐标位置附近利用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