leaflet+geoJSON实现绘制区域边界和边界高亮效果

先展示下效果图：

具体代码如下：

geoJSON绘制边界

initNewMap(){
   
   
    var myStyle = {
   
   
        "color": "#00f",
        "weight": 2,
        "opacity": 0.5,
        "fillColor": 'red',
        "fillOpacity": 0,
    };
    let JsonUrl = 'http://192.168.37.129:22221/assets/images/440000.json';
   
   // 绘制地图边界
    L.geoJSON(JsonUrl, {
   
   
        style: myStyle,
    }).addTo(this.map);
     
    let _this = this;

     $.getJSON(JsonUrl, function(json) {
   
   
        _this.drawBoundary(json.features[0].geometry.coordinates[0]);
    });

},

// 边界高亮及遮罩效果
drawBoundary(blist) {
   
   
    let pNW = {
   
    lat: 59.0, lng: 73.0 };
    let pNE = {
   
    lat: 59.0, lng: 136.0 };
    let pSE = {
   
    lat: 3.0, lng: 136.0 };
    let pSW = {
   
    lat: 3.0, lng: 73.0 };
    let pArray = [];

        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);

for (let i = 0; i < blist.length; i++) {
   
   
    let points = [];
    $.each(blist[i],function(k,v){
   
   
        points.push({
   
   lat:v[1],lng:v[0]});
    });
    pArray = pArray.concat(points);
    pArray.push(pArray[0]);
}
    let plyall = L.polygon(pArray, {
   
    color:'transparent',fillColor:'#C0C0C0',fillOpacity:0.9 }); 
    plyall.addTo(this.map);
},

来源：oschina

链接：https://my.oschina.net/u/4287583/blog/4777649