关于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();
}

获取要绘制区域的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);});
}

绘制遮罩层；

//绘制遮罩层的思路是根据百度地图的逻辑来的，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);
}

至此，leaflet 的反选功能已完成，效果如下图

时间比较紧，写的比较粗糙，有问题我们可以继续讨论。

关于Leaflet 地图遮罩反选相关推荐

在Leaflet地图上集成Echarts
需求背景: 现在我要在地图上加上Echarts的散点图还有线集,看起来就很牛B的那种.上效果图: 需求分析: 我先看了看Echarts官网上有提供加载地图的例子,主要包括三种方式: 1.加载js格式的 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(十一)地图遮罩层的实现
前面的章节主要针对地图表现层进行讲解.通常来说,简单的游戏光有它就足够了:但是为了达到更加真实的光影效果,模拟真实的虚拟世界,我们还得继续在地图上下大工夫.本节将就如何实现地图中的遮罩层,即物体对角色 ...
leaflet地图资源整理
leaflet地图资源整理均来自网络 React-Leaflet(v2.0-beta)を試す https://qiita.com/sugasaki/items/d225cf548e9a787dbd9c ...
Mapv 结合 Leaflet 地图使用
看了Mapv的源码才发现,它是支持 Leaflet 地图的,Mapv作者也是有和Leaflet地图结合的案例的,但是直接百度 "Mapv Leaflet" 却没有结果,为了补全这个 ...
leaflet地图插件汇总
参考博文 https://leafletjs.com/reference-1.7.1.html leaflet地图文档 https://blog.csdn.net/bigbear00007/artic ...
leaflet地图原理_使用Leaflet创建地图拓扑图
之前我们采用过 Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一个古老项目,略显臃肿,对于现代的前端地图应用,显得笨重,在客户的介绍下,我们找到了leaflet - ...
leaflet地图截图批量导出(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
leaflet地图总结（不断更新）
一.创建leaflet地图输入指令npm install leaflet 页面引入 import L from "leaflet"; import "leaflet/d ...
leaflet地图框架
leaflet 中文API LeafLet js 官网: http://leafletjs.com/index.html LeafLet js 官网demo: http://leafletjs.com ...

关于Leaflet 地图遮罩反选

关于Leaflet 地图遮罩反选

leaflet 地图插件

关于Leaflet 地图遮罩反选相关推荐

最新文章

热门文章

关于Leaflet 地图 遮罩反选

关于Leaflet 地图 遮罩反选

leaflet 地图插件

关于Leaflet 地图 遮罩反选相关推荐

最新文章

热门文章

关于Leaflet 地图遮罩反选

关于Leaflet 地图遮罩反选

关于Leaflet 地图遮罩反选相关推荐