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

地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的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. #虚树,树形dp#洛谷 4103 [HEOI2014]大工程

    题目 分析 建一棵虚树,然后树形dp,维护最长/短链和次长/短链, 对于第一个就是统计每条边有多少个点对经过就可以了 代码 #include <cstdio> #include <c ...

  2. 关于pwn题的栈平衡中ret的作用

    以nssctf里的where_is_my_shell为例 题目提供了一个system函数,和一个buf数组.数组的栈空间如图所示,这里不讨论怎么解题,只说明payload里的ret的作用. 假设没有r ...

  3. Grafana 系列-统一展示-1-开篇

    系列文章 Grafana 系列文章 Grafana 简介 Grafana 是 Grafana Labs 的第一款也是最重要的产品.它的定位是可视化, 用于监控展示 和 可观察性. 是当前最为完善.流行 ...

  4. 94个JS/eTS开源组件首发上新,肯定有你要用的一款!

    原文:https://mp.weixin.qq.com/s/6RdxNisTQoyPds811PNZKA,点击链接查看更多技术内容. 2021年的华为开发者大会(HDC2021)上,我们发布了新一代的 ...

  5. centos7或者centos8下安装google-chrome谷歌浏览器 亲测成功 20220302

    第一步: wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm 第二步: 安装 Google ...

  6. CentOS 6.5编译安装httpd-2.4.7

    CentOS 6.5编译安装httpd-2.4.7 CentOS 编译安装 Apache 2.4 准备: [root@NFSServer ~]# yum groupinstall "Deve ...

  7. WP/C#实现图像滤镜优化方案:打造炫目视觉体验!

    原因:我之所以想做这个项目,是因为在之前查找关于C#/WPF相关资料时,我发现讲解图像滤镜的资源非常稀缺.此外,我注意到许多现有的开源库主要基于CPU进行图像渲染.这种方式在处理大量图像时,会导致CP ...

  8. 力扣168(java)-Excel表列名称(简单)

    题目: 给你一个整数 columnNumber ,返回它在 Excel 表中相对应的列名称. 例如: A -> 1B -> 2C -> 3...Z -> 26AA -> ...

  9. 技术干货 | 使用 mPaaS 配置 SM2 国密加密指南

    ​简介:随着移动智能终端的广泛应用,敏感信息极易被监控或盗取,给国家.企事业及个人带来极大政治.经济损失.金融和重要领域的各个企业正在逐步落实并完成国产密码改造工作.为解决客户侧因更换加密算法造成的种 ...

  10. [GPT] nodejs 什么情况下可以使用 import 来引入 export 的模块

    在 Node.js 中,原生并不支持 ES6 的 import 语句来引入模块. 不过从 Node.js v12 开始,通过实验性功能(--experimental-modules)可以使用 .mjs ...