UNPKG

esri-map-view

Version:

Display an Esri map view as a web component.

239 lines (238 loc) 10.8 kB
/** * <esri-scene-view> a custom web component for rendering a 3D map on a web page. */ import { EventEmitter } from "../../stencil-public-runtime"; import { offsetProps, cameraProps } from "../../utils/utils"; import esriConfig from "@arcgis/core/config.js"; export declare class EsriSceneView { hostElement: HTMLElement; /** * The `mapLoaded` event fires when the basemap or web map has finished loading. */ mapLoaded: EventEmitter; /** * The `mapLoadError` event fires if the basemap or web map did not load due to some type of error. Check the console for error messages. */ mapLoadError: EventEmitter; private ArcGISJavaScriptVersion; private assetPath; private sceneViewWidgets; /** * Properties to hold the map, scene view, and initial viewpoint */ esriConfig: esriConfig; esriMap: __esri.Map; esriWebScene: __esri.WebScene; esriSceneView: __esri.SceneView; symbolGraphic: __esri.Graphic; searchWidget: any; longitude: number; latitude: number; levelOfDetail: number; minAltitude: number; maxAltitude: number; parsedViewpoint: boolean; parsedOffset: offsetProps; cameraSettings: cameraProps; defaultBasemap: string; viewChangePending: Boolean; mapChangePending: Boolean; /** * Options for esri-loader */ esriMapOptions: { url: string; css: boolean; }; /** * Set your API key. Learn more about [API keys](https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/). */ apikey: string; watchAPIKeyHandler(newValue: string, oldValue: string): void; /** * Indicate a basemap id to use for the map. Select one of the basemap style options from the enumeration https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap, * or the item ID of a custom basemap style. This property will be overridden by * `webscene` if that attribute is provided. If neither `webscene` nor `basemap` are set, then * a default basemap is assigned. Options for `basemap` are defined in the [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap). */ basemap: string; watchBasemapHandler(newValue: string, oldValue: string): void; /** * Indicate a web scene id to use for the map. If neither `webscene` nor `basemap` * are set, then a default basemap is assigned. */ webscene: string; watchWebSceneHandler(newValue: string, oldValue: string): void; /** * Indicate an initial viewpoint to focus the scene. This is a string of 3 comma-separated numbers * expected: latitude (y), longitude (x), and levelOfDetail (LOD). Example: "22.7783,34.1234,9". * You should set this if you set a `basemap`. You do not need to set this if you set `webscene` as * the web scene's initial viewpoint is used. However, this setting will override the web scenes * initial viewpoint. The `viewpoint` is not used if `cameraPosition` is also set. For 3D scenes, * the level of detail is translated into a 3D camera position height of Z-axis position. */ viewpoint: string; watchViewPointHandler(newValue: string, oldValue: string): void; /** * Indicate the camera position for the initial scene viewpoint. This is a string of five comma * separated numbers as follows: x,y,z,heading,tilt. If you set this it will override `viewpoint` * settings. */ cameraposition: string; watchCameraPositionHandler(newValue: string, oldValue: string): void; /** * Specify 0 or more layers to add on top of the basemap. Each layer is a string that is either a URL * to the feature service, or the item ID of the feature service. Multiple layers are separated * with a comma. */ layers: string; watchLayersHandler(newValue: string, oldValue: string): void; /** * Include a search widget by indicating where on the scene view it should appear. The valid values for this * attribute are `top-left`, `top-right`, `bottom-left`, `bottom-right`. If this attribute is empty/missing * or an invalid value then a search widget will not show. */ search: string; watchSearchHandler(newValue: string, oldValue: string): void; /** * Indicate a symbol to use to mark the location of the initial viewpoint. This is the fully qualified URL * to a 64x64 px PNG image. CORS is respected when accessing the image. You can also specify `green-pin` to * use a green map pin as the symbol. You can also specify `pin:{color}` to use a text symbol marker * and the color value. Use a 6-digit HTML color value or the standard HTML color name. */ symbol: string; watchSymbolHandler(newValue: string, oldValue: string): void; /** * Some symbols will require an x/y offset so that the registration point of the * symbol is exactly on the map point. Here you can specify an x,y offset, in pixels, to adjust * the symbol. Use a comma separated coordinate pair. */ symboloffset: string; watchSymbolOffsetHandler(newValue: string, oldValue: string): void; /** * If `symbol` is set, tapping the symbol will show a pop-up. This is the `title` for that pop-up. */ popuptitle: string; watchPopupTitleHandler(newValue: string, oldValue: string): void; /** * If `symbol` is set, tapping the symbol will show a pop-up. This is the `content` for that pop-up. */ popupinfo: string; watchPopupInfoHandler(newValue: string, oldValue: string): void; /** * You can show or hide the scene UI (Pan/zoom controls) with the `ui` attribute. Setting `ui=hide` or `ui=off` to hide it, * set `ui=show` or `ui=on` to show it. The default value is to show the ui. */ ui: string; watchUIHandler(newValue: string, oldValue: string): void; /** * Set the minimum and maximum altitude levels allowed by either the UI zoom controls or * the mouse/touch interaction. This is a comma separated string of 2 numbers, the first is * the minimum and the second is the maximum. For example, 1400,160000 will constrain the camera * altitude to a minimum of 1400 and a maximum of 160000. If only one number is provided (or valid) then * both min and max are set to that value. */ minmaxalt: string; watchMinMaxAltHandler(newValue: string, oldValue: string): void; constructor(); /** * The component is loaded and has rendered. Attach the SceneView to the HTML element. * Only called once per component life cycle. */ componentDidLoad(): void; /** * Set the configuration object authentication based on the user provided apikey. If no apikey is provided * then a login pop up will appear if authentication is required. * The esri configuration object https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html */ private setAuthentication; /** * Create a map object. Review the element attributes to determine which type of map should be created. * Given the attributes set on the element, creates either a standard basemap, a custom vector basemap, * or a web scene. */ private createEsriScene; /** * Create a web scene. */ private updateEsriWebScene; /** * Create a map object. Review the element attributes to determine which type of map should be created. * Given the attributes set on the element, creates either a standard basemap, a custom vector basemap, * or a web scene. */ private updateEsriScene; /** * Creates the SceneView used in the component. Assumes the map was created before getting here. */ private createEsriSceneView; /** * Add layers to the map. Each layer can be specified by its item ID or its service URL. * @param {string} layers A list of 1 or more layers where multiple layers are separated with commas. */ private addLayers; /** * Create a search widget and add it to the view at the given UI position. * @param {string} searchWidgetPosition The UI position where to place the search widget in the view. */ private createSearchWidget; /** * Remove the search widget from the scene view. */ private removeSearchWidget; /** * Add graphics to the graphics layer depending on which properties the user requested. */ private addGraphics; /** * Add a graphic symbol to the scene view graphics layer, and remove a prior graphic. * @param symbolGraphic A Graphic to add to the graphics layer of the scene view. */ private updateGraphicSymbol; /** * Show a symbol on the map at the initial viewpoint location. * @param {string} symbol Either an asset id of a local symbol asset or a fully qualified URL to a PNG to use as the symbol. */ private showSymbol; /** * Show a pin on the map at the initial viewpoint location. * @param {string} pinColor The color value of the pin symbol. */ private showPin; render(): any; /** * Constrain the UI to restrict the user from changing the camera view. If the UI is hidden then the * scene view is constrained to the current extent. If the UI controls are showing then the scene view is * constrained to the min/max camera height that was configured. * @param uiSetting Show or hide the UI controls (pan/zoom) * @param isInitializing True if we are in the initialization stage of the component, false if the component was previously initialized. * @returns {boolean} True if the UI is constrained. */ private constrainUI; /** * Validate the scene properties to verify if we can render a map. Either a basemap or a webscene * must be specified. If neither are set then a default basemap is used. * @returns {boolean} True if we think we can render a map. */ private verifySceneProps; /** * Verify the cameraposition or viewpoint attribute and break it down to its individual parts. * @returns {boolean} True if a viewpoint is parsed. */ private verifyViewpoint; /** * Verify the search widget position is valid. * @returns {boolean} True if a valid search widget position is specified. */ private verifySearch; /** * Verify the min and max altitude values are set properly. * @returns {boolean} True if min/max altitude is set. */ private verifyMinMaxAltitude; /** * Verify and validate any attributes set on the component to make sure * we are in a valid starting state we can render. */ private verifyProps; }