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

地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的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. #矩阵树定理,高斯消元,容斥定理#洛谷 4336 [SHOI2016]黑暗前的幻想乡

    题目 分析 这很明显是矩阵树定理,但是每个建筑公司都恰好修建一条边非常难做, 考虑如果一个建筑公司在某个方案中并没有恰好修建一条边, 那么这种方案一定能在不选其它任意一个公司的方案中被减掉, 那就可以 ...

  2. 震撼!这个Python模块竟然能自动修复代码!

    说到Python的强大的地方,那真的是太多了,优雅.简洁.丰富且强大的第三方库.开发速度快,社区活跃度高等,所以才使得Python才会如此的受欢迎. 今天给大家介绍一个特别暴力的Python库: Fu ...

  3. 基于openstack安装部署私有云详细图文教程

    本文主要分享的是云计算.openstack的使用.私有云平台建设.云服务器云硬盘的构建和使用.从基本概念入手到私有云建设,信息量非常大.对于openstack的安装部署都是从官方文档中一步步的介绍,内 ...

  4. 报表如何集成 echarts 官网示例图

    Echarts,江湖人称一个纯 Javascript 的图表库,图形种类星罗棋布且个个颜值爆表,可以轻松驾驭 PC 和移动设备,与绝大部分浏览器都可称兄道弟,而且已然众多拥趸,还有不少报表对它采取了嫁 ...

  5. k8s 深入篇———— k8s 的本质[四]

    前言 简单整理一下k8s的本质. 正文 首先,Kubernetes 项目要解决的问题是什么? 编排?调度?容器云?还是集群管理? 实际上,这个问题到目前为止都没有固定的答案.因为在不同的发展阶段,Ku ...

  6. 【转】Java程序员常用工具类库 - 目录

    原文地址:http://rensanning.iteye.com/blog/1553076 有人说当你开始学习Java的时候,你就走上了一条不归路,在Java世界里,包罗万象,从J2SE,J2ME,J ...

  7. 纯CSS实现带小三角提示框

    要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...

  8. 百度unit闲聊机器人

    import json import random import requests # client_id 为官网获取的AK, client_secret 为官网获取的SK client_id = & ...

  9. 力扣570(MySQL)-至少有5名直接下属的经理(简单)

    题目: Employee 表包含所有员工和他们的经理.每个员工都有一个 Id,并且还有一列是经理的 Id. 给定 Employee 表,请编写一个SQL查询来查找至少有5名直接下属的经理.对于上表,您 ...

  10. 力扣81(java&python)-搜索旋转排序数组 II(中等)

    题目: 已知存在一个按非降序排列的整数数组 nums ,数组中的值不必互不相同. 在传递给函数之前,nums 在预先未知的某个下标 k(0 <= k < nums.length)上进行了 ...