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() 方法添加从可加载资源返回的承诺。然后，该层将等待所有依赖项完成加载，然后才被视为已加载。