import GraphicsLayerView from "@arcgis/core/views/layers/GraphicsLayerView.js";const GraphicsLayerView = await $arcgis.import("@arcgis/core/views/layers/GraphicsLayerView.js");- Since
- ArcGIS Maps SDK for JavaScript 4.4
Represents the LayerView of a GraphicsLayer after it has been added to a Map in either a MapView or SceneView.
The GraphicsLayerView is responsible for rendering a GraphicsLayer's
features as graphics in the View. The interface provides the
queryGraphics() method so developers can query graphics in the view. See the method documentation below for
examples of how to access client-side graphics from the view.
- See also
Properties
| Property | Type | Class |
|---|---|---|
declaredClass readonly inherited | ||
highlightOptions deprecated | | |
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 |
highlightOptions
- Type
- HighlightOptions | null | undefined
- Since
- ArcGIS Maps SDK for JavaScript 4.26
Options for configuring the highlight. Use the FeatureLikeLayerView.highlight() method on the layer view to highlight a feature
Known Limitations
The highlightOptions on layer views are only supported in 2D MapViews. To
configure highlights for a 3D SceneView, use
SceneView.highlights instead.
Example
// Features in the layerview will be highlighted with bright// yellow colors in the map.const layerView = await view.whenLayerView(layer);layerView.highlightOptions = { color: [255, 255, 0, 1], haloOpacity: 0.9, fillOpacity: 0.2}; 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
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
- Since
- ArcGIS Maps SDK for JavaScript 4.28
A reference to the MapView or SceneView associated with the layer view.
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 |
|---|---|---|
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: Graphic | Graphic[] | ObjectId | ObjectId[], 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 | |
queryGraphics(): Promise<Collection<Graphic>> | | |
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>>
- Since
- ArcGIS Maps SDK for JavaScript 4.5
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: Graphic | Graphic[] | ObjectId | ObjectId[], options?: LayerViewHighlightOptions): ResourceHandle
Highlights the given feature(s) in a layer view using the named HighlightOptions
from the view's View.highlights collection. If no name is provided, the
feature will use the default highlight options.
Release-specific changes:
- As of version 4.32, the
highlightmethod accepts anoptionsparameter which can be used to provide a HighlightOptions.name to apply specific HighlightOptions. If nonameis provided, thedefaulthighlight options will be used. - As of version 4.23, the
highlight()method was added to ImageryLayerView.highlight(), supported only in a 2D MapView.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| target | The feature(s) to highlight. When passing a graphic or an array of graphics, each feature must have a valid | | |
| options | An object with the following properties. | |
- Returns
- ResourceHandle
Examples
// Highlight features based on a query result
// Add a new set of highlight options to the view's highlights collectionview.highlights.push({ name: "oaks", color: "forestgreen", haloOpacity: 0.8, fillOpacity: 0.3});
// A handler can be used to remove any previous highlight when applying a new onelet highlight;
// Query for particular features in a layer and then highlight them with the specified optionsview.whenLayerView(treesLayer).then((layerView) => { let query = treesLayer.createQuery(); query.where = "type = 'Quercus'";
treesLayer.queryFeatures(query).then((result) => { // Remove any previous highlight, if it exists highlight?.remove(); // Apply the "oaks" highlight options to the corresponding tree features highlight = layerView.highlight(result.features, {name: "oaks"}); });});// Use the default highlights collection to apply a highlight to features when you hover over them
// A handler can be used to remove any previous highlight when applying a new onelet hoverHighlight;
view.on("pointer-move", (event) => { // Search for the first feature in the featureLayer at the hovered location view.hitTest(event, { include: layer }).then((response) => { if (response.results[0]) { const graphic = response.results[0].graphic; view.whenLayerView(graphic.layer).then((layerView) => { // Remove any previous highlight, if it exists hoverHighlight?.remove(); // Highlight the hit features with the temporary highlight options, which are pre-configured for this use case hoverHighlight = layerView.highlight(graphic, { name: "temporary" }); }); } });}); 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);}); queryGraphics
- Signature
-
queryGraphics (): Promise<Collection<Graphic>>
- Since
- ArcGIS Maps SDK for JavaScript 4.8
Returns all graphics available for drawing in the layer view as a Collection.
- Returns
- Promise<Collection<Graphic>>
When resolved, a Collection of all graphics is returned.
Example
let layer = new GraphicsLayer();
// returns all the graphics from the layer viewconst layerView = await view.whenLayerView(layer);await reactiveUtils.whenOnce(() => !layerView.updating);const results = await layerView.queryGraphics();console.log(results); // prints the array of client-side graphics to the console when
- Signature
-
when <TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2>
- Since
- ArcGIS Maps SDK for JavaScript 4.6
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});