Leaflet+SupperMap 遮盖层

最新推荐文章于 2025-06-14 10:00:00 发布

原创最新推荐文章于 2025-06-14 10:00:00 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #arcgis

web前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种在Leaflet地图中实现行政区划外区域屏蔽的方法。通过获取特定行政区划的几何数据并绘制蒙版，实现了突出显示指定区域的效果。文章详细展示了如何利用Vue和ElementUI进行开发。

Leaflet 遮盖

前言
正文

前言

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

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

正文

该项目是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)
        },

效果如下

效果图