基本信息
以下是所在类或对象的基本信息。
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() 方法添加从可加载资源返回的承诺。然后,该层将等待所有依赖项完成加载,然后才被视为已加载。
相关用法
- JavaScript ArcGIS BaseDynamicLayer layerview-create事件用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.addResolvingPromise用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.fetchImage用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.minScale用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.refreshInterval用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.effect用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.opacity用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer refresh事件用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.on用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.fullExtent用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.when用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.maxScale用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer layerview-create-error事件用法及代码示例
- JavaScript ArcGIS BaseDynamicLayer.visible用法及代码示例
- JavaScript ArcGIS BaseLayerViewGL2D.render用法及代码示例
- JavaScript ArcGIS BaseElevationLayer.when用法及代码示例
- JavaScript ArcGIS BasemapGallery.visible用法及代码示例
- JavaScript ArcGIS BaseElevationLayer.addResolvingPromise用法及代码示例
- JavaScript ArcGIS BaseLayerViewGL2D.requestRender用法及代码示例
- JavaScript ArcGIS BaseTileLayer.maxScale用法及代码示例
- JavaScript ArcGIS Basemap.fromId用法及代码示例
- JavaScript ArcGIS BasemapToggle.visibleElements用法及代码示例
- JavaScript ArcGIS BaseElevationLayer layerview-create事件用法及代码示例
- JavaScript ArcGIS BasemapLayerList.headingLevel用法及代码示例
- JavaScript ArcGIS BaseTileLayer.effect用法及代码示例
注:本文由纯净天空筛选整理自arcgis.com大神的英文原创作品 BaseDynamicLayer。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。