1 前言
在地图中加载的底图是瓦片服务(固定大小的规则矩形),底图的范围很大,铺满了整个div,但是我们的感兴趣的部门可能只是其中一部分,如何在整个屏幕中突出感兴趣的部分-- 地图遮罩(遮挡图像中不感兴趣的部分)。最常见的用处是突出行政区内部区域。
图1 湖南省遮罩
2 实现方法
地图遮罩实现思路:在大范围区域的内部挖洞(感兴趣部分),矩形中挖出行政区边界
在leaflet中常用L.polygon来实现面中挖洞,上代码
var latlngs = [
[[-91, -181], [ 91, -181], [91, 181], [-90, 181]], // 外环
[[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // 洞
];
var polygon = L.polygon(latlngs, { style: {fillColor: '#000',
stroke: false,
fillOpacity: 0.5,
color: '#000000',
weight: 1 }}).addTo(map)
map.setView([38, -107], 7)
坐标数组latlngs:第一元素是外环的坐标数组,是整个世界范围,第二个元素就是洞的坐标数组
图二 简单遮罩实例
3 重点讨论
上面用L.polygon实现了在简单的遮罩(挖了一个矩形洞),针对具有飞地、复杂边界线的行政区
例如湖南 整个湖南省境内(指的是最外围、最大的边界线内)有多个属于外省的飞地,同时在外省也有多个飞地
图三选取怀化部分区域,有一个在贵州的飞地A(亮),同时怀化境内有一块属于贵州的飞地B(暗)
图三 怀化部分区域
绘制准确的湖南省地图遮罩,需要满足这两个条件:1 有多个洞 2 洞中有洞
实现方法:** **L.geoJSON + GeoJSON Multipolygon数据
GeoJSON数据中的每个Multipolygon由一个外环和零个或多个内环(洞)组成。外环定义了整个多边形的边界,而内环定义了洞的边界,洞也可以是外环和洞组成(嵌套)。每个环都是由一组经纬度坐标构成的闭合路径。数据格式如下:文章来源:https://www.toymoban.com/news/detail-627100.html
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
// 第一个Multipolygon
[
// 外环1
[
[longitude1, latitude1],
[longitude2, latitude2],
...
],
// 内环1(洞1)
[
[
[longitude_hole1_1, latitude_hole1_1],
[longitude_hole1_2, latitude_hole1_2],
...
]
],
// 内环2(洞2)
[
[
[longitude_hole2_1, latitude_hole2_1],
[longitude_hole2_2, latitude_hole2_2],
...
],
// 内环2的洞
...
]
],
// 更多Multipolygon...
]
},
"properties": {
// 可选的属性
}
}
代码文章来源地址https://www.toymoban.com/news/detail-627100.html
// 准备 geojson 数据
L.geoJSON(geojson, {style: function (feature) {
return {
fillColor: '#000',
stroke: false,
fillOpacity: 0.5,
color: '#000000',
weight: 1
}
}).addTo(map)
到了这里,关于实现地图遮罩 leaflet的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!