arcgis javascript api4.x以basetilelayer方式加载天地图web墨卡托（wkid：3857）坐标系

需求：

arcgis javascript api4.x以basetilelayer方式加载天地图web墨卡托（wkid：3857）坐标系

效果图：

代码：

提示：

2个文件放同一个文件夹下

MyCustomTileLayer.js

define(['exports', "esri/layers/BaseTileLayer","esri/request"], function (
    exports,
    BaseTileLayer,
    esriRequest
  ) {
    const MyCustomTileLayer = BaseTileLayer.createSubclass({
            // properties of the custom tile layer
            properties: {
              urlTemplate: null,
            },
  
          // override getTileUrl()
          // generate the tile url for a given level, row and column
          getTileUrl: function (level, row, col) {
            return this.urlTemplate.replace("{level}", level).replace("{col}", col).replace("{row}", row);
          },
  
          // This method fetches tiles for the specified level and size.
          // Override this method to process the data returned from the server.
          fetchTile: function (level, row, col, options) {
  
            // 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
               allowImageDataAccess: true 
            })
              .then(function (response) {
                // 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 (this.tint) {
                  // Get a CSS color string in rgba form
                  // representing the tint Color instance.
                  context.fillStyle = this.tint.toCss();
                  context.fillRect(0, 0, width, height);
  
                  // Applies "difference" blending operation between canvas
                  // and steman tiles. Difference blending operation subtracts
                  // the bottom layer (canvas) from the top layer (tiles) or the
                  // other way round to always get a positive value.
                  context.globalCompositeOperation = "difference";
                }
  
                // Draw the blended image onto the canvas.
                context.drawImage(image, 0, 0, width, height);
  
                return canvas;
              }.bind(this));
          }
  
        });
  
  return MyCustomTileLayer;
  })
  
 

loadtdt3857.html

参考资料：

https://www.cnblogs.com/hjyjack9563-bk/p/16067633.html