实现地图遮罩效果(主要显示目标区域内部,外部用暗色填充):

地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的polygon,然后给这个polyon一个透明度为0.4的黑色即可。

源代码:

    //边界高亮及遮罩效果,arr是内部行政区边界线的geojson的坐标
drawBoundaryMask(arr = []) {
//设置自定义窗格zindex层级,让它在底部层级
let polygonPane = this.map.createPane('polygonPane')
polygonPane.style.zIndex = 200
polygonPane.style.pointerEvents = 'none'
//向数组中添加一次闭合多边形,并将西北角再加一次作为之后画闭合区域的起点
const NW = { lat: 59.0, lng: 73.0 } //西北
const NE = { lat: 59.0, lng: 136.0 } //东北
const SE = { lat: 3.0, lng: 136.0 } //东南
const SW = { lat: 3.0, lng: 73.0 } //西南
let maskLatLngs = [NW, SW, SE, NE, NW]
let points = []
arr.forEach(item => {
points.push({ lat: item[1], lng: item[0] })
})
maskLatLngs = maskLatLngs.concat(points)
maskLatLngs.push(NW) //最后再次添加西北角闭合图形
this.polygonLayer = L.polygon(maskLatLngs, {
color: 'transparent',
fillColor: '#000',
fillOpacity: 0.4,
pane: 'polygonPane'
})
this.polygonLayer.addTo(this.map)
}

leaflet实现地图遮罩的更多相关文章

  1. 使用Leaflet创建地图模块

    背景 最近需要为某单位开发地图展示系统,因此开始涉略和使用Leaflet这个轻量级地图库. 创建基础地图需要以下几步 引入相关js和css文件,创建基础地图 <div id="map& ...

  2. leaflet在地图上加载本地图片

    <link href="~/Scripts/Leaflet/leaflet.css" rel="stylesheet" /><script s ...

  3. 基于MySQL + Node.js + Leaflet的离线地图展示,支持百度、谷歌、高德、腾讯地图

    1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 ...

  4. R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图(遍地代码图)

    好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个 ...

  5. 关于flutter插件地图的使用flutter_map

    关于flutter插件地图的使用flutter_map flutter_map A Dart implementation of Leaflet for Flutter apps.一个基于leafle ...

  6. java离线地图web GIS制作

    因为项目需求,要做一个web地图,之前做过高德的在线地图,它提供了一系列的API,并且由于是国产的,所以开发起来比较容易,现在由于项目是内网使用的,所以需要使用离线地图,由此便开始了: Web GIS ...

  7. Google Maps瓦片(tile)地图文件下载(1-11层级)

    整理硬盘时,发现一份去年下载的谷歌地图瓦片文件,整理并分享给大家. 地图来源:Google Maps(应该是国内谷歌地图) 采集时间:2017年6月 采集范围:0-6层级世界范围:7-11层级中国范围 ...

  8. leaflet视频监控播放(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  9. mapboxgl 互联网地图纠偏插件(一)

    之前写过一个 leaflet 互联网地图纠偏插件,引用插件后一行代码都不用写,就能解决国内互联网地图瓦片的偏移问题. 最近想对 mapboxgl 也写一个这样的插件. 原因是自己发布的OSM矢量瓦片地 ...

  10. 如何实现通过Leaflet加载dwg格式的CAD图

    前言 ​ 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...

随机推荐

  1. #Dinic,最大权闭合子图#CF1473F Strange Set

    题目 分析 对于这种依赖关系,可以将正权值连源点,负权值连汇点, 然后 \(i\) 向 \(j(j<i)\) 连无穷大的边,注意到如果完全建图空间不够, 考虑记录每个约数最后一次出现的位置,直接 ...

  2. #树形dp#nssl 1469 W

    分析 首先一些结论,每条边最多被翻一次,而且由翻的边所构成的连通块答案就是度数为奇数的点的个数的一半, 因为在连通块内必然选择两个叶子节点间的路径翻是最优的,所以也就是选择两个度数为奇数的点,所以结论 ...

  3. #贪心#洛谷 6093 [JSOI2015]套娃

    题目 分析 按好看度从大到小排序,每次选择一个尽量大的外径装入当前套娃的内径, 这样可以保证是最优的,删除选完的外径可以用平衡树实现 代码 #include <cstdio> #inclu ...

  4. 【直播回顾】OpenHarmony 3.1 Release版本南北向关键能力解读

    OpenHarmony 3.1 Release版本发布后,广大开发者们纷纷开始上手体验新版本的功能.但随之而来的一系列问题,摆在了大家的面前:OpenHarmony 3.1这一版本,都有哪些重要的能力 ...

  5. OpenHarmony 官网文档有哪些上新?上篇:应用开发文档上新

    随着 OpenAtom OpenHarmony(以下简称"OpenHarmony")系统能力持续升级,已具备支撑复杂带屏标准设备和应用开发的基础能力.相较于旧版本,OpenHarm ...

  6. 开源LaTex可视化编辑器推荐,支持LaTex代码补全,一键套用模板!

    https://latexlive.com/ 这还是个开源项目,不过是C#的,搭建的成本比较大,没PHP好搞. 下面是这个网站

  7. Docker学习路线6:使用第三方镜像

    第三方镜像是在Docker Hub或其他容器注册表上提供的预构建Docker容器镜像.这些镜像由个人或组织创建和维护,可以作为您容器化应用程序的起点. 查找第三方镜像 Docker Hub 是最大和最 ...

  8. python读取ini配置文件-configparser使用方法

    我们在操作 ini 配置文件的时候 可以使用 Python 的 configparser 库 具体使用方法如下: from configparser import ConfigParser # 初始化 ...

  9. spring cloud 学习笔记 基础工程的构建(一)

    前言 学习一下spring cloud,只是过一遍微服务的一些现代化工具,微服务其实一直都存在,去公司的时候发现一个问题,即使有些项目没有用到现代这些什么docker.k8s,其实也是微服务,微服务一 ...

  10. mybatis generator生成mapper接口后的代理类,很方便使用。

    1.spring 配置: <bean id="superMapperProxy" class="com.qws.v1.daoImpl.MapperProxy&quo ...