import ViewshedLayer from "@arcgis/core/layers/ViewshedLayer.js";const ViewshedLayer = await $arcgis.import("@arcgis/core/layers/ViewshedLayer.js");- Since
- ArcGIS Maps SDK for JavaScript 4.31
The viewshed layer enables the creation and display of viewshed and view dome type of visibility analysis in a 3D SceneView.
It can be grouped with other layers, and when a LayerList widget or Layer List component is used, the viewshed layer appears in the list. It can be persisted in a WebScene.
The viewsheds can be created interactively or added programmatically to a ViewshedAnalysis object, which is then set as the layer's source.
// create analysis with viewshedconst viewshedAnalysis = new ViewshedAnalysis({ viewsheds: [ new Viewshed({ observer: new Point({ }), farDistance: 900, heading: 64, tilt: 84, horizontalFieldOfView: 85, verticalFieldOfView: 52 }) ]});
// add analysis to the layerconst viewshedLayer = new ViewshedLayer({ source: viewshedAnalysis,});
// add layer to the mapview.map.add(viewshedLayer);To start creating or editing viewsheds interactively, use the ViewshedLayerView.
// retrieve layer view for the layerconst viewshedLayerView = await view.whenLayerView(viewshedLayer);
// allow existing viewsheds in the layer to be selected and edited// select a viewshed by hovering and clicking on their field-of-view manipulatorsviewshedLayerView.interactive = true;
// start placing new viewsheds interactivelyconst abortController = new AbortController();
try { await viewshedLayerView.place({ signal: abortController.signal });} catch (error) { if (error.name === "AbortError") { console.log("Placement operation was cancelled."); }}
// cancel the placement operation at some later pointabortController.abort();Known Limitations
This layer is only supported in a 3D SceneView. The results of the tool vary depending on the zoom level, as changes in zoom level affect the level of detail (LOD) of the scene geometry.
Constructors
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| properties | | |
Example
const viewshedLayer = new ViewshedLayer();Properties
| Property | Type | Class |
|---|---|---|
declaredClass readonly inherited | ||
fullExtent readonly | | |
id inherited | ||
listMode inherited | ||
loaded readonly inherited | ||
loadError readonly inherited | ||
loadStatus readonly inherited | "not-loaded" | "loading" | "failed" | "loaded" | |
loadWarnings readonly inherited | any[] | |
opacity inherited | ||
parent inherited | Map | Basemap | Ground | GroupLayer | CatalogDynamicGroupLayer | CatalogLayer | null | undefined | |
persistenceEnabled inherited | ||
| | ||
spatialReference readonly | | |
| | ||
type readonly | "viewshed" | |
uid readonly inherited | ||
visibilityTimeExtent inherited | TimeExtent | null | undefined | |
visible inherited |
listMode
- Type
- LayerListMode
Indicates how the layer should display in the Layer List component. The possible values are listed below.
| Value | Description |
|---|---|
| show | The layer is visible in the table of contents. |
| hide | The layer is hidden in the table of contents. |
| hide-children | If the layer is a GroupLayer, BuildingSceneLayer, KMLLayer, MapImageLayer, SubtypeGroupLayer, TileLayer, or WMSLayer, hide the children layers from the table of contents. |
- Default value
- "show"
loadError
The Error object returned if an error occurred while loading.
loadStatus
- Type
- "not-loaded" | "loading" | "failed" | "loaded"
Represents the status of a load() operation.
| Value | Description |
|---|---|
| not-loaded | The object's resources have not loaded. |
| loading | The object's resources are currently loading. |
| loaded | The object's resources have loaded without errors. |
| failed | The object's resources failed to load. See loadError for more details. |
- Default value
- "not-loaded"
loadWarnings
- Type
- any[]
A list of warnings which occurred while loading.
opacity
- Type
- number
The opacity of the layer. This value can range between 1 and 0, where 0 is 100 percent
transparent and 1 is completely opaque.
Known Limitations
In a 3D SceneView, modifying opacity is not supported for DimensionLayer, GaussianSplatLayer, IntegratedMesh3DTilesLayer, IntegratedMeshLayer, LineOfSightLayer, PointCloudLayer, ViewshedLayer, and VoxelLayer.
- Default value
- 1
Example
// Makes the layer 50% transparentlayer.opacity = 0.5; parent
- Type
- Map | Basemap | Ground | GroupLayer | CatalogDynamicGroupLayer | CatalogLayer | null | undefined
The parent to which the layer belongs.
persistenceEnabled
- Type
- boolean
- Default value
- true
source
- Type
- ViewshedAnalysis
The ViewshedAnalysis associated with the layer that stores the viewsheds. Assigning a null value will create a new empty analysis.
spatialReference
- Type
- SpatialReference
The spatial reference of the layer. The spatial reference is derived from the source.
title
The title of the layer used to identify it in places such as the LayerList widget or Layer List component.
If a layer is loaded as part of a webscene, then the title of the layer as stored in the webscene will be used.
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.
visibilityTimeExtent
- Type
- TimeExtent | null | undefined
Specifies a fixed time extent during which a layer should be visible. This property can be used to configure a layer that does not have time values stored in an attribute field to work with time. Once configured, the TimeSlider widget will display the layer within the set time extent. In the case that only one of the TimeExtent.start or TimeExtent.end date values are available, the layer remains visible indefinitely in the direction where there is no time value.
Aerial imagery can capture seasonal variations in vegetation, water bodies, and land use patterns. For example, in agricultural regions, aerial imageries taken during different growing seasons provide insights into crop health and productivity. Defining a fixed time extent on imageries from specific time periods provides temporal context and facilitates focused analysis based on specific time periods or events.
visible
- Type
- boolean
Indicates if the layer is visible in the View. When false,
the layer may still be added to a Map
instance that is referenced in a view, but its features will not be visible in the view.
- Default value
- true
Example
// The layer is no longer visible in the viewlayer.visible = false;
// Watch for changes in the layer's visibility// and set the visibility of another layer when it changesreactiveUtils.watch( () => layer.visible, (visible) => { if (visible) { anotherLayer.visible = true; } else { anotherLayer.visible = false; } });Methods
| Method | Signature | Class |
|---|---|---|
fromArcGISServerUrl inherited static | fromArcGISServerUrl(params: string | FromArcGISServerUrlParameters): Promise<Layer> | |
fromPortalItem inherited static | fromPortalItem(params: LayerFromPortalItemParameters): Promise<Layer> | |
cancelLoad inherited | cancelLoad(): this | |
createLayerView inherited | createLayerView<T extends LayerView = LayerView>(view: View<T>, options?: AbortOptions): Promise<T> | |
destroy inherited | destroy(): void | |
emit inherited | emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean | |
fetchAttributionData inherited | fetchAttributionData(): Promise<any> | |
hasEventListener inherited | hasEventListener<Type extends EventNames<this>>(type: Type): boolean | |
isFulfilled inherited | isFulfilled(): boolean | |
isRejected inherited | isRejected(): boolean | |
isResolved inherited | isResolved(): boolean | |
load inherited | load(options?: AbortOptions | null | undefined): Promise<this> | |
on inherited | on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle | |
when inherited | when<TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2> |
fromArcGISServerUrl
- Signature
-
fromArcGISServerUrl (params: string | FromArcGISServerUrlParameters): Promise<Layer>
Creates a new layer instance from an ArcGIS Server URL. Depending on the URL, the returned layer type may be a BuildingSceneLayer, CatalogLayer, ElevationLayer, FeatureLayer, GroupLayer, ImageryLayer, ImageryTileLayer, IntegratedMeshLayer, KnowledgeGraphLayer, MapImageLayer, OrientedImageryLayer, PointCloudLayer, SceneLayer, StreamLayer, SubtypeGroupLayer, TileLayer, or VideoLayer.
This is useful when you work with various ArcGIS Server URLs, but you don't necessarily know which layer type(s) they create. This method creates the appropriate layer type for you. In case of a feature service or a scene service, when the URL points to the service and the service has multiple layers, the returned promise will resolve to a GroupLayer.
Beginning with version 4.17, it is possible to load tables from hosted feature services.
This only applies to feature layers, and will successfully load if FeatureLayer.isTable returns true.
The following table details what is returned when loading specific URL types.
| URL | Returns |
|---|---|
| Feature service with one layer | FeatureLayer where FeatureLayer.isTable returns false. |
| Feature service with one table | FeatureLayer where FeatureLayer.isTable returns true. |
| Feature service with more than one layer(s)/table(s) | GroupLayer with layers and tables. |
| Layers with type other than "Feature Layer" are discarded, e.g. Utility Network Layers | N/A |
- See also
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| params | Input parameters for creating the layer. | |
Examples
// This snippet shows how to add a feature layer from an ArcGIS Server URL// Get an ArcGIS Server URL from a custom functionconst arcgisUrl = getLayerUrl();
Layer.fromArcGISServerUrl({ url: arcgisUrl, properties: { // set any layer properties here popupTemplate: new PopupTemplate() }}).then(function(layer){ // add the layer to the map map.add(layer);});// This snippet shows how to add a table from an ArcGIS Server URL// Get an ArcGIS Server URL from a custom functionconst arcgisUrl = getLayerUrl();
Layer.fromArcGISServerUrl({ url: arcgisUrl}).then(function(layer){ // Load the table before it can be used layer.load().then(function() { // Check that it is the right type if (layer.isTable) { // Add table to map's tables collection map.tables.add(layer); } });}); fromPortalItem
- Signature
-
fromPortalItem (params: LayerFromPortalItemParameters): Promise<Layer>
Creates a new layer instance of the appropriate layer class from an ArcGIS Online or ArcGIS Enterprise portal item. If the item points to a feature service with multiple layers, then a GroupLayer is created. If the item points to a service with a single layer, then it resolves to a layer of the same type of class as the service.
Note
- At version 4.29, MediaLayer can be loaded from portal items.
- At version 4.28, GroupLayer and OrientedImageryLayer can be loaded from portal items.
- At version 4.25, CSVLayer and GeoJSONLayer can be loaded from CSV and GeoJSON portal items respectively.
- At version 4.17, it is possible to load tables from feature service items hosted in ArcGIS Online and ArcGIS Enterprise.
This only applies to feature layers, and will successfully load
if FeatureLayer.isTable returns
true.
The following table details what is returned when loading specific item types.
| Item(s) | Returns |
|---|---|
| Feature service with one layer | FeatureLayer where FeatureLayer.isTable returns false. |
| Feature service with one table | FeatureLayer where FeatureLayer.isTable returns true. |
| Feature service with more than one layer(s)/table(s) | GroupLayer with layers and tables. |
| Feature collection with one layer | FeatureLayer where FeatureLayer.isTable returns false. |
| Feature collection with one table | FeatureLayer where FeatureLayer.isTable returns true. |
| Feature collection with more than one layer(s)/table(s) | GroupLayer with layers and tables. |
Known Limitations
- This method does not currently work with OGCFeatureServer portal items.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| params | The parameters for loading the portal item. | |
Examples
// Create a layer from a specified portal item and add to the mapLayer.fromPortalItem({ portalItem: { // autocasts new PortalItem() id: "8444e275037549c1acab02d2626daaee" }}).then(function(layer){ // add the layer to the map map.add(layer);});// Create a table from a specified portal item and add it to the map's tables collectionLayer.fromPortalItem({ portalItem: { // autocasts new PortalItem() id: "123f4410054b43d7a0bacc1533ceb8dc" // This is a hosted table stored in a feature service }}).then(function(layer) { // Necessary to load the table in order for it to be read correctly layer.load().then(function() { // Confirm this reads as a table if (layer.isTable) { // Add the new table to the map's table collection map.tables.add(layer); } });}); cancelLoad
- Signature
-
cancelLoad (): this
Cancels a load() operation if it is already in progress.
- Returns
- this
createLayerView
- Signature
-
createLayerView <T extends LayerView = LayerView>(view: View<T>, options?: AbortOptions): Promise<T>
Called by the views, such as MapView and SceneView, when the layer is added to the Map.layers collection and a layer view must be created for it. This method is used internally and there is no use case for invoking it directly.
- See also
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| view | The parent view. | | |
| options | An object specifying additional options. See the object specification table below for the required properties of this object. | |
destroy
- Signature
-
destroy (): void
Destroys the layer and any associated resources (including its portalItem, if it is a property on the layer). The layer can no longer be used once it has been destroyed.
The destroyed layer will be removed from its parent object like Map, WebMap, WebScene, Basemap, Ground, or GroupLayer.
- Returns
- void
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.
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.
load
- Signature
-
load (options?: AbortOptions | null | undefined): Promise<this>
Loads the resources referenced by this class. This method automatically executes for a View and all of the resources it references in Map if the view is constructed with a map instance.
This method must be called by the developer when accessing a resource that will not be loaded in a View.
The load() method only triggers the loading of the resource the first time it is called. The subsequent calls return the same promise.
It's possible to provide a signal to stop being interested into a Loadable instance load status.
When the signal is aborted, the instance does not stop its loading process, only cancelLoad() can abort it.
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);}); 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});Events
| Name | Type |
|---|---|
layerview-create inherited | |
layerview-create-error inherited | |
layerview-destroy inherited |
layerview-create
layerview-create: CustomEvent<LayerLayerviewCreateEvent> Fires after the layer's LayerView is created and rendered in a view.
- See also
Example
// This function will fire each time a layer view is created for this// particular view.layer.on("layerview-create", function(event){ // The LayerView for the layer that emitted this event event.layerView;}); layerview-create-error
layerview-create-error: CustomEvent<LayerLayerviewCreateErrorEvent> Fires when an error emits during the creation of a LayerView after a layer has been added to the map.
- See also
Example
// This function fires when an error occurs during the creation of the layer's layerviewlayer.on("layerview-create-error", function(event) { console.error("LayerView failed to create for layer with the id: ", layer.id, " in this view: ", event.view);}); layerview-destroy
layerview-destroy: CustomEvent<LayerLayerviewDestroyEvent> Fires after the layer's LayerView is destroyed and no longer renders in a view.