实现地图遮罩 leaflet

这篇具有很好参考价值的文章主要介绍了实现地图遮罩 leaflet。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 前言

在地图中加载的底图是瓦片服务(固定大小的规则矩形),底图的范围很大,铺满了整个div,但是我们的感兴趣的部门可能只是其中一部分,如何在整个屏幕中突出感兴趣的部分-- 地图遮罩(遮挡图像中不感兴趣的部分)。最常见的用处是突出行政区内部区域。
实现地图遮罩 leaflet

图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:第一元素是外环的坐标数组,是整个世界范围,第二个元素就是洞的坐标数组
实现地图遮罩 leaflet

图二 简单遮罩实例

3 重点讨论

上面用L.polygon实现了在简单的遮罩(挖了一个矩形洞),针对具有飞地、复杂边界线的行政区
例如湖南 整个湖南省境内(指的是最外围、最大的边界线内)有多个属于外省的飞地,同时在外省也有多个飞地
图三选取怀化部分区域,有一个在贵州的飞地A(亮),同时怀化境内有一块属于贵州的飞地B(暗)
实现地图遮罩 leaflet

图三 怀化部分区域
绘制准确的湖南省地图遮罩,需要满足这两个条件:1 有多个洞 2 洞中有洞
实现方法:** **L.geoJSON + GeoJSON Multipolygon数据
GeoJSON数据中的每个Multipolygon由一个外环和零个或多个内环(洞)组成。外环定义了整个多边形的边界,而内环定义了洞的边界,洞也可以是外环和洞组成(嵌套)。每个环都是由一组经纬度坐标构成的闭合路径。数据格式如下:

{
  "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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • antV L7 无底图模式 和 地图3D样式的使用

    下方为设计图样式,主要实现地图3D且去除底图  这次使用的是由蚂蚁金服 AntV 数据可视化团队推出antV L7,练习的时候使用四川的地图json数据,通过DataV.GeoAtlas地理小工具系列就可以下载各个地方的地图数据(只能精确到县),下面开始正文 一、创建地图 根据官网给出的使用

    2024年02月06日
    浏览(57)
  • Leaflet 调用百度瓦片地图服务

    在使用 leaflet 调用第三方瓦片地图服务的项目,主要谷歌地图、高德地图、百度地图和 OSM 地图,与其他三种地图对比,百度地图的瓦片组织方式是不同的。百度从中心点经纬度(0,0)度开始计算瓦片,而谷歌地图是从左上角经纬度(-180,90)度开始计算瓦片;如果直接使用百度瓦片

    2024年02月08日
    浏览(55)
  • leaflet-uniapp 缩放地图的同时 显示当前缩放层级

    记录实现过程: 需求为移动端用户在使用地图时,缩放地图的同时,可以获知地图此时缩放的级别。 效果图如下:此时缩放地图级别为13 map.on(\\\'\\\') 有对应的诸多行为 查看官网即可,这里根据需要为--zoomstart zoom zoomend 代码如下:  

    2024年02月14日
    浏览(40)
  • QGraphicsView实现简易地图4『局部加载-地图漫游』

    前文链接:QGraphicsView实现简易地图3『局部加载-地图缩放』 当鼠标拖动地图移动时,需要实时增补和删减瓦片地图,大致思路是计算地图从各方向移动时进出视口的瓦片坐标值,根据变化后的瓦片坐标值来增减地图瓦片,以下将提供实现此需求的核心代码。 1、动态演示效果

    2024年02月13日
    浏览(33)
  • 141:vue+leaflet 利用高德逆地理编码,点击地图标记marker,popup地址信息

    第141个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中利用高德逆地理编码,点击地图标记marker,popup地址信息 。主要利用高德地图的api将坐标转化为地址,然后在点击的位置,弹出弹窗,在里面显示出地址信息。 直接复制下面的 vue+leaflet源代码,操作2分钟即

    2024年01月24日
    浏览(49)
  • 高德地图通过画面中的一个覆盖物设置图中心点和zoom

    需要将这个覆盖物置于地图中间且不超过地图边界的放至最大 计算覆盖物中心点,定为地图中心点 计算覆盖物的最大经纬度,和最小经纬度,测算出实际最长距离,根据距离与zoom对应关系设置zoom

    2024年02月09日
    浏览(56)
  • leaflet使用L.geoJSON加载文件,参数pointToLayer的使用方法(130)

    第130个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件,这里介绍pointToLayer的使用方法。 点的处理方式不同于折线和多边形。默认情况下,简单标记使用为GeoJSON点绘制。在创建GeoJSON涂层时,我们可以通过pointToLayer在GeoJSON选项对象中传递函数来改

    2023年04月09日
    浏览(33)
  • orb_slam3实现保存/加载地图功能and发布位姿功能

    先说方法:在加载的相机参数文件.yaml的最前面加上下面两行就行。 第一行表示从本地加载名为\\\"MH01_to_MH05_stereo_inertial.osa\\\"的地图文件,第二行表示保存名为\\\"MH01_to_MH05_stereo_inertial.osa\\\"的地图到本地。第一次运行建图时注释掉第一行,只使用第二行,加载地图重定位时反过来,

    2024年02月15日
    浏览(45)
  • [Webgis][地图加载]OpenLayer加载多种形式地图

    描述在前 书接上回,作为打工人,学习还是要以项目为导向。由于领导想看卫星地图显示,这次我们记录下,如何使用OpenLayer 加载显示常见的几种二维地图,包括普通地图,卫星地图,和卫星路网混合地图。还是以高德地图为例,下面我们直接上代码,从实例入手学习。 代

    2024年02月01日
    浏览(42)
  • Leaflet结合Echarts实现迁徙图

    效果图如下:

    2024年02月04日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包