项目中需要使用酷炫模式的底图，高德地图提供了多种样式的底图，但不是通过wmts瓦片服务的方式提供，无法通过ArcGIS JS调用，且存在较大的偏移量。通过测试，尝试调用了MapBox地图，GEQ地图服务(http://map.geoq.cn/ArcGIS/rest/services)，效果都不是很满意。

后经过检索，发现如下相关内容

1.css filter修改地图样式

 https://blog.csdn.net/yue31313/article/details/91411983

该帖子提到了通过 css 图片的滤镜 filter修改地图样式，但是并无具体实现。

2.天地图官网地图样式设置

经过测试后发现，天地图无深色模式瓦片资源，其深色模式的实现通过如下两个步骤实现：

（1）设置地图背景色为 黑色

（2）设置css filter

设置天地图瓦片的样式的filter为下图，并设置透明度，通过瓦片的滤镜变换，并设置透明度，透视地图div的黑色背景，实现地图的主题变换。

3.ArcGIS JS官方瓦片地图样式自定义示例

关键是通过canvas绘图的方式，修改瓦片的样式。核心代码为fetchTile函数

https://developers.arcgis.com/javascript/latest/sample-code/layers-custom-tilelayer/index.html

示例方案：

var t = BaseTileLayer.createSubclass({
      properties: {
        urlTemplate: null
      },
      // generate the tile url for a given level, row and column
      getTileUrl: function(level: number, row: number, col: number) {
        var length = this.subDomains.length;
        var idx = col % length;
        return this.urlTemplate
          .replace("{level}", level)
          .replace("{col}", col)
          .replace("{row}", row)
          .replace("{subDomain}", this.subDomains[idx]);
      },

      fetchTile: function(
        level: number,
        row: number,
        col: number,
        options: any
      ) {
        // call getTileUrl() method to construct the URL to tiles
        // for a given level, row and col provided by the LayerView
        var url = this.getTileUrl(level, row, col);

        // request for tiles based on the generated url
        // the signal option ensures that obsolete requests are aborted
        return esriRequest(url, {
          responseType: "image",
          signal: options && options.signal
        }).then(
          function(response: any) {
            // when esri request resolves successfully
            // get the image from the response
            var image = response.data;

            var width = this.tileInfo.size[0];
            var height = this.tileInfo.size[0];

            // create a canvas with 2D rendering context
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");
            canvas.width = width;
            canvas.height = height;

            // Apply the tint color provided by
            // by the application to the canvas
            if (ip.useDarkMode) {
              // 样式在此修改 包括滤镜、背景颜色等
              if (ip.maptype == maptype.label) {
                context.fillStyle = "rgba(255, 165, 0, 0.05)";
                context.filter = "grayscale(50%) invert(100%) opacity(80%)";
              } else {
                context.fillStyle = "rgba(255, 250, 250, 0.0)";
                context.filter = "grayscale(5%) invert(100%) opacity(50%)";
              }
              context.fillRect(0, 0, width, height);
              // context.filter="hue-rotate(120.3deg)"
              
            }

            // Draw the blended image onto the canvas.
            context.drawImage(image, 0, 0, width, height);

            return canvas;
          }.bind(this)
        );
      }
    });

    if (ip.srtype == SRtype.jwd) {
      switch (ip.maptype) {
        case maptype.vec:
          tp = "vec_c";
          break;
        case maptype.img:
          tp = "img_c";
          break;
        case maptype.label:
          tp = "cia_c";
          break;
        default:
          tp = "vec_c";
          break;
      }
      var lyr2 = new t({
        urlTemplate:
          "http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" +
          this.tdt_token,
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tileInfo: tt,
        spatialReference: new SpatialReference({ wkid: 4326 })
      });

      return lyr2;
    } else if (ip.srtype == SRtype.mercator) {
      switch (ip.maptype) {
        case maptype.vec:
          tp = "vec_w";
          break;
        case maptype.img:
          tp = "img_w";
          break;
        case maptype.label:
          tp = "cva_w";
          break;
        default:
          tp = "vec_w";
          break;
      }

      var layer = new t({
        urlTemplate:
          "http://{subDomain}.tianditu.gov.cn/DataServer?T=" +
          tp +
          "&x={col}&y={row}&l={level}&tk=" +
          this.tdt_token,
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tileInfo: tt,
        tint: new esriColor("#191970")
      });

      return layer;

地图div样式设置

/*深色样式div背景色*/
.darkMode {
  background-color: rgba(43, 51, 73, 0.82);
  background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000);
}

地图最终效果：

通过css滤镜，修改图片样式示例

https://blog.csdn.net/qq_35018214/article/details/103815412

地图样式修改示例

https://odoe.net/blog/quick-tip-css-filters-and-your-esri-tiles/