require(["esri/views/2d/layers/BaseLayerView2D"], (BaseLayerView2D) => { /* code goes here */ });
import BaseLayerView2D from "@arcgis/core/views/2d/layers/BaseLayerView2D.js";
esri/views/2d/layers/BaseLayerView2D
Represents the LayerView of a Layer after it has been added to a Map with a MapView.
This class may be extended to create a custom LayerView for a Layer. A LayerView is created on demand by the MapView when a layer is added the to list of layers of its map.
The subclass can implement multiple functions of the LayerView lifecycle. First, the attach() method
is called when the LayerView is about to start drawing the layer's content. Then during the life of the LayerView,
the render() method is called during the MapView rendering phase. The render()
method has access to a canvas 2d context
in which it can render the content available for display. Finally the detach() method is called after the layer
is removed from the map. It releases all allocated resources and stops on-going requests.
let TileBorderLayerView2D = BaseLayerView2D.createSubclass({
// Example of a render implementation that draws tile boundaries
render(renderParameters) {
let tileSize = this.layer.tileInfo.size[0];
let state = renderParameters.state;
let pixelRatio = state.pixelRatio;
let width = state.size[0];
let height = state.size[1];
let context = renderParameters.context;
let coords = [0, 0];
context.fillStyle = "rgba(0,0,0,0.25)";
context.fillRect(0, 0, width * pixelRatio, height * pixelRatio);
// apply rotation for everything that will be applied to the canvas
if (state.rotation !== 0) {
context.translate(width * pixelRatio * 0.5, height * pixelRatio * 0.5);
context.rotate((state.rotation * Math.PI) / 180);
context.translate(- width * pixelRatio * 0.5, -height * pixelRatio * 0.5);
}
// Set the style for all the text.
context.font = "24px monospace";
context.fillStyle = "black";
context.shadowBlur = 1;
for (const tile of this.tiles) {
let screenScale = tile.resolution / state.resolution * pixelRatio;
state.toScreenNoRotation(coords, tile.coords);
// Draw the tile boundaries
context.strokeRect(coords[0], coords[1], tileSize * screenScale, tileSize * screenScale);
// Draw the tile information
context.shadowColor = "white";
context.fillText(
tile.level + "/" + tile.row + "/" + tile.col + "/" + tile.world,
coords[0] + 12,
coords[1] + 24,
tileSize * screenScale
);
context.shadowColor = "transparent";
}
}
});
let CustomTileLayer = Layer.createSubclass({
tileInfo: TileInfo.create({ spatialReference: { wkid: 3857 }}),
createLayerView(view) {
if (view.type === "2d") {
return new TileBorderLayerView2D({
view: view,
layer: this
});
}
}
});
Constructors
-
Parameterproperties Objectoptional
See the properties for a list of all the properties that may be passed into the constructor.
Property Overview
Name | Type | Summary | Class |
---|---|---|---|
The name of the class. | Accessor | ||
References the layer this LayerView represents. | BaseLayerView2D | ||
Indicates if the spatialReference of the MapView is supported by the layer view. | LayerView | ||
Value is | LayerView | ||
The array of Tile objects computed to cover the MapView's visible area. | BaseLayerView2D | ||
Indicates if the layer view is making any updates that will impact what is displayed on the map. | LayerView | ||
BaseLayerView2D | |||
When | LayerView | ||
When | LayerView | ||
When | LayerView |
Property Details
-
spatialReferenceSupported
InheritedPropertyspatialReferenceSupported Booleanreadonly
Inherited from LayerViewSince: ArcGIS Maps SDK for JavaScript 4.23LayerView since 4.0, spatialReferenceSupported added at 4.23. -
Indicates if the spatialReference of the MapView is supported by the layer view. When
false
layer view will be suspended.- See also
-
The array of Tile objects computed to cover the MapView's visible area. This array is updated when the view is animating or the user is interacting with it. Then if tiles have been added or removed, tilesChanged() is called.
- See also
-
updating
InheritedPropertyupdating Booleanreadonly
Inherited from LayerView -
Indicates if the layer view is making any updates that will impact what is displayed on the map. For example, this value is
true
when renderer, definitionExpression, filter or effect is changed or if the layer view is in the process of the fetching data.Watch dataUpdating property instead to only know when the data has been updated (e.g. to run statistics query on all feature available in the layer view).
- Default Value:false
Example// Check for the first time layerView.updating becomes false. Then query for // features that are visible within the view associated with the layer view. await reactiveUtils.whenOnce(() => !layerView.updating); const query = layerView.createQuery(); query.geometry = layerView.view.extent; const result = layerView.queryFeatures(query);
-
visible
InheritedPropertyvisible Boolean
Inherited from LayerView -
When
true
, the layer is visible in the view. Value of this property is inherited from thelayer.visible
unless the developer overrides it. ThelayerView.visible
will take precedence overlayer.visible
if both properties are set.- Default Value:true
-
visibleAtCurrentScale
InheritedPropertyvisibleAtCurrentScale Booleanreadonly
Inherited from LayerViewSince: ArcGIS Maps SDK for JavaScript 4.30LayerView since 4.0, visibleAtCurrentScale added at 4.30. -
When
true
, the layer is visible in the view at the current scale. This applies to layers that haveminScale
andmaxScale
properties set.Known Limitations
- This property is not supported in 3D SceneView tiled layers.
- Default Value:true
- See also
-
visibleAtCurrentTimeExtent
InheritedPropertyvisibleAtCurrentTimeExtent Booleanreadonly
Inherited from LayerViewSince: ArcGIS Maps SDK for JavaScript 4.30LayerView since 4.0, visibleAtCurrentTimeExtent added at 4.30. -
When
true
, the layer is visible in the view's timeExtent. This applies to layers that have a visibilityTimeExtent.- Default Value:true
- See also
Method Overview
Name | Return Type | Summary | Class |
---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. | Accessor | ||
Method called when after the LayerView is created and right before it's asked to draw the layer's content. | BaseLayerView2D | ||
Method called after the layer is removed and the LayerView is about to be removed. | BaseLayerView2D | ||
Returns true if a named group of handles exist. | Accessor | ||
Method to implement that is responsible for providing objects hit at the specified screen coordinates. | BaseLayerView2D | ||
| LayerView | ||
| LayerView | ||
| LayerView | ||
Removes a group of handles owned by the object. | Accessor | ||
The method to implement that is responsible of drawing the content of the layer. | BaseLayerView2D | ||
The LayerView can call this method to ask the MapView to schedule a new rendering frame. | BaseLayerView2D | ||
Method to implement, which notifies of tiles being added or removed for the current view state. | BaseLayerView2D | ||
Promise |
| LayerView |
Method Details
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, addHandles added at 4.25. -
Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.
// Manually manage handles const handle = reactiveUtils.when( () => !view.updating, () => { wkidSelect.disabled = false; }, { once: true } ); this.addHandles(handle); // Destroy the object this.destroy();
ParametershandleOrHandles WatchHandle|WatchHandle[]Handles marked for removal once the object is destroyed.
groupKey *optionalKey identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.
-
Method called when after the LayerView is created and right before it's asked to draw the layer's content. Typically this method is implemented to start watching property changes on the layer for example.
- See also
Exampleattach() { this._propertyHandle = reactiveUtils.watch( () => this.layer.opacity, () => this.requestRender() ); }
-
Method called after the layer is removed and the LayerView is about to be removed. Typically, this method is implemented to free resources like watchers.
- See also
Example// remove the watchers on the layer that are added in attach() detach() { this._propertyHandle.remove(); this._propertyHandle = null; }
-
hasHandles
InheritedMethodhasHandles(groupKey){Boolean}
Inherited from AccessorSince: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, hasHandles added at 4.25. -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType Description Boolean Returns true
if a named group of handles exist.Example// Remove a named group of handles if they exist. if (obj.hasHandles("watch-view-updates")) { obj.removeHandles("watch-view-updates"); }
-
Method to implement that is responsible for providing objects hit at the specified screen coordinates. This method is called internally by the MapView each time its hitTest() method is called.
ParametersmapPoint PointThe point in map units.
screenPoint ScreenPointThe point in screen coordinates.
Returns
-
isFulfilled
InheritedMethodisFulfilled(){Boolean}
Inherited from LayerView -
isFulfilled()
may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected). If it is fulfilled,true
will be returned.ReturnsType Description Boolean Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).
-
isRejected
InheritedMethodisRejected(){Boolean}
Inherited from LayerView -
isRejected()
may be used to verify if creating an instance of the class is rejected. If it is rejected,true
will be returned.ReturnsType Description Boolean Indicates whether creating an instance of the class has been rejected.
-
isResolved
InheritedMethodisResolved(){Boolean}
Inherited from LayerView -
isResolved()
may be used to verify if creating an instance of the class is resolved. If it is resolved,true
will be returned.ReturnsType Description Boolean Indicates whether creating an instance of the class has been resolved.
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, removeHandles added at 4.25. -
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");
-
The method to implement that is responsible of drawing the content of the layer. This method is called every time the MapView's state changes, or if requestRender() has been called.
ParametersSpecificationrenderParameters ObjectSpecificationcontext CanvasRenderingContext2DThe canvas 2D context in which to draw content.
stationary BooleanThe stationary state of the
MapView
.state ViewStateThe object that describes view state.
Example// Example of a render implementation that draws tile boundaries render(renderParameters) { let tileSize = this.layer.tileInfo.size[0]; let state = renderParameters.state; let pixelRatio = state.pixelRatio; let width = state.size[0]; let height = state.size[1]; let context = renderParameters.context; let coords = [0, 0]; context.fillStyle = "rgba(0,0,0,0.25)"; context.fillRect(0, 0, width * pixelRatio, height * pixelRatio); // apply rotation for everything that will be applied to the canvas if (state.rotation !== 0) { context.translate(width * pixelRatio * 0.5, height * pixelRatio * 0.5); context.rotate((state.rotation * Math.PI) / 180); context.translate(- width * pixelRatio * 0.5, -height * pixelRatio * 0.5); } // Set the style for all the text. context.font = "24px monospace"; context.fillStyle = "black"; context.shadowBlur = 1; for (const tile of this.tiles) { let screenScale = tile.resolution / state.resolution * pixelRatio; state.toScreenNoRotation(coords, tile.coords); // Draw the tile boundaries context.strokeRect(coords[0], coords[1], tileSize * screenScale, tileSize * screenScale); // Draw the tile information context.shadowColor = "white"; context.fillText( tile.level + "/" + tile.row + "/" + tile.col + "/" + tile.world, coords[0] + 12, coords[1] + 24, tileSize * screenScale ); context.shadowColor = "transparent"; } }
-
The LayerView can call this method to ask the MapView to schedule a new rendering frame.
Example// Call requestRender whenever the layer opacity has changed. attach() { this._propertyHandle = reactiveUtils.watch( () => this.layer.opacity, () => this.requestRender() ); }
-
Method to implement, which notifies of tiles being added or removed for the current view state. This function can be implemented to start and stop fetching new data, or allocate and dispose resources.
Parameters
-
Inherited from LayerView
-
when()
may be leveraged once an instance of the class is created. This method takes two input parameters: acallback
function and anerrback
function. Thecallback
executes when the instance of the class loads. Theerrback
executes if the instance of the class fails to load.ParametersReturnsType Description Promise Returns a new promise for the result of callback
that may be used to chain additional functions.Example// Although this example uses MapView, any class instance that is a promise may use when() in the same way let view = new MapView(); view.when(function(){ // This function will execute once the promise is resolved }, function(error){ // This function will execute if the promise is rejected due to an error });
Type Definitions
-
Since: ArcGIS Maps SDK for JavaScript 4.11BaseLayerView2D since 4.8, ScreenPoint added at 4.11. -
An object representing a point on the screen.
-
Tile
Tile Object
-
Represents a tile reference.
- Properties
-
id String
The tile string identifier in the format
level/row/col/world
level NumberThe level identifier of the LOD to which the tile belongs
row NumberThe row identifier.
col NumberThe column identifier.
world NumberWhen the projection allows world wrapping (e.g. Web Mercator), identifies the instance of the world this tile's
level
/row
/col
.resolution NumberThe number of map units per pixel in the tile.
scale NumberThe map scale at the tile's level.
The coordinates of the top-left corner of the tile as an array of two numbers. The coordinates are in un-normalized map units.
The bounds of the tile as an array of four numbers that be readily converted to an Extent object.