Leaflet+SupperMap 遮盖层

前言

最近完成了一个leaflet项目，业主要求屏蔽所在行政区以外的其他区域。
实现思路:

1. 地图服务添加一层蒙版，将该蒙版添加到地图；
2. 获取凸显的行政区划的几何数据，反选后自己在地图上添加蒙版图层；
   第一种方法简单，这里就不做介绍，接下来着重介绍第二种实现。

正文

该项目是Vue项目，UI使用了ElementUI。项目的搭建及leafle地图创建，请自行搜索。

获取到行政区划的几何数据

开发时搜索到阿里云数据可视化平台，从平台里获取行政区划的数据来调试，省下不少时间。感谢阿里云数据可视化平台

阿里云数据可视化平台
从接口或者本地的JSON文件获取到行政区域的geoJSON数据,如：（本案例以贵州省为例）：
贵州省行政区划GEOJSON数据

draw行政区划

this.platform.addFeatureLayerFromGeoJSON(geoJSON, options, false)

实现蒙版

drawBoundaryMask (geoJSON) {
            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]
            console.log(maskLatLngs)
            console.log(geoJSON)
            const { features } = geoJSON
            Toolkit.ensure(features).forEach(feature => {
                Toolkit.ensure(feature.geometry.coordinates).forEach(cds => {
                    console.log(cds)
                    Toolkit.ensure(cds).forEach(latlngs => {
                        const points = []
                        Toolkit.ensure(latlngs).forEach(latlng => {
                            points.push({ lat: latlng[1], lng: latlng[0] })
                        })
                        maskLatLngs = maskLatLngs.concat(points)
                        maskLatLngs.push(NW)
                    })
                })
            })
            this.platform.addMarkerLayerFromJSON({
                symbol: 'polygon',
                latlng: maskLatLngs,
                options: { color: 'transparent', fillColor: '#000', fillOpacity: 0.68 }
            }, true)
        },

效果如下