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 顯示獲取的圖塊。