UNPKG

@arcgis/core

Version:

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

818 lines (816 loc) • 58 kB
import type Layer from "../layers/Layer.js"; import type Viewpoint from "../Viewpoint.js"; import type Analysis from "../analysis/Analysis.js"; import type ElevationProfileAnalysis from "../analysis/ElevationProfileAnalysis.js"; import type Collection from "../core/Collection.js"; import type Extent from "../geometry/Extent.js"; import type Point from "../geometry/Point.js"; import type Polygon from "../geometry/Polygon.js"; import type SpatialReference from "../geometry/SpatialReference.js"; import type TileInfo from "../layers/support/TileInfo.js"; import type View from "./View.js"; import type ViewAnimation from "./ViewAnimation.js"; import type MapViewConstraints from "./2d/MapViewConstraints.js"; import type ElevationProfileAnalysisView2D from "./2d/analysis/ElevationProfileAnalysisView2D.js"; import type LayerView from "./layers/LayerView.js"; import type ColorBackground from "../webmap/background/ColorBackground.js"; import type { ViewpointProperties } from "../Viewpoint.js"; import type { ReadonlyArrayOrCollection } from "../core/Collection.js"; import type { ScreenPoint } from "../core/types.js"; import type { ExtentProperties } from "../geometry/Extent.js"; import type { SpatialReferenceProperties } from "../geometry/SpatialReference.js"; import type { TimeZone } from "../time/types.js"; import type { BreakpointsOwner, BreakpointsOwnerProperties } from "./BreakpointsOwner.js"; import type { DOMContainer, DOMContainerProperties } from "./DOMContainer.js"; import type { PopupView, PopupViewProperties } from "./PopupView.js"; import type { GoToOptions2D, GoToTarget2D, ToScreenOptions2D } from "./types.js"; import type { Viewport2DMixin } from "./Viewport2DMixin.js"; import type { MapViewConstraintsProperties } from "./2d/MapViewConstraints.js"; import type { LayerView2DFor, ResizeAlign } from "./2d/types.js"; import type { AnalysisView2DUnion } from "./2d/analysis/types.js"; import type { ColorBackgroundProperties } from "../webmap/background/ColorBackground.js"; import type { PointProperties } from "../geometry/Point.js"; import type { ViewProperties } from "./View.js"; export interface View2DProperties extends ViewProperties, DOMContainerProperties, PopupViewProperties, BreakpointsOwnerProperties, Partial<Pick<View2D, "resizeAlign" | "rotation" | "scale" | "spatialReferenceLocked" | "timeZone" | "zoom">> { /** * A collection of analyses associated with the view. * * @since 4.34 * @example * // Adds an analysis to the View * view.analyses.add(elevationProfileAnalysis); * @example * // Removes an analysis from the View * view.analyses.remove(elevationProfileAnalysis); */ analyses?: ReadonlyArrayOrCollection<Analysis>; /** * Represents an ongoing view animation initialized by [goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#goTo). * You may [watch()](https://developers.arcgis.com/javascript/latest/references/core/core/reactiveUtils/#watch) this property to be notified of the animation's state. * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) * @example * reactiveUtils.watch( * () => view.animation, * (response) => { * if(response?.state === "running"){ * console.log("Animation in progress"); * } else{ * console.log("No animation"); * } * } * ); * @see [View2D.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#goTo) */ animation?: ViewAnimation | null; /** * The background color of the view. If the view's [map](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#map) changes, the view's `background` is reset to the map's background, * even if the user set it previously. * * @example * let view = new MapView({ * container: "viewDiv", * map: map, * background: { // autocasts new ColorBackground() * color: "magenta" // autocasts as new Color() * } * }); */ background?: ColorBackgroundProperties | null; /** * Represents the view's center point; when setting the center, you may pass a * [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) instance or an array of numbers representing * a longitude/latitude pair (`[-100.4593, 36.9014]`). * Setting the center immediately changes the current view. For animating * the view, see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo). * * The returned [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) object is always in the spatial reference of the view and may be modified internally. * To persist the returned object, create a clone using [Point.clone()](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/#clone). * * > [!WARNING] * > * > **Notes** * > * > - If the spatial reference of `center` set in the constructor does not match the * > [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) of the view, then [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) will be loaded dynamically. * > - At runtime, the [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) must be [loaded](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) when * > setting the `center` to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is * > loaded prior to setting the center by calling [isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded). If it is not yet loaded, * > you can call [load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load). * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) * @example * // Sets the initial center point of the view to lon/lat coordinates * // lon/lat will be projected to match the spatial reference of the view * let view = new MapView({ * center: [-112, 38] * }); * @example * // Updates the view's center point to a pre-determined Point object * let pt = new Point({ * x: 12804.24, * y: -1894032.09, * spatialReference: { * wkid: view.spatialReference // wkid 2027 * } * }); * view.center = pt; * @example * const centerPoint = new Point({ * x: -8746995, * y: 4352308, * spatialReference: { * wkid: 8857 * } * }); * if (!projectOperator.isLoaded()) { * await projectOperator.load(); * } * view.center = centerPoint; */ center?: PointProperties | [ number, number ]; /** * Specifies constraints to [scale](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#scale), [zoom](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#zoom), and [rotation](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#rotation) that may be applied to the MapView. * The `constraints.lods` should be set in the MapView constructor, if the map does not have a [basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap) or when the basemap does not have [TileInfo](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/). * * * @example * view.constraints = { * geometry: { // Constrain lateral movement to Lower Manhattan * type: "extent", * xmin: -74.020, * ymin: 40.700, * xmax: -73.971, * ymax: 40.73 * }, * minScale: 500000, // User cannot zoom out beyond a scale of 1:500,000 * maxScale: 0, // User can overzoom tiles * rotationEnabled: false // Disables map rotation * @example * // This snippet shows how to set the MapView scale 1:1 while generating additional LODs for the MapView.constraints. * const spatialReference = new SpatialReference({ * wkid: 2154 * }); * const center = new Point({ * x: 0, * y: 0, * spatialReference * }); * * // Create LODs from level 0 to 31 * const tileInfo = TileInfo.create({ * spatialReference, * numLODs: 32 * }); * const lods = tileInfo.lods; * * let view = new MapView({ * container: "viewDiv", * map, * scale: 1, * center, * spatialReference, * constraints: { * lods: lods, * snapToZoom: false * } * }); * @see [Zoom and LODs](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#mapview-lods) * @see [TileInfo.create()](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/#create) */ constraints?: MapViewConstraintsProperties; /** * The extent represents the visible portion of a [Map](https://developers.arcgis.com/javascript/latest/references/core/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 [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo). When the view is rotated, the extent does not update to include the newly visible portions of the map. * * The returned [Extent](https://developers.arcgis.com/javascript/latest/references/core/geometry/Extent/) object is an internal * reference which may be modified internally. To persist the returned * object, create a copy using [Extent.clone()](https://developers.arcgis.com/javascript/latest/references/core/geometry/Extent/#clone). * * > [!WARNING] * > * > **Notes** * > * > - If the spatial reference of `extent` set in the constructor does not match the * > [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) of the view, then [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) will be loaded dynamically. * > - At runtime, the [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) must be [loaded](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) when * > setting the `extent` to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is * > loaded prior to setting the extent by calling [isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded). * > If it is not yet loaded, you can call [load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load). * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) * @example * // the projectOperator must be loaded in the app if the spatial reference * // of the view does not match the spatial reference of the extent * const extent = new Extent({ * xmin: -13056650, * ymin: 6077558, * xmax: -13055709, * ymax: 6077938, * spatialReference: new SpatialReference({wkid:3857}) * }); * view.extent = extent; // Updates the view without animation */ extent?: ExtentProperties; /** 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. */ floors?: ReadonlyArrayOrCollection<string>; /** * The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map. * Starting at version 4.23, you can change the spatialReference of the MapView after it is initialized by either directly changing * this property, or by changing the basemap from the [BasemapGallery](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapGallery/) or [BasemapToggle](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapToggle/) widgets. * Set MapView's [spatialReferenceLocked](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReferenceLocked) property to `true` to prevent users from changing the view's spatial reference at runtime. * * 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 * [isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded). * If it is not yet loaded, call [load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) method. * If the projectOperator is not loaded, the view's [center](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#center) will default to `[0, 0]` * in the new spatial reference of the view and a console error will be thrown. * * > [!WARNING] * > * > **Notes** * > * > - [LayerViews](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/) not compatible with the view's spatial reference are not displayed. In such case, the layer view's [suspended](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/#suspended) * > property is `true` and [spatialReferenceSupported](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/#spatialReferenceSupported) property is `false`. * > * > - When setting view's spatial reference, the [center](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#center), [extent](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#extent) or [viewpoint.targetGeometry](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#viewpoint) properties * > are projected to the new spatial reference. The [scale](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#scale) * > and [rotation](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#rotation) properties are adjusted to keep the content of the map at the same size and orientation on screen. * > - To ensure [TileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/TileLayer/) and [VectorTileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/) are displayed in a [basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap) correctly, * > the spatialReference of the MapView must be set match their [tileInfo's](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/) spatial reference. * > - Switching spatial reference with an [imageCoordinateSystem](https://developers.arcgis.com/javascript/latest/references/core/geometry/SpatialReference/#imageCoordinateSystem) is not supported. * * @see [spatialReferenceLocked](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReferenceLocked) * @example * // check if the projectOperator is loaded * if (!projectOperator.isLoaded()) { * projectOperator.load().then(() => { * // change the spatial reference of the view to equal earth projection * view.spatialReference = new SpatialReference({ * wkid: 54035 //equal earth projection * }); * }); * } else { * // the projectOperator is already loaded. * // change the spatial reference of the view to equal earth projection * view.spatialReference = new SpatialReference({ * wkid: 54035 //equal earth projection * }); * } * @example * const basemap = await changeBasemap(); * const spatialReference = await findSpatialReference(basemap); * * // check if basemap has the same spatial reference as the view if they are not equal * // then check if the projectOperator is loaded, and load the projectOperator if it is not loaded. * // If loaded, then simply change view.spatialReference to match the basemap spatialReference * if (spatialReference && !view.spatialReference.equals(spatialReference)) { * if (!projectOperator.isLoaded()) { * await projectOperator.load(); * } * view.spatialReference = spatialReference; * } * * // change the basemap * map.basemap = basemap; * * async function changeBasemap() { * let basemap; * if (map.basemap.title === "OpenStreetMap Vector Basemap (Blueprint - WGS84)"){ * basemap = new Basemap({ * portalItem: { // Spilhaus - one ocean basemap * id: "5639ccf22d4c4830ab815c4f9c9319bb" * } * }); * } else { * basemap = osm84; * } * return basemap; * } * * async function findSpatialReference(basemap) { * await basemap.load(); * * if (basemap.spatialReference) { * return basemap.spatialReference; * } * * const layer = basemap.baseLayers.at(0); * * if (!layer) { * return null; * } * * await layer.load(); * * return layer.spatialReference; * } */ spatialReference?: SpatialReferenceProperties; /** * 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 [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo). * * * The returned [Viewpoint](https://developers.arcgis.com/javascript/latest/references/core/Viewpoint/) object is an internal * reference which may be modified internally. To persist the returned * object, create a copy using [clone()](https://developers.arcgis.com/javascript/latest/references/core/Viewpoint/#clone) method. * * > [!WARNING] * > * > **Notes** * > * > - If the spatial reference of `viewpoint` set in the constructor does not match the * > [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) of the view, then [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) will be loaded dynamically. * > * > - At runtime, the [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) must be [loaded](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) when * > setting the `viewPoint` to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is * > loaded prior to setting the center by calling [isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded). * > If it is not yet loaded, you can call [load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load). * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) */ viewpoint?: ViewpointProperties; } /** * View2D is the base class for all 2D views. * To construct 2D views see [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) and [LinkChartView](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/). * * @since 4.31 * @see [LinkChartView](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/) * @see [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) */ export default abstract class View2D extends View2DSuperclass { /** * A collection of analyses associated with the view. * * @since 4.34 * @example * // Adds an analysis to the View * view.analyses.add(elevationProfileAnalysis); * @example * // Removes an analysis from the View * view.analyses.remove(elevationProfileAnalysis); */ get analyses(): Collection<Analysis>; set analyses(value: ReadonlyArrayOrCollection<Analysis>); /** * Represents an ongoing view animation initialized by [goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#goTo). * You may [watch()](https://developers.arcgis.com/javascript/latest/references/core/core/reactiveUtils/#watch) this property to be notified of the animation's state. * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) * @example * reactiveUtils.watch( * () => view.animation, * (response) => { * if(response?.state === "running"){ * console.log("Animation in progress"); * } else{ * console.log("No animation"); * } * } * ); * @see [View2D.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#goTo) */ accessor animation: ViewAnimation | null | undefined; /** * The background color of the view. If the view's [map](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#map) changes, the view's `background` is reset to the map's background, * even if the user set it previously. * * @example * let view = new MapView({ * container: "viewDiv", * map: map, * background: { // autocasts new ColorBackground() * color: "magenta" // autocasts as new Color() * } * }); */ get background(): ColorBackground | null | undefined; set background(value: ColorBackgroundProperties | null | undefined); /** * Represents the view's center point; when setting the center, you may pass a * [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) instance or an array of numbers representing * a longitude/latitude pair (`[-100.4593, 36.9014]`). * Setting the center immediately changes the current view. For animating * the view, see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo). * * The returned [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) object is always in the spatial reference of the view and may be modified internally. * To persist the returned object, create a clone using [Point.clone()](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/#clone). * * > [!WARNING] * > * > **Notes** * > * > - If the spatial reference of `center` set in the constructor does not match the * > [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) of the view, then [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) will be loaded dynamically. * > - At runtime, the [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) must be [loaded](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) when * > setting the `center` to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is * > loaded prior to setting the center by calling [isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded). If it is not yet loaded, * > you can call [load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load). * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) * @example * // Sets the initial center point of the view to lon/lat coordinates * // lon/lat will be projected to match the spatial reference of the view * let view = new MapView({ * center: [-112, 38] * }); * @example * // Updates the view's center point to a pre-determined Point object * let pt = new Point({ * x: 12804.24, * y: -1894032.09, * spatialReference: { * wkid: view.spatialReference // wkid 2027 * } * }); * view.center = pt; * @example * const centerPoint = new Point({ * x: -8746995, * y: 4352308, * spatialReference: { * wkid: 8857 * } * }); * if (!projectOperator.isLoaded()) { * await projectOperator.load(); * } * view.center = centerPoint; */ get center(): Point; set center(value: PointProperties | [ number, number ]); /** * Specifies constraints to [scale](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#scale), [zoom](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#zoom), and [rotation](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#rotation) that may be applied to the MapView. * The `constraints.lods` should be set in the MapView constructor, if the map does not have a [basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap) or when the basemap does not have [TileInfo](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/). * * * @example * view.constraints = { * geometry: { // Constrain lateral movement to Lower Manhattan * type: "extent", * xmin: -74.020, * ymin: 40.700, * xmax: -73.971, * ymax: 40.73 * }, * minScale: 500000, // User cannot zoom out beyond a scale of 1:500,000 * maxScale: 0, // User can overzoom tiles * rotationEnabled: false // Disables map rotation * @example * // This snippet shows how to set the MapView scale 1:1 while generating additional LODs for the MapView.constraints. * const spatialReference = new SpatialReference({ * wkid: 2154 * }); * const center = new Point({ * x: 0, * y: 0, * spatialReference * }); * * // Create LODs from level 0 to 31 * const tileInfo = TileInfo.create({ * spatialReference, * numLODs: 32 * }); * const lods = tileInfo.lods; * * let view = new MapView({ * container: "viewDiv", * map, * scale: 1, * center, * spatialReference, * constraints: { * lods: lods, * snapToZoom: false * } * }); * @see [Zoom and LODs](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#mapview-lods) * @see [TileInfo.create()](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/#create) */ get constraints(): MapViewConstraints; set constraints(value: MapViewConstraintsProperties); /** * The extent represents the visible portion of a [Map](https://developers.arcgis.com/javascript/latest/references/core/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 [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo). When the view is rotated, the extent does not update to include the newly visible portions of the map. * * The returned [Extent](https://developers.arcgis.com/javascript/latest/references/core/geometry/Extent/) object is an internal * reference which may be modified internally. To persist the returned * object, create a copy using [Extent.clone()](https://developers.arcgis.com/javascript/latest/references/core/geometry/Extent/#clone). * * > [!WARNING] * > * > **Notes** * > * > - If the spatial reference of `extent` set in the constructor does not match the * > [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) of the view, then [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) will be loaded dynamically. * > - At runtime, the [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) must be [loaded](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) when * > setting the `extent` to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is * > loaded prior to setting the extent by calling [isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded). * > If it is not yet loaded, you can call [load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load). * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) * @example * // the projectOperator must be loaded in the app if the spatial reference * // of the view does not match the spatial reference of the extent * const extent = new Extent({ * xmin: -13056650, * ymin: 6077558, * xmax: -13055709, * ymax: 6077938, * spatialReference: new SpatialReference({wkid:3857}) * }); * view.extent = extent; // Updates the view without animation */ get extent(): Extent; set extent(value: ExtentProperties); /** 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. */ get floors(): Collection<string>; set floors(value: ReadonlyArrayOrCollection<string>); /** * Defines which anchor stays still while resizing the browser window. The default, `center`, ensures the view's center point remains constantly visible as the window size changes. The other * options allow the respective portion of the view to remain visible when the window's size is changed. * * @default "center" */ accessor resizeAlign: ResizeAlign; /** * Represents the size of one pixel in map units. The value of resolution can be found by dividing the extent width by the view's width. * * @since 4.9 */ get resolution(): number; /** * The clockwise rotation of due north in relation to the top of the view in degrees. * The view may be rotated by directly setting * the rotation or by using the following mouse event: `Right-click + Drag`. * Map rotation may be disabled by setting the `rotationEnabled` property * in [constraints](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#constraints) to `false`. See the code snippet below for * an example of this. * * @default 0 * @example * // Due north is rotated 90 degrees, pointing to the right side of the view * view.rotation = 90; * @example * // Due north is rotated 180 degrees, pointing to the bottom of the view * view.rotation = 180; * @example * // Due north is rotated 270 degrees, pointing to the left side of the view * view.rotation = 270; * @example * // Due north is rotated 0 degrees, pointing to the top of the view (the default) * view.rotation = 0; // 360 or multiple of 360 (e.g. 720) works here as well. * @example * // Disables map rotation * view.constraints = { * rotationEnabled: false * }; */ accessor rotation: number; /** * Represents the map scale at the center of the view. Setting the scale immediately changes the view. For animating * the view, see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo). * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) * @see [Zoom and LODs](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#mapview-lods) * @example view.scale = 24000; // Sets the map scale in the view's center to 1:24,000 */ accessor scale: number; /** * The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map. * Starting at version 4.23, you can change the spatialReference of the MapView after it is initialized by either directly changing * this property, or by changing the basemap from the [BasemapGallery](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapGallery/) or [BasemapToggle](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapToggle/) widgets. * Set MapView's [spatialReferenceLocked](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReferenceLocked) property to `true` to prevent users from changing the view's spatial reference at runtime. * * 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 * [isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded). * If it is not yet loaded, call [load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) method. * If the projectOperator is not loaded, the view's [center](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#center) will default to `[0, 0]` * in the new spatial reference of the view and a console error will be thrown. * * > [!WARNING] * > * > **Notes** * > * > - [LayerViews](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/) not compatible with the view's spatial reference are not displayed. In such case, the layer view's [suspended](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/#suspended) * > property is `true` and [spatialReferenceSupported](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/#spatialReferenceSupported) property is `false`. * > * > - When setting view's spatial reference, the [center](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#center), [extent](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#extent) or [viewpoint.targetGeometry](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#viewpoint) properties * > are projected to the new spatial reference. The [scale](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#scale) * > and [rotation](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#rotation) properties are adjusted to keep the content of the map at the same size and orientation on screen. * > - To ensure [TileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/TileLayer/) and [VectorTileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/) are displayed in a [basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap) correctly, * > the spatialReference of the MapView must be set match their [tileInfo's](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/) spatial reference. * > - Switching spatial reference with an [imageCoordinateSystem](https://developers.arcgis.com/javascript/latest/references/core/geometry/SpatialReference/#imageCoordinateSystem) is not supported. * * @see [spatialReferenceLocked](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReferenceLocked) * @example * // check if the projectOperator is loaded * if (!projectOperator.isLoaded()) { * projectOperator.load().then(() => { * // change the spatial reference of the view to equal earth projection * view.spatialReference = new SpatialReference({ * wkid: 54035 //equal earth projection * }); * }); * } else { * // the projectOperator is already loaded. * // change the spatial reference of the view to equal earth projection * view.spatialReference = new SpatialReference({ * wkid: 54035 //equal earth projection * }); * } * @example * const basemap = await changeBasemap(); * const spatialReference = await findSpatialReference(basemap); * * // check if basemap has the same spatial reference as the view if they are not equal * // then check if the projectOperator is loaded, and load the projectOperator if it is not loaded. * // If loaded, then simply change view.spatialReference to match the basemap spatialReference * if (spatialReference && !view.spatialReference.equals(spatialReference)) { * if (!projectOperator.isLoaded()) { * await projectOperator.load(); * } * view.spatialReference = spatialReference; * } * * // change the basemap * map.basemap = basemap; * * async function changeBasemap() { * let basemap; * if (map.basemap.title === "OpenStreetMap Vector Basemap (Blueprint - WGS84)"){ * basemap = new Basemap({ * portalItem: { // Spilhaus - one ocean basemap * id: "5639ccf22d4c4830ab815c4f9c9319bb" * } * }); * } else { * basemap = osm84; * } * return basemap; * } * * async function findSpatialReference(basemap) { * await basemap.load(); * * if (basemap.spatialReference) { * return basemap.spatialReference; * } * * const layer = basemap.baseLayers.at(0); * * if (!layer) { * return null; * } * * await layer.load(); * * return layer.spatialReference; * } */ get spatialReference(): SpatialReference; set spatialReference(value: SpatialReferenceProperties); /** * Indicates if the MapView's [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) can be changed after it is [ready](https://developers.arcgis.com/javascript/latest/references/core/views/View/#ready). The default is `false` indicating * the view's [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) can be changed at runtime. When `true`, [basemaps](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapGallery/#source) * with spatial references that do not match the MapView's spatial reference will be disabled in [BasemapGallery](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapGallery/) * and [BasemapToggle](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapToggle/) widgets and the view spatialReference cannot be changed at runtime. * * @default false * @see [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) */ accessor spatialReferenceLocked: boolean; /** The tiling scheme information of the view. */ get tileInfo(): TileInfo | null | undefined; /** * Defines the time zone of the view. The time zone property determines how dates and times are represented to the * user, but the underlying data is unchanged. Changing the time zone will have the following effect: * * - **Arcade**: [Arcade expressions](https://developers.arcgis.com/javascript/latest/arcade/) referencing date values in labels, renderers, and forms * will represent dates by default in the time zone of the view. When the view time zone * is changed, the output of Arcade expressions working with dates may change to match the time zone of the view. * The user can use the ChangeTimeZone Arcade function (e.g. * `ChangeTimeZone($feature.dateField, "system")`) to display dates in another time zone regardless of web map * time zone. Alternatively they can construct Date values in the context of a specific time zone * (e.g. `Date(2013, 1, 1, 10, 00, 00, 00, "UTC")`). * - **Components/widgets**: Date values, including values from `date` and `timestamp-offset` fields, will be displayed in the view's time zone by default in the following components/widgets: * [Bookmarks](https://developers.arcgis.com/javascript/latest/references/core/widgets/Bookmarks/), [Editor](https://developers.arcgis.com/javascript/latest/references/core/widgets/Editor/), [Feature](https://developers.arcgis.com/javascript/latest/references/core/widgets/Feature/), [FeatureForm](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureForm/), [Features](https://developers.arcgis.com/javascript/latest/references/core/widgets/Features/), * [FeatureTable](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/), [Legend](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-legend/), [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) and [TimeSlider](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/). * * The time zone can be set to one of the following values: * * **Possible Values** * * Value | Description | * ----- | ----------- | * system | Dates and times will be displayed in the time zone of the device or browser. * unknown | Dates and times will be displayed based on the time zone that has been defined for the layer. No adjustments are made to the display of date info. [TimeSlider](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/) is disabled. * Specified IANA time zone | Dates and times will be displayed in the specified IANA time zone. See [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). * * > [!WARNING] * > * > If the `timeZone` is set to `unknown` and a layer’s date/time field includes time information, set the [DateTimeFieldFormat.timeStyle](https://developers.arcgis.com/javascript/latest/references/core/layers/support/DateTimeFieldFormat/#timeStyle) property to either long or full on the corresponding [date/time field](https://developers.arcgis.com/javascript/latest/references/core/layers/support/DateTimeFieldFormat/). * * @default "system" * @see [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) * @example * // Date and time will be displayed in Pacific/Auckland (NZ) time zone * const view = new MapView({ * map: map, * container: "viewDiv", * timeZone: "Pacific/Auckland" * }); */ accessor timeZone: TimeZone; /** The dimension of the view. */ get type(): "2d"; /** * 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 [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo). * * * The returned [Viewpoint](https://developers.arcgis.com/javascript/latest/references/core/Viewpoint/) object is an internal * reference which may be modified internally. To persist the returned * object, create a copy using [clone()](https://developers.arcgis.com/javascript/latest/references/core/Viewpoint/#clone) method. * * > [!WARNING] * > * > **Notes** * > * > - If the spatial reference of `viewpoint` set in the constructor does not match the * > [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) of the view, then [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) will be loaded dynamically. * > * > - At runtime, the [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) must be [loaded](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) when * > setting the `viewPoint` to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is * > loaded prior to setting the center by calling [isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded). * > If it is not yet loaded, you can call [load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load). * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) */ get viewpoint(): Viewpoint; set viewpoint(value: ViewpointProperties); /** * The visibleArea represents the visible portion of a [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) within the view as * an instance of a [Polygon](https://developers.arcgis.com/javascript/latest/references/core/geometry/Polygon/). This is similar to the view * [MapView.extent](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#extent) but is a more accurate representation of the visible area especially * when the view is rotated. An example use of the visible area is to spatially filter visible features * in a layer view query. * * @since 4.31 * @see [MapView.extent](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#extent) */ get visibleArea(): Polygon | null | undefined; /** * Represents the level of detail (LOD) at the center of the view. * A zoom level or [scale](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#scale) is a number that defines how large or small the contents of a map appear in a map view. * Zoom level is a number usually between 0 (global view) and 23 (very detailed view) and is used as a shorthand for predetermined scale values. * A value of -1 means the view has no LODs. * When setting the zoom value, map view converts it to the corresponding scale, or interpolates it if the zoom is a fractional number. * MapView can display maps with different [spatialReference](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#spatialReference) projections at a full range of scales, and so use * [scale](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#scale) rather than zoom level. * * Setting the zoom immediately changes the current view. For animating the view, see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo). * Setting this property in conjunction with [center](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#center) is a convenient way to set the initial extent of the view. * * @see [MapView.goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo) * @see [Understanding MapView lods](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#mapview-lods) * @example * view.zoom = 3; // Sets the LOD to 3 (small map scale) * view.zoom = 18; // Sets the LOD to 18 (large map scale) * @example * // Set the zoom level and center in the constructor * let view = new MapView({ * zoom: 10, * center: [-120, 34], * map: map * }); */ accessor zoom: number; /** * Sets the view to a given target. The target parameter can be one of the following: * * * `[longitude, latitude]` pair of coordinates * * [Geometry](https://developers.arcgis.com/javascript/latest/references/core/geometry/Geometry/) (or array of [Geometry[]](https://developers.arcgis.com/javascript/latest/references/core/geometry/Geometry/)) * * [Graphic](https://developers.arcgis.com/javascript/latest/references/core/Graphic/) (or array of [Graphic[]](https://developers.arcgis.com/javascript/latest/references/core/Graphic/)) * * [Viewpoint](https://developers.arcgis.com/javascript/latest/references/core/Viewpoint/) * * Object with a combination of `target`, `center`, `scale` and `rotation` * properties (with `target` being any of the types listed above). The `center` property * is provided as a convenience to animate the [MapView.center](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#center) * and is equivalent to specifying the `target` with the center [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/). * * This function returns a promise which resolves as soon as the new view has been set to the target. * If the transition is animated, then the ongoing animation can be obtained using *