使用leaflet给地图添加蒙版（超级详细免费看）

使用leaflet给地图添加蒙版

leaflet相关的详细说明文档且免费的不好找，代码虽然不多，但是挺耗费时间的。本着开源精神，分享给大家，希望能帮助到您。

1.1 leaflet插件官网

https://leafletjs.cn/plugins.html

1.2 主要使用colorFilter插件 实现

可以模块化开发，也可以直接引用对应的js文件，下面是模块引入

#npm安装
npm install --save leaflet.tilelayer.colorfilter
#yarn安装
yarn add leaflet.tilelayer.colorfilter

1.3 核心代码

//滤镜  
let myFilter = ['grayscale:100%', 'invert:100%']
//地图加载
let myTileLayer = L.tileLayer
      .colorFilter('http://192.168.10.251:8900/imgNew/xiangtan/{z}/{x}/{y}.png', {
        attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
        filter: myFilter,
      })
      .addTo(map)
//添加其他滤镜选项
//反色（invert）灰色（grayscale）亮度（brightness）对比度（contrast）色相旋转(hue)饱和度(saturate)深褐色(sepia)
myTileLayer.updateFilter(['brightness:110%', 'hue:90deg', 'saturate:120%'])