@arcgis/map-components
Version:
ArcGIS Map Components
894 lines (893 loc) • 68.9 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type Camera from "@arcgis/core/Camera.js";
import type Point from "@arcgis/core/geometry/Point.js";
import type SceneView from "@arcgis/core/views/SceneView.js";
import type LayerView from "@arcgis/core/views/layers/LayerView.js";
import type Layer from "@arcgis/core/layers/Layer.js";
import type Analysis from "@arcgis/core/analysis/Analysis.js";
import type Viewpoint from "@arcgis/core/Viewpoint.js";
import type SceneViewPerformanceInfo from "@arcgis/core/views/3d/support/SceneViewPerformanceInfo.js";
import type Ground from "@arcgis/core/Ground.js";
import type GamepadSettings from "@arcgis/core/views/input/gamepad/GamepadSettings.js";
import type FocusAreas from "@arcgis/core/effects/FocusAreas.js";
import type Basemap from "@arcgis/core/Basemap.js";
import type Map from "@arcgis/core/Map.js";
import type Graphic from "@arcgis/core/Graphic.js";
import type Collection from "@arcgis/core/core/Collection.js";
import type BasemapView from "@arcgis/core/views/BasemapView.js";
import type Extent from "@arcgis/core/geometry/Extent.js";
import type Constraints from "@arcgis/core/views/3d/constraints/Constraints.js";
import type Environment from "@arcgis/core/views/3d/environment/Environment.js";
import type Error from "@arcgis/core/core/Error.js";
import type GroundView from "@arcgis/core/views/GroundView.js";
import type HighlightOptions from "@arcgis/core/views/support/HighlightOptions.js";
import type Magnifier from "@arcgis/core/views/Magnifier.js";
import type Navigation from "@arcgis/core/views/navigation/Navigation.js";
import type Popup from "@arcgis/core/widgets/Popup.js";
import type SelectionManager from "@arcgis/core/views/SelectionManager.js";
import type SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
import type Theme from "@arcgis/core/views/Theme.js";
import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
import type Polygon from "@arcgis/core/geometry/Polygon.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { LoadErrorSource } from "../types.js";
import type { ArcgisPopup } from "../arcgis-popup/customElement.js";
import type { AnalysisView3DFor } from "@arcgis/core/views/3d/analysis/types.js";
import type { LayerView3DFor } from "@arcgis/core/views/3d/types.js";
import type { DoubleTapDragEvent, VerticalTwoFingerDragEvent, PointerUpEvent, PointerMoveEvent, PointerLeaveEvent, PointerEnterEvent, PointerDownEvent, ViewMouseWheelEvent, LayerViewDestroyEvent, LayerViewCreateErrorEvent, LayerViewCreateEvent, KeyUpEvent, KeyDownEvent, ImmediateDoubleClickEvent, ImmediateClickEvent, HoldEvent, DragEvent, DoubleClickEvent, ClickEvent } from "@arcgis/core/views/input/types.js";
import type { AnalysisViewDestroyEvent, AnalysisViewCreateErrorEvent, AnalysisViewCreateEvent, HitTestOptions3D, Screenshot, UserSettings, SceneViewHitTestResult, GoToOptions3D, GoToTarget3D } from "@arcgis/core/views/types.js";
import type { ScreenPoint, ScreenRect } from "@arcgis/core/core/types.js";
import type { FetchPopupFeaturesOptions, ViewPopupOpenOptions } from "@arcgis/core/views/PopupView.js";
import type { ReadonlyCollection } from "@arcgis/core/core/Collection.js";
import type { ViewPadding } from "@arcgis/core/views/ui/types.js";
import type { SlotGroupRefs } from "../../support/slots.js";
/**
* The ArcGIS Scene component is used to add 3D maps to web applications. For 2D maps, use the
* [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/).
*
* The Scene component creates a [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/)
* and loads a [WebScene](https://developers.arcgis.com/javascript/latest/references/core/WebScene/) item from either
* [ArcGIS Online](https://www.arcgis.com/home/index.html) or [ArcGIS Enterprise portal](https://doc.esri.com/en/arcgis-enterprise/latest/plan/what-is-portal-for-arcgis-.html).
*
* ```html
* <arcgis-scene item-id="e2da7564e4f24eaaa918ffd70378056a"></arcgis-scene>
* ```
*
* Alternatively, the Scene component can be initialized without a WebScene item:
*
* ```html
* <arcgis-scene
* basemap="satellite"
* ground="world-elevation"
* camera-position="12.3808, 46.3959, 4400"
* camera-tilt="75"
* camera-heading="300">
* </arcgis-scene>
* ```
*
* Further components can be added and connected to the Scene component:
*
* ```html
* <arcgis-scene item-id="e2da7564e4f24eaaa918ffd70378056a">
* <arcgis-layer-list slot="bottom-right"></arcgis-layer-list>
* </arcgis-scene>
* ```
*
* The Scene component can be customized further using any of the [core API functionalities](https://developers.arcgis.com/javascript/latest/references/core/)
* of the ArcGIS Maps SDK for JavaScript.
*
* ```js
* const viewElement = document.querySelector("arcgis-scene");
* await viewElement.viewOnReady();
* // The view is now ready to be used.
* const layer = new GraphicsLayer({ title: "My layer"});
* viewElement.map.add(layer);
* ```
*
* **See also**
*
* - [SDK sample apps using the Scene component](https://developers.arcgis.com/javascript/latest/sample-code/?tagged=arcgis-scene)
* - [Get started](https://developers.arcgis.com/javascript/latest/get-started/)
* - [Programming patterns](https://developers.arcgis.com/javascript/latest/programming-patterns/)
*
* @cssproperty [--arcgis-layout-overlay-space-top] - _Since 4.34_ Specifies the top padding for the layout.
* @cssproperty [--arcgis-layout-overlay-space-bottom] - _Since 4.34_ Specifies the bottom padding for the layout.
* @cssproperty [--arcgis-layout-overlay-space-left] - _Since 4.34_ Specifies the left padding for the layout.
* @cssproperty [--arcgis-layout-overlay-space-right] - _Since 4.34_ Specifies the right padding for the layout.
* @cssproperty [--arcgis-view-color-focus] - _Since 5.0_ Specifies the focus outline color for the view.
* @cssproperty [--arcgis-table-row-background-color] - _Since 5.1_ Specifies the background color for table rows.
* @cssproperty [--arcgis-table-row-alt-background-color] - _Since 5.1_ Specifies the background color for alternate table rows.
* @slot - Default slot for adding components to the scene. User is responsible for positioning the content via CSS.
* @slot [top-left] - Slot for components positioned in the top-left corner.
* @slot [top-right] - Slot for components positioned in the top-right corner.
* @slot [bottom-left] - Slot for components positioned in the bottom-left corner.
* @slot [bottom-right] - Slot for components positioned in the bottom-right corner.
* @slot [top-start] - Slot for components positioned at the top-start (top-left in LTR, top-right in RTL).
* @slot [top-end] - Slot for components positioned at the top-end (top-right in LTR, top-left in RTL).
* @slot [bottom-start] - Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL).
* @slot [bottom-end] - Slot for components positioned at the bottom-end (bottom-right in LTR, bottom-left in RTL).
* @slot [popup] - Slot for the [arcgis-popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) component to open automatically on click. Only the Popup component can be placed in this slot.
* @since 4.28
*/
export abstract class ArcgisScene extends LitElement {
/**
* Collection containing a flat list of all the created [LayerViews](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/)
* related to the basemap, operational layers, and group layers in this view.
*
* @see [LayerView](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/)
*/
get allLayerViews(): ReadonlyCollection<LayerView>;
/**
* Allows the view to be partially or fully transparent when composited with the webpage elements behind it.
*
* This property can only be set once at construction time. When alpha compositing is enabled, web scenes are less
* performant. It is important to set this property to `true` only when you need to apply transparency on the view.
*
* @default false
* @since 4.8
* @example
* // create a view with a fully transparent background
* let view = new SceneView({
* map: map,
* alphaCompositingEnabled: true,
* environment: {
* background: {
* type: "color",
* color: [0, 0, 0, 0]
* },
* starsEnabled: false,
* atmosphereEnabled: false
* }
* })
*/
accessor alphaCompositingEnabled: boolean;
/**
* A collection of analyses associated with the view.
*
* @example
* // Adds an analysis to the View
* view.analyses.add(lineOfSightAnalysis);
* @example
* // Removes an analysis from the View
* view.analyses.remove(lineOfSightAnalysis);
*/
accessor analyses: Collection<Analysis>;
/**
* Indicates whether animations are disabled in the view. This includes animated symbols (animated
* [CIMSymbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/CIMSymbol/),
* [PictureMarkerSymbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/PictureMarkerSymbol/)
* from a GIF/animated PNG), animated renderers
* ([FlowRenderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/FlowRenderer/)),
* animated layers ([MediaLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/),
* [VideoLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VideoLayer/)), and
* animations triggered by view navigation (for example,
* [goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#goTo)).
* Setting this property to `true` disables all animations in the view.
*
* @default false
* @since 5.0
*/
accessor animationsDisabled: boolean;
/**
* The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaLabelledByElements).
*
* @since 4.34
*/
accessor aria: SceneView["aria"];
/**
* The attribution items displayed in the view's attribution.
*
* @since 5.0
*/
get attributionItems(): SceneView["attributionItems"];
/**
* The light or dark mode used to display the attribution.
* By default, the mode is inherited from the [Calcite's mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes).
* You can override the value to style the attribution alongside the map or scene content.
*
* @since 5.0
*/
accessor attributionMode: "dark" | "light" | null | undefined;
/**
* If true, the component will not be destroyed automatically when it is
* disconnected from the document. This is useful when you want to move the
* component to a different place on the page, or temporarily hide it. If this
* is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#destroy) method when you are done to
* prevent memory leaks.
*
* @default false
*/
accessor autoDestroyDisabled: boolean;
/**
* Specifies a basemap for the map. The basemap is a set of layers that give
* geographic context to the view and the other operational layers
* in the map.
* It can either be set using a basemap ID string ([see values](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)),
* [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/)
* or [BasemapStyle](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/).
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)
*/
accessor basemap: Basemap | string | undefined;
/**
* Represents the [view for a single basemap](https://developers.arcgis.com/javascript/latest/references/core/views/BasemapView/)
* after it has been added to the map.
*/
accessor basemapView: BasemapView<LayerView>;
/**
* The [camera](https://developers.arcgis.com/javascript/latest/references/core/Camera/) allows to set the observation point from which the visible portion (or perspective)
* of the view is determined. When set in the constructor, this property overrides the [center](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#center), [extent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#extent), [scale](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#scale), [viewpoint](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#viewpoint), and [zoom](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#zoom) properties.
*
* Setting the camera immediately changes the current view. For animating the view, see this component's
* [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
*/
accessor camera: Camera;
/**
* The diagonal field of view (fov) angle for the camera. The range of angles must be between 1 and 170 degrees.
*
* Setting the camera fov immediately changes the current view. For animating the view, see this component's
* [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/Camera/#fov)
*/
accessor cameraFov: null | undefined | number;
/**
* The compass heading of the camera in degrees.
*
* Setting the camera heading immediately changes the current view. For animating the view, see this component's
* [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/Camera/#heading)
*/
accessor cameraHeading: null | undefined | number;
/**
* The position of the camera defined by a map point. It can either be set with a
* [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) instance
* or a string in the format: longitude, latitude, elevation. E.g. `"12.3808, 46.3959, 4400"`.
*
* Setting the camera position immediately changes the current view. For animating the view, see this component's
* [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/Camera/#position)
*/
accessor cameraPosition: null | undefined | number[] | Point | string;
/**
* The tilt of the camera in degrees with respect to the surface as projected down from the camera position.
*
* Setting the camera tilt immediately changes the current view. For animating the view, see this component's
* [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/Camera/#tilt)
*/
accessor cameraTilt: null | undefined | number;
/**
* Indicates if the view component can zoom in.
*
* @default false
* @since 5.0
*/
get canZoomIn(): boolean;
/**
* Indicates if the view component can zoom out.
*
* @default false
* @since 5.0
*/
get canZoomOut(): boolean;
/**
* Represents the center point of the view. It can be a string with the format `"<longitude>, <latitude>"`
* or a [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) instance.
*
* Setting the center immediately changes the current view. For animating the view, see this component's
* [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#center)
*/
get center(): SceneView["center"];
set center(value: null | undefined | number[] | SceneView["center"] | string);
/**
* Represents an optional clipping area used to define the visible [extent](https://developers.arcgis.com/javascript/latest/references/core/geometry/Extent/)
* of a Scene in `local` [viewingMode](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#viewingMode).
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#clippingArea)
*
* @see [viewingMode](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#viewingMode)
* @see [Sample - Create a local scene](https://developers.arcgis.com/javascript/latest/sample-code/scene-local/)
* @example
* let extent = view.extent.clone();
*
* // Expand the extent in place, reducing it to 50% of its original size and set it as the clippingArea
* view.clippingArea = extent.expand(0.5);
*/
accessor clippingArea: Extent | null | undefined;
/**
* Specifies constraints for the camera's tilt, altitude, and view's clip distance.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#constraints)
*
* @see [Sample - Custom background for SceneView (altitude)](https://developers.arcgis.com/javascript/latest/sample-code/sceneview-background/)
*/
accessor constraints: Constraints;
/**
* Indicates whether a layer's `displayFilter` is honored when rendering layers in the view.
* If `false`, the display filters are ignored and all features are rendered.
*
* @default false
*/
accessor displayFilterDisabled: boolean;
/**
* Specifies various properties of the environment's visualization within the view, including lighting, background, weather, and more.
* The Scene will redraw automatically when any property of environment changes.
*
* Modifying the lighting:
*
* ```js
* viewElement.environment.lighting = {
* type: "sun", // autocasts as new SunLighting()
* date: new Date(), // sets the lighting to reflect the current time of day
* directShadowsEnabled: true,
* };
* ```
*
* Setting the background:
*
* ```js
* viewElement.environment = {
* background: {
* type: "color",
* color: [255, 252, 244, 1]
* },
* starsEnabled: false,
* atmosphereEnabled: false
* };
* ```
*
* Changing the weather in the scene:
*
* ```js
* viewElement.environment.weather = {
* type: "rainy", // autocasts as new RainyWeather({ cloudCover: 0.7, precipitation: 0.3 })
* cloudCover: 0.7,
* precipitation: 0.3
* };
* ```
*
* **See also**
*
* - [SunLighting](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/SunLighting/)
* - [VirtualLighting](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/VirtualLighting/)
* - [SunnyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/SunnyWeather/)
* - [CloudyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/CloudyWeather/)
* - [RainyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/RainyWeather/)
* - [SnowyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/SnowyWeather/)
* - [FoggyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/FoggyWeather/)
* - [Sample - Daylight component](https://developers.arcgis.com/javascript/latest/sample-code/daylight/)
* - [Sample - Weather component](https://developers.arcgis.com/javascript/latest/sample-code/weather/)
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#environment)
*/
accessor environment: Environment;
/**
* The extent represents the visible portion of a [map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#map) within the view as an instance of
* [Extent](https://developers.arcgis.com/javascript/latest/references/core/geometry/Extent/).
*
* Setting the extent immediately changes the view without animation. To animate
* the view, see this component's [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
* When the view is rotated, the extent does not update to include the newly visible portions of the map.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#extent)
*/
accessor extent: SceneView["extent"];
/**
* A rejected view indicates a fatal [error](https://developers.arcgis.com/javascript/latest/references/core/core/Error/)
* making it unable to display.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#fatalError)
*
* @since 4.12
* @see [tryFatalErrorRecovery()](https://developers.arcgis.com/javascript/latest/references/core/views/View/#tryFatalErrorRecovery)
* @example
* reactiveUtils.when(
* () => view.fatalError,
* () => {
* console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
* view.tryFatalErrorRecovery();
* }
* );
*/
accessor fatalError: Error<any> | null | undefined;
/**
* Applies a display filter on the view for a specific set of floor levels.
* It can filter the map display on floor-aware layers by zero or more level IDs.
*
* @since 4.19
*/
accessor floors: Collection<string>;
/**
* A container of all focus areas present in the map.
*
* @since 4.33
*/
accessor focusAreas: FocusAreas;
/** Gamepad input specific configuration settings. */
get gamepad(): GamepadSettings;
/**
* Allows for adding graphics directly to the default graphics in the view.
*
* @example
* ```js
* // Adds a graphic to the View
* graphics.add(pointGraphic);
* // Removes a graphic from the View
* graphics.remove(pointGraphic);
* ```
* @see [Graphic](https://developers.arcgis.com/javascript/latest/references/core/Graphic/)
* @see [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/)
* @see [Intro to graphics](https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/)
*/
accessor graphics: Collection<Graphic>;
/**
* Specifies the surface properties for the [map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#map). It can be either a [Ground](https://developers.arcgis.com/javascript/latest/references/core/Ground/)
* instance or a string with one of the following values:
* * `"world-elevation"`
* * `"world-topobathymetry"`
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/Map/#ground)
*
* @see [ElevationLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ElevationLayer/)
* @see [Ground](https://developers.arcgis.com/javascript/latest/references/core/Ground/)
* @example
* // Use the world elevation service
* const map = new Map({
* basemap: "topo-vector",
* ground: "world-elevation"
* });
* @example
* // Create a map with the world elevation layer overlaid by a custom elevation layer
* const worldElevation = new ElevationLayer({
* url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
* });
* const customElevation = new ElevationLayer({
* url: "https://my.server.com/arcgis/rest/service/MyElevationService/ImageServer"
* });
* const map = new Map({
* basemap: "topo-vector",
* ground: new Ground({
* layers: [ worldElevation, customElevation ]
* })
* });
*/
get ground(): Ground;
set ground(value: Ground | string);
/**
* The view for the ground of the map.
*
* @since 4.7
*/
get groundView(): GroundView;
/**
* Indicates whether the attribution is hidden in the view.
*
* Esri requires that when you use an ArcGIS Online basemap in your app, the map must include Esri attribution and you must be licensed to use the content.
* For detailed guidelines on working with attribution, please visit the official [attribution in your app](https://developers.arcgis.com/terms/attribution/) documentation.
* For information on terms of use, see the [Terms of Use FAQ](https://developers.arcgis.com/terms/faq/).
*
* @default false
* @since 5.0
*/
accessor hideAttribution: boolean;
/**
* Represents a collection of [HighlightOptions](https://developers.arcgis.com/javascript/latest/references/core/views/support/HighlightOptions/) objects which can be used to
* highlight features throughout an application. Highlighting works by applying highlight options to one or
* more features. You can configure these options (such as color or opacity) to define how a feature will be visually
* emphasized.
*
* A maximum of six [HighlightOptions](https://developers.arcgis.com/javascript/latest/references/core/views/support/HighlightOptions/) objects are supported in the collection, and
* they can be added, removed, and reordered freely. Their order in the collection determines priority, with the last
* object having the highest priority. If you apply more than one highlight to a feature, the one that is last within
* the collection will be applied. The [HighlightOptions](https://developers.arcgis.com/javascript/latest/references/core/views/support/HighlightOptions/) object must be part of this
* collection in order to be applied to features.
*
* To highlight a feature, use the [highlight](https://developers.arcgis.com/javascript/latest/references/core/views/layers/FeatureLayerView/#highlight) method on
* the relevant [LayerView](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/) instance. To apply specific
* [HighlightOptions](https://developers.arcgis.com/javascript/latest/references/core/views/support/HighlightOptions/), include the
* [name](https://developers.arcgis.com/javascript/latest/references/core/views/support/HighlightOptions/#name) in the `highlight()` method's `options` parameter. If
* no `name` is provided, the feature will use the `default` highlight options.
*
* The table below shows the default 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, shadowColor: "black", shadowOpacity: 0.4, shadowDifference: 0.2 }` |
*
* @since 4.32
* @see [Sample: Highlight features by geometry](https://developers.arcgis.com/javascript/latest/sample-code/highlight-features-by-geometry/)
* @see [Sample: Highlight SceneLayer](https://developers.arcgis.com/javascript/latest/sample-code/highlight-scenelayer/)
* @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 the first feature in the featureLayer at the hovered location
* view.hitTest(event, { include: featureLayer }).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"});
* });
* }
* });
* });
* @example
* // Override the default highlights collection
*
* const view = new MapView({
* map: map,
* container: "viewDiv",
*
* // Set the highlight options to be used in the view
* highlights: [
* { name: "default", color: "orange" },
* { name: "temporary", color: "magenta" },
* { name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
* ]
* });
* @example
* // Add highlight options to the collection after initialization
*
* const selectionHighlightOptions = {
* name: "selection",
* color: "#ff00ff", // bright fuchsia
* haloOpacity: 0.8,
* fillOpacity: 0.2
* };
*
* // Add the options to the highlights collection at the first position
* view.highlights.add(selectionGroup, 0);
*/
accessor highlights: Collection<HighlightOptions>;
/**
* Indication whether the view is being interacted with (for example when panning or by an interactive tool).
*
* @default false
*/
get interacting(): boolean;
/**
* The ID of a [WebScene](https://developers.arcgis.com/javascript/latest/references/core/WebScene/) item from either
* [ArcGIS Online](https://www.arcgis.com/home/index.html) or [ArcGIS Enterprise portal](https://doc.esri.com/en/arcgis-enterprise/latest/plan/what-is-portal-for-arcgis-.html).
*
* To configure the portal url you must set the [config.portalUrl](https://developers.arcgis.com/javascript/latest/references/core/config/#portalUrl) property before the Scene component loads.
*/
accessor itemId: null | undefined | string;
/**
* A collection containing a hierarchical list of all the created
* [LayerViews](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/) of the
* [operational layers](https://developers.arcgis.com/javascript/latest/references/core/Map/#layers) in the [map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#map).
*
* @see [LayerView](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/)
*/
get layerViews(): Collection<LayerView>;
/**
* An array of objects that encountered an error while loading the component or any of its dependencies (e.g., basemap, ground, layers, tables). You may inspect the errors by accessing each object's `loadError` property.
*
* @since 4.34
*/
accessor loadErrorSources: LoadErrorSource[] | undefined;
/**
* The magnifier allows for showing a portion of the view as a magnifier image on top of the view.
*
* @since 4.19
*/
get magnifier(): Magnifier;
/** An instance of a [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) object to display in the view. */
accessor map: Map | null | undefined;
/**
* Indication whether the view is being navigated (for example when panning).
*
* @default false
*/
get navigating(): boolean;
/**
* Options to configure the navigation behavior of the view.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#navigation)
*
* @since 4.9
* @example
* // Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
* const view = new MapView({
* container: "viewDiv",
* map: new Map({
* basemap: "satellite"
* }),
* center: [176.185, -37.643],
* zoom: 13,
* navigation: {
* gamepad: {
* enabled: false
* },
* actionMap: {
* dragSecondary: "none", // Disable rotating the view with the right mouse button
* mouseWheel: "none" // Disable zooming with the mouse wheel
* },
* browserTouchPanEnabled: false,
* momentumEnabled: false,
* }
* });
*/
accessor navigation: Navigation;
/**
* Use the padding property to make the [center](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#center),
* and [extent](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#extent),
* etc. work off a subsection of the full view.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#padding)
*
* @default {left: 0, top: 0, right: 0, bottom: 0}
*/
accessor padding: ViewPadding;
/**
* This property contains performance information of the view, e.g. global memory usage and additional
* details for layers about memory consumption and number of features.
*/
get performanceInfo(): SceneViewPerformanceInfo;
/**
* A [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) widget object that displays general content or attributes from [layers](https://developers.arcgis.com/javascript/latest/references/core/Map/#layers) in the [map](https://developers.arcgis.com/javascript/latest/references/core/views/View/#map). Consider using the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupElement) (beta), which represents the Popup component, instead.
*
* By default, the `popup` property is an empty object that allows you to set the popup options. A [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) instance is automatically created and assigned to the view's [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popup) when the user clicks on the view and [popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/views/PopupView/#popupEnabled) is `true`, when the [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#openPopup) method is called, or when some widgets need the popup, such as [Search](https://developers.arcgis.com/javascript/latest/references/core/widgets/Search/). If [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popup) is `null`, the popup instance will not be created.
*
* @see [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupElement)
* @see [popupDisabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupDisabled)
* @see [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#openPopup)
*/
accessor popup: Popup | null | undefined;
/**
* Indicates whether the [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupElement) (beta) is enabled as the default popup. When set to `true`, the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupElement) property (representing the component) will be used for popups instead of the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popup) property (representing the widget).
*
* **Note:** This is a beta feature and may change in future releases. At version 6.0, the Popup component will be used by default instead of the Popup widget and the `popup-component-enabled` attribute will no longer be necessary.
*
* @default false
* @beta
* @since 5.0
* @see [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupElement)
* @example
* ```html
* <arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>
* ```
*/
accessor popupComponentEnabled: boolean;
/**
* Controls whether the default popup opens automatically when users click on the view. This controls both the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupElement) and [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popup) properties. When set to `true`, the popup will not open on click or when triggered programmatically.
*
* @default false
* @see [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#openPopup)
*/
accessor popupDisabled: boolean;
/**
* A reference to the current [arcgis-popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) (beta). The [popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupComponentEnabled) property must be set to `true` to use this property.
*
* **Note:** This is a beta feature and may change in future releases.
*
* @beta
* @since 5.0
* @see [popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupComponentEnabled)
* @example
* ```html
* <arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>
* <script type="module">
* const viewElement = document.querySelector("arcgis-map");
* await viewElement.viewOnReady();
* viewElement.popupElement.dockEnabled = true;
* viewElement.popupElement.dockOptions = {
* buttonEnabled: false,
* breakpoint: false,
* position: "top-right",
* };
* </script>
* ```
*/
get popupElement(): ArcgisPopup | null;
/**
* Scenes can be drawn in three different quality modes: `high`, `medium` and `low`.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#qualityProfile)
*
* @example
* let view = new SceneView({
* qualityProfile: "high"
* });
*/
accessor qualityProfile: "medium" | "low" | "high";
/**
* When `true`, this property indicates whether the view successfully satisfied all dependencies,
* signaling that the necessary conditions are met.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#ready)
*
* @default false
* @see [when()](https://developers.arcgis.com/javascript/latest/references/core/views/View/#when)
*/
get ready(): boolean;
/**
* Represents the current value of one pixel in the unit of the view's
* [spatialReference](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#spatialReference).
* The resolution is calculated by dividing the Scene component's [extent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#extent) [width](https://developers.arcgis.com/javascript/latest/references/core/geometry/Extent/#width)
* by its width.
*/
get resolution(): number;
/**
* Represents the map scale at the center of the view.
*
* Setting the scale immediately changes the view. For animating
* the view, see this component's [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#scale)
*/
accessor scale: number;
/**
* The default [SelectionManager](https://developers.arcgis.com/javascript/latest/references/core/views/SelectionManager/) for this view. Used to manage selections of features across layers.
*
* @since 5.0
* @beta
*/
get selectionManager(): SelectionManager;
/** @internal */
get slotGroupRefs(): SlotGroupRefs;
/**
* The [spatial reference](https://developers.arcgis.com/javascript/latest/references/core/geometry/SpatialReference/) of the view.
* This indicates the projected or geographic coordinate system used
* to locate geographic features in the map. In a Scene, the following [coordinate systems](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#supported-coordinate-systems) are available.
*
* The spatial reference can either be set explicitly or automatically derived from the following:
*
* * If the [map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#map) is a [WebScene](https://developers.arcgis.com/javascript/latest/references/core/WebScene/) instance,
* the [WebScene.initialViewProperties.spatialReference](https://developers.arcgis.com/javascript/latest/references/core/webscene/InitialViewProperties/#spatialReference) is used.
* * Otherwise, the spatial reference is derived from the first layer that loads in this order:
* * [map.basemap.baseLayer](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)
* * [Map.layers](https://developers.arcgis.com/javascript/latest/references/core/Map/#layers)
* * [map.ground.layers](https://developers.arcgis.com/javascript/latest/references/core/Ground/#layers)
*
* **Notes**
*
* * In case the spatial reference is determined from the map layers or the ground layers and they are in WGS84 or Web Mercator, the following rule also applies: the first layer that does not support server side reprojection (tiled layers) determines the spatial reference of the view and all the other layers are reprojected.
* * If no spatial reference can be derived, then the view does not resolve and the [ready](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#ready) property is false.
* * Prior to changing the spatial reference, check if the [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/)
* is loaded by calling [projectOperator.isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded) method.
* If it is not yet loaded, call [projectOperator.load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) method.
*
* @example
* ```js
* const viewElement = document.querySelector("arcgis-scene");
* // Check if the projectOperator is loaded
* if (!projectOperator.isLoaded()) {
* await projectOperator.load();
* }
* // Change the spatial reference of the scene component to GCS2000
* viewElement.spatialReference = new SpatialReference({
* wkid: 4490 //GCS2000
* });
* ```
*/
accessor spatialReference: SpatialReference;
/**
* Indication whether the view is animating, being navigated with or resizing.
*
* @default false
*/
get stationary(): boolean;
/**
* Indicates if the view is visible on the page.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#suspended)
*
* @default false
*/
get suspended(): boolean;
/**
* This property specifies the base colors used by some components to render graphics and labels.
* This only affects those elements that would otherwise use the default orange pattern.
*
* @since 4.28
* @see [Theme](https://developers.arcgis.com/javascript/latest/references/core/views/Theme/)
* @see [Sample - Color theming for interactive tools](https://developers.arcgis.com/javascript/latest/sample-code/view-theme/)
* @example
* // Update the theme to use purple graphics
* // and slightly transparent green text
* view.theme = new Theme({
* accentColor: "purple",
* textColor: [125, 255, 13, 0.9]
* });
*/
accessor theme: Theme | null | undefined;
/**
* The view's time extent. Time-aware layers display their temporal data that falls within
* the view's time extent. Setting the view's time extent is similar to setting the spatial
* extent because once the time extent is set, the
* view updates automatically to conform to the change.
*
* @since 4.12
* @example
* // Create a csv layer from an online spreadsheet.
* let csvLayer = new CSVLayer({
* url: "http://test.com/daily-magazines-sold-in-new-york.csv",
* timeInfo: {
* startField: "SaleDate" // The csv field contains date information.
* }
* });
*
* // Create a mapview showing sales for the last week of March 2019 only.
* const view = new MapView({
* map: map,
* container: "viewDiv",
* timeExtent: {
* start: new Date("2019, 2, 24"),
* end: new Date("2019, 2, 31")
* }
* });
*/
accessor timeExtent: TimeExtent | null | undefined;
/**
* Indicates whether the view is being updated by additional data requests to the network,
* or by processing received data.
*
* @default false
*/
get updating(): boolean;
/** The [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/) instance created and managed by the component. Accessible once the component is fully loaded. */
get view(): SceneView;
/**
* The viewing mode sets whether the view renders the earth as a sphere (global mode) or on a flat plane (local mode).
*
* Note that the viewing mode must be set before the Scene component loads.
* Depending on the viewing mode different [supported coordinate systems](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#supported-coordinate-systems) are available.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#viewingMode)
*
* @default "global"
* @see [clippingArea](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#clippingArea)
* @see [Sample - Create a local scene](https://developers.arcgis.com/javascript/latest/sample-code/scene-local/)
*/
accessor viewingMode: "global" | "local";
/**
* Represents the current view as a [Viewpoint](https://developers.arcgis.com/javascript/latest/references/core/Viewpoint/)
* or point of observation on the view.
*
* Setting the viewpoint immediately changes the current view. For animating
* the view, see this component's [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#viewpoint)
*/
accessor viewpoint: Viewpoint;
/**
* The visibleArea represents the visible portion of a [map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#map) within the view as an instance of a
* [Polygon](https://developers.arcgis.com/javascript/latest/references/core/geometry/Polygon/).
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#visibleArea)
*
* @since 4.31
* @see [Sample: SceneView - visibleArea](https://developers.arcgis.com/javascript/latest/sample-code/sceneview-visible-area/)
* @see [extent](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#extent)
*/
get visibleArea(): Polygon | null | undefined;
/**
* Represents the level of detail (LOD) at the center of the view.
*
* Setting the zoom immediately changes the current view. For animating the view, see this component's [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) method.
* Setting this property in conjunction with [center](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#center)
* is a convenient way to set the initial extent of the view.
*
* [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#zoom)
*/
accessor zoom: number;
/** Closes the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popup). */
closePopup(): Promise<void>;
/**
* Destroys the Scene component, and any associated resources, including its [map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#map), [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popup),
* and removes components or other UI DOM ele