ArcGis JS天地图 暗色地图

方法一：使用css filter

1. 在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>

2. 为地图canvas增加css

canvas{
  filter: grayscale(0.16) url('#x-rays') contrast(1.8) hue-rotate(338deg) brightness(0.9) !important;
}

实现效果
缺点
如果需要在地图上进行打图层的操作，滤镜会对图层也造成影响

待续

原文地址：https://blog.csdn.net/qq_46258819/article/details/142844812

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！