@arcgis/core
Version:
ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API
344 lines (342 loc) • 17.5 kB
TypeScript
import type Layer from "./layers/Layer.js";
import type Collection from "./core/Collection.js";
import type SpatialReference from "./geometry/SpatialReference.js";
import type PortalItem from "./portal/PortalItem.js";
import type BasemapStyle from "./support/BasemapStyle.js";
import type { ReadonlyArrayOrCollection } from "./core/Collection.js";
import type { JSONSupportMixin } from "./core/JSONSupport.js";
import type { Loadable, LoadableMixinProperties } from "./core/Loadable.js";
import type { BasemapGroundLayer } from "./layers/support/types.js";
import type { PortalItemProperties } from "./portal/PortalItem.js";
import type { SpatialReferenceProperties } from "./geometry/SpatialReference.js";
import type { BasemapStyleProperties } from "./support/BasemapStyle.js";
export interface BasemapProperties extends LoadableMixinProperties, Partial<Pick<Basemap, "groundLayers" | "id" | "thumbnailUrl" | "title">> {
/** A collection of layers that make up the basemap's features. */
baseLayers?: ReadonlyArrayOrCollection<Layer>;
/** The portal item. */
portalItem?: PortalItemProperties | null;
/** A collection of reference layers which are displayed over the [base layers](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#baseLayers) and all other layers in the map. They can be used to display labels on top of terrain or streets. */
referenceLayers?: ReadonlyArrayOrCollection<Layer>;
/**
* The spatial reference of the Basemap.
* For complete listings of supported coordinate systems, see
* [Using spatial references](https://developers.arcgis.com/rest/services-reference/enterprise/using-spatial-references.htm).
*
* When using an [Esri basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap), the default spatial reference is
* [Web Mercator Auxiliary Sphere](https://developers.arcgis.com/javascript/latest/references/core/geometry/SpatialReference/#WebMercator).
*
* @since 4.14
*/
spatialReference?: SpatialReferenceProperties;
/**
* The style of the basemap from the [basemap styles service (v2)](https://developers.arcgis.com/rest/basemap-styles/).
* The basemap styles service is a ready-to-use location service that serves vector and image tiles representing geographic features around the world.
*
* You can use the service to display:
* - Streets and navigation styles
* - Imagery, oceanic, and topographic styles
* - Creative styles such as nova and blueprint
* - Localized place labels
* - Places with styles - _since 4.29_
* - Worldview boundaries - _since 4.29_
*
* > [!CAUTION]
* >
* > Use of the basemap style service requires authentication via an [API key](https://developers.arcgis.com/javascript/latest/references/core/config/#Config-apiKey) or [user authentication](https://developers.arcgis.com/javascript/latest/secure-resources/#user-authentication). To learn more about API key authentication,
* > see the [API key authentication](https://developers.arcgis.com/documentation/security-and-authentication/api-key-authentication/) page in the Esri Developer documentation.
*
* @since 4.28
* @example
* // creates an arcgis streets basemap with french place labels
* const basemap = new Basemap({
* style: {
* id: "arcgis/streets",
* language: "fr"
* }
* });
* @example
* // creates an arcgis navigation basemap with places
* const basemap = new Basemap({
* style: {
* id: "arcgis/navigation",
* places: "all"
* }
* });
*/
style?: BasemapStyleProperties | null;
}
/**
* * [Overview](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#overview)
* * [Creating a Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#creating-a-basemap)
* * [Setting the LOD](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#setting-the-lod)
* * [Waiting for Load](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#waiting-for-load)
*
* <span id="overview"></span>
* ## Overview
*
* A basemap is a collection of layers that provide geographic context to a map or scene with data such as topographic features, road networks, buildings, and labels.
* These features can be represented with different styles as applicable to your application, such as streets, topographic, or imagery.
*
* A basemap can contain both [base layers](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#baseLayers), which comprise one or more layers, and [reference layers](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#referenceLayers).
* Reference layers are displayed on top of the base layers and all other layers in the map. They can be used to display labels on top of terrain or streets.
*
* <span id="creating-a-basemap"></span>
* ## Creating a Basemap
*
* Creates a new basemap object. Basemaps can be created in a variety of ways:
* 1. From a [PortalItem](https://developers.arcgis.com/javascript/latest/references/core/portal/PortalItem/)
* ```js
* // in this case the portalItem has to be a webmap
* const basemap = new Basemap({
* portalItem: {
* id: "8dda0e7b5e2d4fafa80132d59122268c" // WGS84 Streets Vector webmap
* }
* });
* ```
* 2. From a [basemap id](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#fromId)
* ```js
* // create the basemap from a basemap id
* Basemap.fromId("topo-vector");
* ```
* 3. From a [basemap style](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#style)
* ```js
* // create a basemap from the basemap styles service
* const basemap = new Basemap({
* style: {
* id: "arcgis/outdoor",
* language: "es" // displays basemap place labels in spanish
* }
* });
* ```
* 4. From a custom basemap layer. These basemaps may be created from services you publish to your own server, or from services published by third parties.
* ```js
* // create from a third party source
* const basemap = new Basemap({
* baseLayers: [
* new WebTileLayer(...)
* ],
* referenceLayers: [
* new WebTileLayer(...)
* ]
* });
* ```
*
* <span id="setting-the-lod"></span>
* ## Setting the LOD
*
* The [MapView.constraints.lods](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#constraints) property should be specified when using a dynamic service for a basemap.
* Do this by either explicitly setting the `lods` within this property, or create the `lods` via the [TileInfo.create()](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/#create)
* method on the [TileInfo](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/) class. This method is used to create a new [TileInfo](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/) instance
* with preset properties for [TileInfo.lods](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/#lods). See [Zoom and LODs](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#mapview-lods) section in
* [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) SDK document for more information.
*
* ```js
* // create a basemap from a dynamic MapServer
* const basemap = new Basemap({
* baseLayers: [
* new MapImageLayer({
* url: "url to your dynamic MapServer",
* title: "Basemap"
* })
* ],
* title: "basemap",
* id: "basemap"
* });
*
* const map = new Map({
* basemap: basemap
* });
*
* // create a TileInfo instance using the default settings and
* // pass its resulting LOD's to a MapView's constraints
* // in this case, lods will match the ArcGIS Online web mercator LODs
* const view = new MapView({
* container: "viewDiv",
* map: map,
* constraints: {
* lods: TileInfo.create().lods
* }
* });
* ```
*
* <span id="waiting-for-load"></span>
* ## Waiting for Load
*
* The [when()](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#when) method on the Basemap instance can be called to execute processes that may only run after the Basemap is [loaded](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#loaded).
*
* > [!WARNING]
* >
* > **Note:** Basemaps containing 3D layers can only be used in a [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/).
*
* @since 4.0
* @see [Basemap Layers](https://developers.arcgis.com/documentation/mapping-apis-and-services/maps/basemap-layers/)
* @see [Basemap Gallery component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-gallery/)
* @see [Basemap Toggle component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-toggle/)
* @see [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/)
* @see [Zoom and LODs](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#mapview-lods)
* @see [Sample - Create a custom basemap](https://developers.arcgis.com/javascript/latest/sample-code/basemap-custom/)
* @see [Sample - PopupTemplate with promise (basemap from PortalItem)](https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-promise/)
*/
export default class Basemap extends BasemapSuperclass {
/**
* Creates a new basemap instance from a [basemap id](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap-id).
* See [basemap id](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap-id) for a list of possible values.
*
* @param id - The basemap id.
* @returns A new Basemap instance.
* @example const streetsBasemap = Basemap.fromId("streets-vector");
* @example const nightBasemap = Basemap.fromId("streets-night-vector");
*/
static fromId(id: string): Basemap | null | undefined;
constructor(properties?: BasemapProperties);
/** A collection of layers that make up the basemap's features. */
get baseLayers(): Collection<Layer>;
set baseLayers(value: ReadonlyArrayOrCollection<Layer>);
/**
* A collection of 3D Tiles IM layers (currently at most one supported)
* If any layer is added here that has global coverage, it will override both ground.layers and basemap.baselayers
*/
accessor groundLayers: Collection<BasemapGroundLayer>;
/**
* An identifier used to refer to the basemap when referencing it elsewhere.
*
* @example
* const customBasemap = new Basemap({
* baseLayers: [layers],
* title: "Custom Basemap",
* id: "myBasemap"
* });
*/
accessor id: string | null | undefined;
/**
* Indicates whether the basemap instance has loaded. When `true`,
* all the properties of the object can be accessed.
*
* @default false
*/
get loaded(): boolean;
/** The portal item. */
get portalItem(): PortalItem | null | undefined;
set portalItem(value: PortalItemProperties | null | undefined);
/** A collection of reference layers which are displayed over the [base layers](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#baseLayers) and all other layers in the map. They can be used to display labels on top of terrain or streets. */
get referenceLayers(): Collection<Layer>;
set referenceLayers(value: ReadonlyArrayOrCollection<Layer>);
/**
* The spatial reference of the Basemap.
* For complete listings of supported coordinate systems, see
* [Using spatial references](https://developers.arcgis.com/rest/services-reference/enterprise/using-spatial-references.htm).
*
* When using an [Esri basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap), the default spatial reference is
* [Web Mercator Auxiliary Sphere](https://developers.arcgis.com/javascript/latest/references/core/geometry/SpatialReference/#WebMercator).
*
* @since 4.14
*/
get spatialReference(): SpatialReference;
set spatialReference(value: SpatialReferenceProperties);
/**
* The style of the basemap from the [basemap styles service (v2)](https://developers.arcgis.com/rest/basemap-styles/).
* The basemap styles service is a ready-to-use location service that serves vector and image tiles representing geographic features around the world.
*
* You can use the service to display:
* - Streets and navigation styles
* - Imagery, oceanic, and topographic styles
* - Creative styles such as nova and blueprint
* - Localized place labels
* - Places with styles - _since 4.29_
* - Worldview boundaries - _since 4.29_
*
* > [!CAUTION]
* >
* > Use of the basemap style service requires authentication via an [API key](https://developers.arcgis.com/javascript/latest/references/core/config/#Config-apiKey) or [user authentication](https://developers.arcgis.com/javascript/latest/secure-resources/#user-authentication). To learn more about API key authentication,
* > see the [API key authentication](https://developers.arcgis.com/documentation/security-and-authentication/api-key-authentication/) page in the Esri Developer documentation.
*
* @since 4.28
* @example
* // creates an arcgis streets basemap with french place labels
* const basemap = new Basemap({
* style: {
* id: "arcgis/streets",
* language: "fr"
* }
* });
* @example
* // creates an arcgis navigation basemap with places
* const basemap = new Basemap({
* style: {
* id: "arcgis/navigation",
* places: "all"
* }
* });
*/
get style(): BasemapStyle | null | undefined;
set style(value: BasemapStyleProperties | null | undefined);
/**
* The URL pointing to an image that represents the basemap. When using a custom
* basemap in the [Basemap Toggle](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-toggle/) component, the image
* specified here will display in the component. When the user clicks the image,
* the map's basemap will update to the basemap associated with the image.
*
* @see [Sample - Custom basemap](https://developers.arcgis.com/javascript/latest/sample-code/basemap-custom/)
*/
accessor thumbnailUrl: string | null | undefined;
/**
* The title of the basemap.
*
* @default "Basemap"
*/
accessor title: string;
/**
* Creates a deep clone of this object.
*
* @returns A deep clone of the [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/) instance that
* invoked this method.
*/
clone(): Basemap;
/**
* Destroys the basemap, and any associated resources, including its [baseLayers](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#baseLayers) and [portalItem](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#portalItem).
* These can no longer be used once the basemap has been destroyed. To prevent these objects from being destroyed,
* remove them from the basemap before calling `destroy()`.
*
* ```
* // prevent the layers from being destroyed by removing them from the basemap
* const baseLayers = basemap.baseLayers.removeAll();
* const referenceLayers = basemap.referenceLayers.removeAll();
*
* // unset portalItem from the basemap so that it is not destroyed
* const portalItem = basemap.portalItem;
* basemap.portalItem = null;
*
* // destroy the basemap and any remaining associated resources
* basemap.destroy();
* ```
*
* @since 4.17
* @see [Map.destroy()](https://developers.arcgis.com/javascript/latest/references/core/Map/#destroy)
* @see [WebMap.destroy()](https://developers.arcgis.com/javascript/latest/references/core/WebMap/#destroy)
* @see [WebScene.destroy()](https://developers.arcgis.com/javascript/latest/references/core/WebScene/#destroy)
* @see [Ground.destroy()](https://developers.arcgis.com/javascript/latest/references/core/Ground/#destroy)
* @see [Layer.destroy()](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/#destroy)
* @see [PortalItem.destroy()](https://developers.arcgis.com/javascript/latest/references/core/portal/PortalItem/#destroy)
*/
destroy(): void;
/**
* Loads all the externally loadable resources associated with the basemap.
* For the basemap this will load all the base layers and reference layers.
*
* @returns Resolves when all the loadable resources have been loaded.
* Rejects if at least one of the loadable resources failed to load.
* @since 4.9
* @see [load()](https://developers.arcgis.com/javascript/latest/references/core/Basemap/#load)
* @example
* // Load all resources but ignore if one or more of them failed to load
* basemap.loadAll()
* .catch(function(error) {
* // Ignore any failed resources
* })
* .then(function() {
* console.log("All loaded");
* });
*/
loadAll(): Promise<this>;
}
declare const BasemapSuperclass: typeof Loadable & typeof JSONSupportMixin