import HighlightOptions from "@arcgis/core/views/support/HighlightOptions.js";
const HighlightOptions = await $arcgis.import("@arcgis/core/views/support/HighlightOptions.js");
@arcgis/core/views/support/HighlightOptions
HighlightOptions are used to customize the appearance of highlights applied to features. You can configure various options (such as color or opacity) to define how a feature will be visually emphasized when highlighted using those options.
To be used in an application, highlight options first need to be added to the View's
highlights collection. You can then use the highlight() method on the
appropriate LayerView to apply the options to one or more features. If the
highlight() method is called without passing specific options, the default options will be used. These are the
options which have the name property set to "default". A
pre-configured set of default options is provided for ease of use, but you can also define your own.
The table below shows the pre-configured highlight options in the View's highlights collection if the collection has not been modified.
| Highlight options name | Description | Default settings |
|---|---|---|
| default | The default highlight options. Used when layerView.highlight() is called without specifying any particular highlight options. |
{ name: "default", color: "cyan", haloOpacity: 1, fillOpacity: 0.25, shadowColor: "black", shadowOpacity: 0.4, shadowDifference: 0.2} |
| temporary | The temporary highlight options, pre-configured for common use cases such as hovering over a feature in the view. | { name: "temporary", color: "yellow", haloOpacity: 1, fillOpacity: 0.25} |
In a 3D SceneView, highlighting a feature with the default options also
influences the feature's shadow. You can customize the shadow options or use the pre-configured ones, which will
display the shadow in a darker shade. Shadow options are only supported on the default highlight options; setting
them on other highlights has no effect.
- See also
// Override the default highlights collection
const view = new MapView({
map: map,
// Set the highlight options to be used in the view
highlights: [
{ name: "default", color: "orange" },
{ name: "temporary", color: "magenta" },
{ name: "oaks", color: "forestgreen", haloOpacity: 0.8, fillOpacity: 0.3 }
]
});
// Highlight features based on a query result
// A handler can be used to remove any previous highlight when applying a new one
let highlight;
// Query for particualar features in a layer and then highlight them with the specified options
view.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 user-defined "oaks" highlight options to the corresponding tree features
highlight = layerView.highlight(result.features, {name: "oaks"});
});
});
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 color of the highlight fill. | HighlightOptions | ||
The name of the class. | Accessor | ||
The opacity of the fill (area within the halo). | HighlightOptions | ||
The color of the halo surrounding the highlight. | HighlightOptions | ||
The opacity of the highlight halo. | HighlightOptions | ||
A name used to uniquely identify the highlight options within the view's highlights collection. | HighlightOptions | ||
The color of the highlighted feature's shadow in a 3D SceneView. | HighlightOptions | ||
Defines the intensity of the shadow area obtained by overlapping the shadow of the highlighted feature and the shadow of other objects in a 3D SceneView. | HighlightOptions | ||
The opacity of the highlighted feature's shadow in a 3D SceneView. | HighlightOptions |
Property Details
-
fillOpacity
PropertyfillOpacity Number -
The opacity of the fill (area within the halo). This will be multiplied with the opacity specified in
color.- Default Value:0.25
-
The color of the halo surrounding the highlight.
-
haloOpacity
PropertyhaloOpacity Number -
The opacity of the highlight halo. This will be multiplied with any opacity specified in
color.- Default Value:1
-
name
Propertyname String -
A name used to uniquely identify the highlight options within the view's highlights collection. To apply a specific set of highlight options, include this name in the second parameter of a LayerView's
highlight()method. If no name is specified, it will default todefault.- See also
Example// 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 one let hoverHighlight; view.on("pointer-move", (event) => { // Search for features in the featureLayer at the hovered location view.hitTest(event, { include: featureLayer }).then((response) => { if (response.results.length) { const features = response.results.map(result => result.graphic); // 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(features, {name: "temporary"}); } }).catch((error) => { console.error("Error during hitTest:", error); });
-
The color of the highlighted feature's shadow in a 3D SceneView.
Known Limitation
Shadow options are only supported on the
defaulthighlight options. Setting them on other highlights has no effect.- Default Value:#000000
-
shadowDifference
PropertyshadowDifference Number -
Defines the intensity of the shadow area obtained by overlapping the shadow of the highlighted feature and the shadow of other objects in a 3D SceneView. The value ranges from
0to1. A value of0highlights the overlapping shadow areas in the same way (no difference). Setting it to1highlights only the difference between the shadow areas, so the overlapping shadow areas aren't highlighted at all. Here is an example of what the shadow highlight looks like with different values:
Known Limitation
Shadow options are only supported on the
defaulthighlight options. Setting them on other highlights has no effect.- Default Value:0.2
Examples// SceneView highlights with shadow settings configured const view = new SceneView({ map: map, highlights: [ { name: "oaks" color: "forestgreen", haloColor: "green", haloOpacity: 0.9, fillOpacity: 0.2, shadowColor: "goldenrod", shadowOpacity: 0.5 } ] });// A handler can be used to remove any previous highlight when applying a new one let highlight; // Query for particualar features in a layer and then highlight them with the specified options view.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 user-defined "oaks" highlight options to the corresponding tree features highlight = layerView.highlight(result.features, {name: "oaks"}); }); });
-
shadowOpacity
PropertyshadowOpacity Number -
The opacity of the highlighted feature's shadow in a 3D SceneView. This will be multiplied with the opacity specified in
shadowColor.Known Limitation
Shadow options are only supported on the
defaulthighlight options. Setting them on other highlights has no effect.- Default Value:0.4
Method Overview
| Name | Return Type | Summary | Class |
|---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. | Accessor | ||
Returns true if a named group of handles exist. | Accessor | ||
Removes a group of handles owned by the object. | Accessor |
Method Details
-
Inherited from Accessor
-
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.
-
hasHandles
InheritedMethodhasHandles(groupKey){Boolean}Inherited from Accessor -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType Description Boolean Returns trueif 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"); }
-
Inherited from Accessor
-
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");