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

Leaflet实现地图按照行政区划遮罩相关推荐

（沂水县地图）行政区划交通图高清矢量cdr|pdf|ai格式（详细2021年）
(沂水县地图)行政区划交通图高清矢量cdr|pdf|ai格式(详细2021年).pdf格式可以导入cdr软件ai软件另保存cdr,ai格式,可以编辑内容文字,矢量高清图,尺寸高1.2米宽1米.可以无限 ...
openlayers使用Canvas实现行政区划遮罩地图
有时候我们做GIS开发时需要只显示某个区域的地图,需要把其他地方遮罩住,比如下图这样: 好了,上代码: //添加遮罩function clipmap(data) {$.getJSON(data, fu ...
Leaflet实现地图分屏联动
文章目录 1. 实现思路 2. 完整代码 1. 实现思路分别为地图对象绑定缩放.平移监听事件: 监听事件触发后依次为地图对象设置视图,就是将触发事件的地图视图设置到其他地图对象 2. 完整代码 &l ...
使用Leaflet创建地图拓扑图
为什么80%的码农都做不了架构师?>>> 之前我们采用过 Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一个古老项目,略显臃肿,对于现代的前 ...
Vue渲染Leaflet GIS地图，边界线，点位组件
package.json中引入并安装: "leaflet": "~1.4.0", "vue2-leaflet": "^2.5.2& ...
百度地图--展示行政区划（省市区县）和添加多个标注点案例
百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用.接口使用无次数限制.在使用前,您需先申请密钥(ak)才可使用. 申请密钥链接: http://lbsyun.ba ...
百度地图之添加遮罩层去除百度地图logo
效果图: 步骤: 1,申请百度密钥,步骤不再赘述 2,引入百度地图:pubilc/index.html中引入 <script type="text/javascript" s ...
关于Leaflet打印地图的三种方法
前两天在实现"地图打印"功能时发现网上有很多博主推荐了好几种插件,于是本人就挨个试了一遍,今天就其中比较"热门"的三款在这里简单整理一下,如有疏漏欢迎补充. 一 ...
leaflet离线地图(开发总结)
一.创建leaflet地图 1.项目中安装leaflet yarn add leaflet 或者 npm install leaflet 2.安装好之后在你的项目页面引入 import "l ...

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

Leaflet实现地图按照行政区划遮罩相关推荐

最新文章

热门文章