实现地图遮罩效果(主要显示目标区域内部,外部用暗色填充):
地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的polygon,然后给这个polyon一个透明度为0.4的黑色即可。
源代码:
//边界高亮及遮罩效果,arr是内部行政区边界线的geojson的坐标 drawBoundaryMask(arr = []) { //设置自定义窗格zindex层级,让它在底部层级 let polygonPane = this.map.createPane('polygonPane') polygonPane.style.zIndex = 200 polygonPane.style.pointerEvents = 'none' //向数组中添加一次闭合多边形,并将西北角再加一次作为之后画闭合区域的起点 const NW = { lat: 59.0, lng: 73.0 } //西北 const NE = { lat: 59.0, lng: 136.0 } //东北 const SE = { lat: 3.0, lng: 136.0 } //东南 const SW = { lat: 3.0, lng: 73.0 } //西南 let maskLatLngs = [NW, SW, SE, NE, NW] let points = [] arr.forEach(item => { points.push({ lat: item[1], lng: item[0] }) }) maskLatLngs = maskLatLngs.concat(points) maskLatLngs.push(NW) //最后再次添加西北角闭合图形 this.polygonLayer = L.polygon(maskLatLngs, { color: 'transparent', fillColor: '#000', fillOpacity: 0.4, pane: 'polygonPane' }) this.polygonLayer.addTo(this.map) }
标签:遮罩,const,地图,leaflet,maskLatLngs,lat,lng,polygonPane From: https://www.cnblogs.com/tiandi/p/16995531.html