关于Leaflet 地图 遮罩反选

关于Leaflet 地图 遮罩反选

最近项目用到leaflet作为地图开发插件，需要将某个区域突出显示，其余部分隐藏，之前做过百度地图的开发，有过类似的经验，就简单写一下作为记录。

leaflet 地图插件

leaflet:https://leafletjs.com/
下边就直接进入主题：
1.初始化地图

//加载地图
function initMap() {
   if(!page.map){
       page.map = L.map("allmap", {
           renderer: L.canvas(),
           attributionControl: false,
           zoomControl: true,
           maxZoom: 18,
           minZoom: 4
       }).setView([31.144674, 121.3555383], 15);
   }

   var baseLayer = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
       subdomains: ["3", "4"]
   });
   
   var GoogleLayer1 = L.tileLayer(
       'http://mt0.google.cn/vt/lyrs=m@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga',
       {
           attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
       });

   var baseLayers = {
       "谷歌地图" : GoogleLayer1,
       "卫星地图" : baseLayer
   };
   L.control.layers(baseLayers).addTo(page.map);
   GoogleLayer1.addTo(page.map);
   //L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(page.map);
   L.control.coordinates({
       decimals: 5,
       decimalSeperator: ",",
       labelTemplateLat: "纬度: {y}",
       labelTemplateLng: "经度: {x}",
       enableUserInput: false
   }).addTo(page.map);
   readTownJosn();
}

2. 获取要绘制区域的json文件

//加载显示区域的边界
function readTownJosn() {
   var url = "/assets/json/map/leaflet/qibao/leaflet_zhenjie.json";
   var jhLine;
   api.invoke(url, {}, 'GET', function (json) {
       jhLine = L.geoJSON(json, {style: {color: "#6495ED",weight:8,fillColor:'',fillOpacity:0.00001}});
       jhLine.addTo(page.map);
       drawBoundary(json.features[0].geometry.coordinates);
   });
}

2. 绘制遮罩层；

//绘制遮罩层的思路是根据百度地图的逻辑来的，leaflet也可通用
//反选 添加外部边界
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.8 }); //建立多边形覆盖物
   plyall.addTo(page.map);
}

3. 至此，leaflet 的反选功能已完成，效果如下图
   
   时间比较紧，写的比较粗糙，有问题我们可以继续讨论。