leaflet实现地图遮罩

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

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

 

posted @ 2022-12-21 09:23  JackGIS  阅读(1678)  评论(0编辑  收藏  举报