JavaScript ArcGIS BaseTileLayer.fetchTile用法及代碼示例

基本信息

以下是所在類或對象的基本信息。

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

用法說明

BaseTileLayer.fetchTile函數(或屬性)的定義如下：

fetchTile (level, row, col, options) {Promise<(HTMLImageElement|HTMLCanvasElement)>}

此方法獲取視圖中存在的給定級別、行和列的圖塊。如果從服務器返回的數據或圖像需要經過處理才能顯示，則覆蓋此方法。

參數：

類型說明

level Number

要獲取的圖塊的詳細程度。該值由 LayerView 提供。

row Number

瓦片提取的行 (y) 位置。該值由 LayerView 提供。

col Number

要獲取的圖塊的列 (x) 位置。該值由 LayerView 提供。

options Object

可選的

磁貼請求的可選設置。這些選項具有以下屬性。

規格：

signal

AbortSignal

可選的

AbortSignal 用於中止請求。覆蓋 fetchTile 時，應處理 signal，例如將其傳遞給 request 或中止掛起的操作。對 fetchTile 的中止調用應該使用 Error 的實例拒絕其返回的承諾。

類型	說明
Promise<(HTMLImageElement\|HTMLCanvasElement)>	返回解析為 HTMLImageElement 或 HTMLCanvasElement 的承諾。

例子：

// Process the image returned from the server before
// it is displayed.
fetchTile: function (level, row, col, options) {
  // call getTileUrl method to construct the URL for
  // the image for the given level, row and col
  let url = this.getTileUrl(level, row, col);

  // request for the tile 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) {
    // get the image from the response
    let image = response.data;
    let width = this.tileInfo.size[0];
    let height = this.tileInfo.size[0];

    let canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    let context = canvas.getContext("2d");

    // tint is a custom property of this layer
    // Apply the tint color provided by the application
    // to the canvas
    if (this.tint) {
      context.fillStyle = this.tint.toCss();
      context.fillRect(0, 0, width, height);

      // The pixels of the top layer are multiplied by the corresponding
      // pixel of the bottom layer. A darker picture is the result.
      context.globalCompositeOperation = "multiply";
    }
    context.drawImage(image, 0, 0, width, height);
    return canvas;
  }.bind(this));
}

相關用法

注：本文由純淨天空篩選整理自arcgis.com大神的英文原創作品 BaseTileLayer.fetchTile。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。

基本信息

用法說明

參數：

返回：

例子：