JavaScript ArcGIS BaseTileLayer用法及代码示例

AMD: require(["esri/layers/BaseTileLayer"], (BaseTileLayer) => { /* code goes here */ });

ESM: import BaseTileLayer from "@arcgis/core/layers/BaseTileLayer";

类： esri/layers/BaseTileLayer

继承: BaseTileLayer > Layer > Accessor

子类： BingMapsLayer

自从：用于 JavaScript 4.4 的 ArcGIS API

可以扩展此类以创建自定义 TileLayer 。切片图层由图像(例如卫星图像)组成，这些图像由按列和行镶嵌在一起的方形切片组成，使图层看起来像是一张连续的图像。这些图层具有多个细节级别 (LOD)，允许用户放大到Map的任何区域并加载额外的切片，以在更大的Map比例下以更高分辨率描绘特征。

切片图层通常为其他图层(例如 FeatureLayer)提供地理上下文，并且往往比其他图层(例如 MapImageLayer 和 ImageryLayer 请求并显示每个视图的单个图像)更好。

您可以通过在 BaseTileLayer 类上调用 createSubclass() 来创建自定义切片图层。您可以出于以下原因之一创建自定义切片图层：

• 图片的来源不受 JavaScript 的 ArcGIS API 的明确支持
• 图像在视图中显示之前需要进行预处理

请求定义的图像

要请求从数据源预定义的图像，请覆盖 getTileUrl() 方法，以便它返回给定级别、行和列的请求图块的 URL。

let 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("{z}", level).replace("{x}", col).replace("{y}", row);
   }
});

在显示之前预处理图像

如果数据需要在显示之前进行预处理，则覆盖fetchTile()方法。例如，如果您需要在显示图像之前对从服务器返回的图像应用compositing operation，那么您将重写此方法。

// override fetchTile() method to process the data returned
// from the server.
 fetchTile: function (level, row, col, options) {
   // call getTileUrl method to construct the Url for the image
   // for given level, row and column
   let url = this.getTileUrl(level, row, col);

   // request for the tile based on the url returned from getTileUrl() method.
   // the signal option ensures that obsolete requests are aborted.
   return esriRequest(url, {
     responseType: "image",
     signal: options && options.signal
   })
   .then(function (response) {
     // when esriRequest resolves successfully,
     // process the image that is returned
     let image = response.data;
     let width = this.tileInfo.size[0];
     let height = this.tileInfo.size[0];

     // create a canvas with a filled rectangle
     let canvas = document.createElement("canvas");
     let context = canvas.getContext("2d");
     canvas.width = width;
     canvas.height = height;

     // Apply the color provided the the layer to the fill rectangle
     if (this.tint) {
       context.fillStyle = this.tint.toCss();
       context.fillRect(0, 0, width, height);
       // apply multiply blend mode to canvas' fill color and the tile
       // returned from the server to darken the tile
       context.globalCompositeOperation = "multiply";
     }
     context.drawImage(image, 0, 0, width, height);
     return canvas;
   }.bind(this));
}

有关其工作原理的示例，请参见以下示例：

• 示例 - 自定义 TileLayer
• 示例 - 自定义 LERC 层
• 示例 - 自定义 BlendLayer

如果自定义切片图层需要可加载资源，则您必须在 load() 方法中加载图层上的所有 loadable 依赖项。使用 addResolvingPromise() 方法添加从可加载资源返回的承诺。然后，该层将等待所有依赖项完成加载，然后才被视为已加载。

// Override load method
load: function () {
 // multiply property is an array of ArcGIS cached map services
 this.multiply.forEach(function (layer) {
   // loop through each tile layers and call
   // load method on each layer
   let promise = layer.load();

   // add the promise of each load() method to addResolvingPromise()
   // the custom tile layer will be loaded when every promise is resolved
   this.addResolvingPromise(promise);
 }, this);
}

该层负责为LayerView 提供的级别、行和列生成切片 URL 并从服务器获取切片。 LayerView 显示获取的图块。