首页 > 其他分享 >leaflet实现地图遮罩

leaflet实现地图遮罩

时间:2022-12-21 09:33:21浏览次数:33  
标签:遮罩 const 地图 leaflet maskLatLngs lat lng polygonPane

实现地图遮罩效果(主要显示目标区域内部,外部用暗色填充):

地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的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

相关文章