import MediaLayerView from "@arcgis/core/views/layers/MediaLayerView.js";const MediaLayerView = await $arcgis.import("@arcgis/core/views/layers/MediaLayerView.js");- Since
- ArcGIS Maps SDK for JavaScript 4.30
Represents the LayerView of a MediaLayer after it has been added to a Map in either a MapView, Map component, SceneView or Scene component.
Keyboard shortcuts
Various keyboard shortcuts are available when enabling interactive manipulation of media elements in the layer view.
| Shortcut | Action |
|---|---|
| Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual operation, meaning you can redo/undo actions while updating a single element. |
| R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual operation, meaning you can redo/undo actions while updating a single element. |
| Shift (resize) | Enable uniform scaling when resizing an element. |
| Shift (rotate) | Enable rotation with 5 degree increments. |
| Shift+Arrow | Move an element by a single pixel. |
| Shift+Primary+Arrow | Move an element by 10 pixels. The primary key is the Cmd key on macos or Ctrl on other OS. |
| Alt | Hold to move the source point when dragging a control point in the reshape tool. |
| T | Toggle transparency of the element. |
- See also
Properties
| Property | Type | Class |
|---|---|---|
declaredClass readonly inherited | ||
| | ||
| | ||
layer readonly | | |
| | ||
spatialReferenceSupported readonly inherited | ||
suspended readonly inherited | ||
uid readonly inherited | ||
updating readonly inherited | ||
view readonly inherited | ||
visible inherited | ||
visibleAtCurrentScale readonly inherited | ||
visibleAtCurrentTimeExtent readonly inherited |
interactionOptions
Options for when the layer view is interactive.
Interactivity for 2D MapViews was added at version 4.31.
- See also
interactive
- Type
- boolean
Enables interactivity for the layer. When set to true, any elements in the
layer's MediaLayer.source become selectable and editable.
Interactivity for 2D MapViews was added at version 4.31.
- Default value
- false
Example
view.whenLayerView(mediaLayer).then((mediaLayerView) => { // Enable interactivity and select first element mediaLayerView.interactive = true;
mediaLayerView.selectedElement = mediaLayer.source.elements.at(0);}); layer
- Type
- MediaLayer
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The layer being viewed.
selectedElement
- Type
- MediaElement | null | undefined
The selected element. If interactive is true, any element in the
layer can be selected by clicking on it in the view. As long as interactive
remains true, the properties of the selected element can be edited by interacting with
manipulators in the view.
Interactivity for 2D MapViews was added at version 4.31.
- See also
Example
view.whenLayerView(mediaLayer).then((mediaLayerView) => { // Enable interactivity and select first element mediaLayerView.interactive = true;
mediaLayerView.selectedElement = mediaLayer.source.elements.at(0);}); spatialReferenceSupported
- Type
- boolean
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
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
- MapViewOrSceneView
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
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
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 |
|---|---|---|
emit inherited | emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean | |
hasEventListener inherited | hasEventListener<Type extends EventNames<this>>(type: Type): boolean | |
highlight(target: MediaElement | Iterable<MediaElement>, options?: LayerViewHighlightOptions): ResourceHandle | | |
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 | |
when inherited | when<TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2> |
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.
highlight
- Signature
-
highlight (target: MediaElement | Iterable<MediaElement>, options?: LayerViewHighlightOptions): ResourceHandle
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Highlights the given media element(s) in a MediaLayerView. Highlights are only supported in 3D SceneView or Scene component.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| target | MediaElement | Iterable<MediaElement> | The media element(s) to highlight. | |
| options | An object with the following properties. | |
- Returns
- ResourceHandle
Returns a highlight handler with a
remove()method that can be called to remove the highlight.
Example
// Add a new set of highlight options to the highlights collectionconst highlightName = "mark";view.highlights.push({ name: highlightName, color: "red", fillOpacity: 0.5 });
// Highlight a specific media elementview.whenLayerView(layer).then((layerView) => { let element = layer.source.elements.getItemAt(0); layerView.highlight(element, { name: highlightName } );}); 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);}); 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});