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

地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的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实现地图遮罩的更多相关文章
- 使用Leaflet创建地图模块
背景 最近需要为某单位开发地图展示系统,因此开始涉略和使用Leaflet这个轻量级地图库. 创建基础地图需要以下几步 引入相关js和css文件,创建基础地图 <div id="map& ...
- leaflet在地图上加载本地图片
<link href="~/Scripts/Leaflet/leaflet.css" rel="stylesheet" /><script s ...
- 基于MySQL + Node.js + Leaflet的离线地图展示,支持百度、谷歌、高德、腾讯地图
1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 ...
- R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图(遍地代码图)
好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个 ...
- 关于flutter插件地图的使用flutter_map
关于flutter插件地图的使用flutter_map flutter_map A Dart implementation of Leaflet for Flutter apps.一个基于leafle ...
- java离线地图web GIS制作
因为项目需求,要做一个web地图,之前做过高德的在线地图,它提供了一系列的API,并且由于是国产的,所以开发起来比较容易,现在由于项目是内网使用的,所以需要使用离线地图,由此便开始了: Web GIS ...
- Google Maps瓦片(tile)地图文件下载(1-11层级)
整理硬盘时,发现一份去年下载的谷歌地图瓦片文件,整理并分享给大家. 地图来源:Google Maps(应该是国内谷歌地图) 采集时间:2017年6月 采集范围:0-6层级世界范围:7-11层级中国范围 ...
- leaflet视频监控播放(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- mapboxgl 互联网地图纠偏插件(一)
之前写过一个 leaflet 互联网地图纠偏插件,引用插件后一行代码都不用写,就能解决国内互联网地图瓦片的偏移问题. 最近想对 mapboxgl 也写一个这样的插件. 原因是自己发布的OSM矢量瓦片地 ...
- 如何实现通过Leaflet加载dwg格式的CAD图
前言 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...
随机推荐
- 32位x86处理器编程架构
1. IA-32架构的基本执行环境 1.1 寄存器的扩展 为了在汇编语言程序中使用经过扩展(Extend) 的寄存器: 在32位模式下,为了生成32位物理地址,处理器需要使用32位的指令指针寄 ...
- Unity最新一键清理Prefab中所有MissingComponent
因为老的API Properties.DeleteArrayElementAtIndex(propertyIndex);提示没权限修改, 而unity提供了新的API GameObjectUtil ...
- 首届OpenHarmony竞赛训练营结营颁奖,75所高校学子助力建设开源生态
由OpenAtom OpenHarmony(以下简称"OpenHarmony")项目群工作委员会和OpenHarmony项目群技术指导委员会主办的首届OpenHarmony竞赛 ...
- 基于ArkUI框架开发——图片模糊处理的实现
原文:https://mp.weixin.qq.com/s/vwXVj5vmAxDRG_jTk_8hPA,点击链接查看更多技术内容. 现在市面上有很多APP,都或多或少对图片有模糊上的设计,所以,图 ...
- 学习如何使用 Python 连接 MongoDB: PyMongo 安装和基础操作教程
Python 可以用于数据库应用程序.最流行的 NoSQL 数据库之一是 MongoDB MongoDB MongoDB 将数据存储在类似 JSON 的文档中,使数据库非常灵活和可扩展. 您可以在 M ...
- Linux编译静态库、动态库
一.Linux上编译静态库 # 1.编译成.o文件 gcc -c a.c b.c // 2.编译成静态库 ar -r liba.a a.o b.o // 3.链接成可执行文件 gcc main.c - ...
- HarmonyOS音频开发指导:使用OpenSL ES开发音频播放功能
OpenSL ES全称为Open Sound Library for Embedded Systems,是一个嵌入式.跨平台.免费的音频处理库.为嵌入式移动多媒体设备上的应用开发者提供标准化.高性 ...
- 动态规划(四)——区间dp
区间dp: 就是对于区间的一种动态规划,对于某个区间,它的合并方式可能有很多种,我们需要去枚举所有的方式,通常是去枚举区间的分割点,找到最优的方式(一般是找最少消耗). 通常都是先枚举区间长度,区间长 ...
- 实验1 c语言开发环境使用和数据类型 运算符 表达式
#include<stdio.h> #include<stdlib.h> int main() { printf(" O\n"); printf(" ...
- 结构化数据上的 TopN 运算
1. 最大值 / 最小值 最大值 / 最小值可以理解为 TopN 查询中,N 等于 1 时的情况,因为很常用所以单独拿出来讲一下.取最大值 / 最小值是很常见的需求,例如一班数学最高分是多少, ...