import BaseLayerView2D from "@arcgis/core/views/2d/layers/BaseLayerView2D.js";const BaseLayerView2D = await $arcgis.import("@arcgis/core/views/2d/layers/BaseLayerView2D.js");- Since
- ArcGIS Maps SDK for JavaScript 4.8
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.
Example
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
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| properties | | |
Properties
| Property | Type | Class |
|---|---|---|
declaredClass readonly inherited | ||
layer readonly | | |
spatialReferenceSupported readonly inherited | ||
suspended readonly inherited | ||
Tile[] | | |
uid readonly inherited | ||
updating readonly inherited | ||
view readonly | | |
visible inherited | ||
visibleAtCurrentScale readonly inherited | ||
visibleAtCurrentTimeExtent readonly inherited |
spatialReferenceSupported
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.23
Indicates if the spatialReference of the MapView or
Map component is supported by the layer view.
When false layer view will be suspended.
Known Limitations
This property is not supported for layer views of a 3D SceneView or Scene component.
- See also
tiles
- Type
- Tile[]
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
uid
- Type
- string
- Since
- ArcGIS Maps SDK for JavaScript 4.33
An automatically generated unique identifier assigned to the instance. The unique id is generated each time the application is loaded.
updating
- Type
- boolean
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 FeatureLayerView.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); view
- Type
- MapView
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); visibleAtCurrentScale
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.30
When true, the layer is visible in the view at the current scale. This applies to layers that have minScale and maxScale properties set.
Known Limitations
This property isn’t supported for tiled layers in 3D SceneView or in the Scene component
- Default value
- true
visibleAtCurrentTimeExtent
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.30
When true, the layer is visible in the view's View.timeExtent. This applies to layers that have a Layer.visibilityTimeExtent.
- See also
- Default value
- true
Methods
| Method | Signature | Class |
|---|---|---|
attach(): void | | |
detach(): void | | |
emit inherited | emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean | |
hasEventListener inherited | hasEventListener<Type extends EventNames<this>>(type: Type): boolean | |
hitTest(mapPoint: Point, screenPoint: ScreenPoint): Promise<ViewHit[] | null | undefined> | | |
isFulfilled inherited | isFulfilled(): boolean | |
isRejected inherited | isRejected(): boolean | |
isResolved inherited | isResolved(): boolean | |
on inherited | on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle | |
render(renderParameters: RenderParameters): void | | |
requestRender(): void | | |
tilesChanged(added: Tile[], removed: Tile[]): void | | |
when inherited | when<TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2> |
attach
- Signature
-
attach (): void
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
- Returns
- void
Example
attach() { this._propertyHandle = reactiveUtils.watch( () => this.layer.opacity, () => this.requestRender() );} detach
- Signature
-
detach (): void
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
- Returns
- void
Example
// remove the watchers on the layer that are added in attach()detach() { this._propertyHandle.remove(); this._propertyHandle = null;} emit
- Signature
-
emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean
- Type parameters
- <Type extends EventNames<this>>
Emits an event on the instance. This method should only be used when creating subclasses of this class.
hasEventListener
- Signature
-
hasEventListener <Type extends EventNames<this>>(type: Type): boolean
- Type parameters
- <Type extends EventNames<this>>
Indicates whether there is an event listener on the instance that matches the provided event name.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| type | Type | The name of the event. | |
- Returns
- boolean
Returns true if the class supports the input event.
hitTest
- Signature
-
hitTest (mapPoint: Point, screenPoint: ScreenPoint): Promise<ViewHit[] | null | undefined>
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 MapView.hitTest() method is called.
isFulfilled
- Signature
-
isFulfilled (): boolean
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.
- Returns
- boolean
Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).
isRejected
- Signature
-
isRejected (): boolean
isRejected() may be used to verify if creating an instance of the class is rejected.
If it is rejected, true will be returned.
- Returns
- boolean
Indicates whether creating an instance of the class has been rejected.
isResolved
- Signature
-
isResolved (): boolean
isResolved() may be used to verify if creating an instance of the class is resolved.
If it is resolved, true will be returned.
- Returns
- boolean
Indicates whether creating an instance of the class has been resolved.
on
- Signature
-
on <Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle
- Type parameters
- <Type extends EventNames<this>>
Registers an event handler on the instance. Call this method to hook an event with a listener.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| type | Type | An event or an array of events to listen for. | |
| listener | EventedCallback<this["@eventTypes"][Type]> | The function to call when the event fires. | |
- Returns
- ResourceHandle
Returns an event handler with a
remove()method that should be called to stop listening for the event(s).Property Type Description remove Function When called, removes the listener from the event.
Example
view.on("click", function(event){ // event is the event handle returned after the event fires. console.log(event.mapPoint);}); render
- Signature
-
render (renderParameters: RenderParameters): void
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.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| renderParameters | | |
- Returns
- void
Example
// Example of a render implementation that draws tile boundariesrender(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"; }} requestRender
- Signature
-
requestRender (): void
The LayerView can call this method to ask the MapView to schedule a new rendering frame.
- Returns
- void
Example
// Call requestRender whenever the layer opacity has changed.attach() { this._propertyHandle = reactiveUtils.watch( () => this.layer.opacity, () => this.requestRender() );} when
- Signature
-
when <TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2>
when() may be leveraged once an instance of the class is created. This method takes two input parameters: an onFulfilled function and an onRejected function.
The onFulfilled executes when the instance of the class loads. The
onRejected executes if the instance of the class fails to load.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| onFulfilled | OnFulfilledCallback<this, TResult1> | null | undefined | The function to call when the promise resolves. | |
| onRejected | The function to execute when the promise fails. | |
- Returns
- Promise<TResult1 | TResult2>
Returns a new promise for the result of
onFulfilledthat 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 waylet 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
Tile
Represents a tile reference.
world
- Type
- number
When the projection allows world wrapping (e.g. Web Mercator), identifies the instance of the world this tile's level/row/col.