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

地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的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. 11 CSS盒子模型(重点)

    11 CSS盒子模型(重点) 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.HTML页面上的每个元素都可以看成一个个方盒子,这些盒子由元素的content(内容).padding ...

  2. 7 CSS选择器优先级

    7 选择器优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.样式表中的特殊性描述了不同规则的相对权重. /* !important > 行内样式>ID选择器 > ...

  3. #状压dp,贪心#CF1316E Team Building

    题目 为了组织一支排球队,你需要为队伍里的\(p\)个不同的位置,从\(n\)个人中选出\(p\)个人, 且每个位置上都恰好有一个人.另外还需要从剩下的人中选出恰好\(k\)个人作为观众. 对于第\( ...

  4. 玩转OpenHarmony智能家居:如何实现树莓派“碰一碰”设备控制

    一.简介 "碰一碰"设备控制,依托NFC短距通信协议,通过碰一碰的交互方式,将OpenAtom OpenHarmony(简称"OpenHarmony")标准系统 ...

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

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

  6. 学习Source Generators之了解Source Generators的应用场景

    前面的文章我们都初步学习了Source Generators的使用方式以及做了一些简单的代码生成工具. 但是Source Generators除了做自动代码生成之外,还能有别的应用场景,本文来了解一下 ...

  7. 实验1产品原型设计-YHealth健康APP

    一.实验题目:原型设计 二.实验目的:掌握产品原型设计方法和相应工具使用. 三.实验要求: (1)对比分析墨刀.Axure.Mockplus等原型设计工具的各自的适用领域及优缺点 --墨刀 适用领域: ...

  8. redis 简单整理——哨兵部署业务图[二十九]

    前言 简单介绍一下哨兵的部署业务图,非部署步骤. 正文 看一下部署的拓扑图: 然后这里用docker 来部署一下哨兵模式. 搭建一主二从. version: '3.7' services: maste ...

  9. c# semaphoreSlim限制线程数

    前言 我们在使用线程的时候,如果多个线程数去访问一个资源的时候,那么是非常影响程序的运行的,因为如果有写的操作,那么需要写锁,那么线程都会堵在同一个地方,那么我们可以限制一下访问一个资源的线程数. 正 ...

  10. c# countDownEvent类

    前言 把异步先总结完吧. countDownEvent 这东西是干什么的呢? 比如说我们比赛跑步,我们需要得出的是第一二三名得出后就可以先统计出来,因为比较重要,后面没有获得获奖名次的可以后续统计出来 ...