Leaflet实现地图按照行政区划遮罩

最新推荐文章于 2025-02-18 15:20:48 发布

原创

最新推荐文章于 2025-02-18 15:20:48 发布 · 8.2k 阅读

本文介绍了在GIS应用开发中，使用Leaflet框架如何实现地图仅显示特定行政区划的功能。详细的技术实现步骤和代码参考链接已提供。

我们使用Leaflet进行GIS地图应用开发时，有时候需要仅仅显示某个区域的地图，上一篇文章我分享了使用OpenLayers实现的方法与代码，那么使用Leaflet如何实现呢？

实现的方法与代码如下：

 readRegionGeoJson();
    //加载显示区域的边界
    function readRegionGeoJson() {
        var url = "../data/geojson/hubei.geojson";
        var jhLine;
        $.getJSON(url, function(json) {
            jhLine = L.geoJSON(json, {style: {color: "#6495ED",weight:8,fillColor:'',fillOpacity:0.00001}});
            jhLine.addTo(map);
            drawBoundary(json.features[0].geometry.coordinates);
        });
    }

function drawBoundary(blist) {
        /*画遮蔽层的相关方法
            *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
            *      这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点，作为第一层
        var pNW = { lat: 59.0, lng: 73.0 };
        var pNE = { lat: 59.0, lng: 136.0 };
        var pSE = { lat: 3.0,