行政区划遮罩 -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, lng: 136.0 };
        var pSW = { lat: 3.0, lng: 73.0 };
        //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
        var pArray = [];
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);
        //循环添加各闭合区域
        for (var i = 0; i < blist.length; i++) {
            var points = [];
            $.each(blist[i],function(k,v){
                points.push({lat:v[1],lng:v[0]});
            });
            //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
            pArray = pArray.concat(points);
            pArray.push(pArray[0]);
        }
        //添加遮蔽层
        var plyall = L.polygon(pArray, { color:'transparent',fillColor:'#C0C0C0',fillOpacity:0.9 }); //建立多边形覆盖物
        plyall.addTo(map);
    }

原文技术实现的博客：

https://blog.csdn.net/u012420268/article/details/87188011

在线体验的地址
http://www.mapmonster.cn:7000/examples/leaflet/base_mapclip.html