JavaScript ArcGIS BaseDynamicLayer用法及代碼示例

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

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

類： esri/layers/BaseDynamicLayer

繼承: BaseDynamicLayer > Layer > Accessor

自從：用於 JavaScript 4.4 的 ArcGIS API

可以擴展此類以創建動態Map圖層。動態圖層顯示基於請求在服務器上動態生成的圖像，包括圖像的範圍和大小。導出的圖像覆蓋整個視圖範圍。視圖上的每次交互(例如平移、縮放)都會導致在服務器上導出新圖像。每個導出都是唯一的，因此無法在瀏覽器中緩存。

您可以通過調用其createSubclass() 方法來創建自定義DynamicLayer。您可以出於以下原因之一創建自定義動態層：

• 圖片的來源不受 JavaScript 的 ArcGIS API 的明確支持
• 圖像在視圖中顯示之前需要進行預處理

請求定義的圖像

要請求從數據源預定義的圖像，請覆蓋 getTileUrl() 方法，以便它返回給定級別、行和列的請求圖塊的 URL。

let MyCustomDynamicLayer = BaseDynamicLayer.createSubclass({
 // properties of the custom dynamic layer
 properties: {
   getMapUrl: null,
   getMapParameters: null
 },

 // override getImageUrl() to generate URL to the image
 getImageUrl: function (extent, width, height) {
   // generate the URL for the map image
   let urlVariables = this._prepareQuery(this.getMapParameters, extent, width, height);
   let queryString = this._joinUrlVariables(urlVariables);

   // return the URL to the generated image
   return this.getMapUrl + "?" + queryString;
 },
 ...
});

有關此工作流程的示例，請參閱Custom DynamicLayer sample。

在顯示之前預處理圖像

如果在顯示之前需要對數據進行預處理，則重寫fetchImage()方法，通過處理服務器返回的數據來生成html image element或canvas element。例如，如果您需要在顯示圖像之前對從服務器返回的圖像應用compositing operation，那麽您將重寫此方法。

// Fetches images for given extent and size
fetchImage: function (extent, width, height){
  let url = this.getImageUrl(extent, width, height);

  // request for the image  based on the generated url
  return esriRequest(url, {
    responseType: "image"
  })
  .then(function(response) {
    let image = response.data;

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

    // Apply destination-atop operation to the image returned from the server
    context.fillStyle = "rgb(0,200,200)";
    context.fillRect(0, 0, width, height);
    context.globalCompositeOperation = "destination-atop";
    context.drawImage(image, 0, 0, width, height);

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

該層負責生成圖像 URL 並從服務器獲取圖像，以達到 LayerView 提供的範圍和大小。 LayerView 顯示獲取的圖塊。

如果自定義動態層需要可加載資源，則您必須在 load() 方法中加載該層上的所有 loadable 依賴項。使用 addResolvingPromise() 方法添加從可加載資源返回的承諾。然後，該層將等待所有依賴項完成加載，然後才被視為已加載。