方法一：使用css filter
- 在body下增加svg，并增加需要用到的滤镜，这边用到x-rays
<svg id="svgfilters" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix" />
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.98 0.3 0.25" />
<feFuncG type="table" tableValues="1 0.44 0.24" />
<feFuncB type="table" tableValues="0.91 0.62 0.39" />
<feFuncA type="table" tableValues="0 1" />
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend" />
</filter>
</defs>
</svg>
- 为地图canvas增加css
canvas{
filter: grayscale(0.16) url('#x-rays') contrast(1.8) hue-rotate(338deg) brightness(0.9) !important;
}
实现效果
缺点
如果需要在地图上进行打图层的操作，滤镜会对图层也造成影响
待续
