vue+leaflet使用leaflet.tilelayer.colorfilter将底图改成暗黑色

1、安装leaflet.tilelayer.colorfilter依赖

yarn add leaflet.tilelayer.colorfilter

2、在使用的页面局部引入

import 'leaflet.tilelayer.colorfilter';

3、使用

// 初始化
this.map = L.map('provinceLargeScreenMap', {
    center: [this.mapCenter.lat, this.mapCenter.lng], // 地图中心
    zoom: 12, // 缩放比列
    minZoom: 3, // 最小比例
    maxZoom: 15, // 最大比例
    zoomControl: false, // 禁用 + - 按钮
    doubleClickZoom: false, // 禁用双击放大
    attributionControl: false // 移除右下角leaflet标识
});
// 图层
// 高德：http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
// https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png
// 天地图：http://t2.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=你的key
// 天地图：http://t1.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk=你的key
// 百度：http://shangetu1.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46
L.tileLayer.colorFilter('http://t2.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=你的key', {
  maxZoom: 18,
  // 设置颜色滤镜
  filter: [
     'blur:0px',  // 应用以像素为单位的高斯模糊滤波
     'brightness:200%',  // 控制互动程序图像的亮度，默认100%，亮度越小，底图上的道路、名字等元素显示的越清晰
     'contrast:100%',  // 更改瓷砖的颜色对比度，默认100%
     'grayscale:100%',  // 将图块的颜色更改为灰度，默认0%，道路、湖泊、河流等色块的颜色
     'hue:0deg',  // 在平铺颜色上应用色调旋转（以度为单位）默认0deg
     'opacity:100%',  // 定义图块的不透明度，默认100%，地图的不透明度
     'invert:100%',  // 反转瓷砖颜色，默认0%
     'saturate:10%',  // 使瓷砖颜色饱和，默认100%
     'sepia:100%'  // 将平铺颜色转换为棕褐色，默认0%
  ],
  // 设置不透明度
  opacity: 1
  })
  .addTo(this.map);