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

地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的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. python整理1992、2009国家标准学科分类及代码数据并存入MySQL数据库

    文件内容 处理结果 代码 1 import pandas as pd 2 import pymysql 3 4 5 def get_subject_1992(): 6 res={} 7 the_for ...

  2. FreeSql生产环境自动升级数据库解决方案

    项目场景: 使用FreeSql,包含所有的ORM数据库,都会存在这样的问题.在codefirst模式下,根据代码自动更新数据库,都建议不要在生产环境使用.为什么呢? 其实不建议使用,主要是根据代码自动 ...

  3. Access文件清理占用内存

    1.用access打开access.accdb文件 2.找到数据库工具的压缩和修复数据库,单击就行 3.数据库文件成功便成500K内存占用

  4. OpenHarmony社区运营报告(2022年10月)

    本月快讯 ● <深圳市推动软件产业高质量发展的若干措施>于10月24日发布. ● 社区共发展逾5000位贡献者累计为社区提交超过11万个PR,深圳市优博终端科技有限公司(以下简称" ...

  5. Qt加Opencv实现 梯度矫正 功能

    废话: 有时候我们是从物品的斜上方拍摄的图片,看起来不直观,需要把视角拉正,这样的一个操作就叫做 梯度矫正,需要用到的技术是 Opencv 的 透视变换. 这个只是一个简单的演示demo,如果完善一下 ...

  6. Qt获取电脑有几个网卡,并获取对应的IPV4

    标题:Qt获取电脑网卡对应的ip | Qt计算电脑有几个网卡 | Qt获取网卡ip信息 | Qt判断获取到的ip是否是IPV4   demo流程: 1.点击搜索网卡按钮,搜索电脑所有的网卡,将网卡名称 ...

  7. SQL中使用年月日来进行分组

    SQL按年月日进行分组 select count(project_name), create_at from table_a group by date_format(create_at, '%Y%m ...

  8. identity4 系列————用户数据持久化篇[六]

    前言 前面的例子已经将各种情形下的例子已经介绍了一遍,那么后面就是用户数据持久化该如何处理了. 正文 例子位置: https://github.com/IdentityServer/IdentityS ...

  9. Bogus 实战:使用 Bogus 和 EFCore 生成模拟数据和种子数据【完整教程】

    引言 上一章我们介绍了在xUnit单元测试中用xUnit.DependencyInject来使用依赖注入,上一章我们的Sample.Repository仓储层有一个批量注入的接口没有做单元测试,今天用 ...

  10. 【笔记】go语言--切片的操作

    go语言--切片的操作 接上篇切片的概念开始 //Slice添加元素 arr := [...]int{0,1,2,3,4,5,6,7} s1 := arr[2:6] s2 := s1[3:5]//[5 ...