方法一：使用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 00 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;}
实现效果
缺点
如果需要在地图上进行打图层的操作，滤镜会对图层也造成影响
待续
