Viewer

new Supermap3D.Viewer(container, options)

Viewer is a basic component used to build applications. It combines all standard Supermap3D components into a reusable package. The viewer component can usually be extended with mixin to add functions useful for various applications.
Name Type Description
container Element | String Specify the Document Object Model (DOM) or ID of the HTML element that contains the viewer part.
options Object optional The object has the following properties:
Name Type Default Description
clock Clock new Clock() optional The clock used to control the current time.
selectedImageryProviderViewModel ProviderViewModel optional The view model of the current base image layer. If not provided, the first available base layer will be used. This value is only valid when options.baseLayerPicker is set to true.
imageryProviderViewModels Array.<ProviderViewModel> createDefaultImageryProviderViewModels() optional The ProviderViewModels array can be selected from BaseLayerPicker. This value is only valid when options.baseLayerPicker is set to true.
selectedTerrainProviderViewModel ProviderViewModel optional The view model of the current base terrain layer. If not provided, the first available base layer will be used. This value is only valid when options.baseLayerPicker is set to true.
terrainProviderViewModels Array.<ProviderViewModel> createDefaultTerrainProviderViewModels() optional The ProviderViewModels array can be selected from BaseLayerPicker. This value is only valid when options.baseLayerPicker is set to true.
imageryProvider ImageryProvider new BingMapsImageryProvider() optional The image provider used. This value is only valid when options.baseLayerPicker is set to false.
terrainProvider TerrainProvider new EllipsoidTerrainProvider() optional The terrain provider used.
skyBox SkyBox optional The sky box used to render the stars. When not defined, the default star effect is used.
skyAtmosphere SkyAtmosphere optional The blue sky and halo effect around the edge of the earth, set to false to turn it off.
useDefaultRenderLoop Boolean true optional If this component can control the rendering cycle, set it to true, otherwise set it to false.
targetFrameRate Number optional The target frame rate when using the default rendering loop.
showRenderLoopErrors Boolean true optional If set to true, when a rendering loop error occurs, an HTML panel containing the error message will be automatically displayed to the user.
automaticallyTrackDataSourceClocks Boolean true optional If set to true, the clock setting of the newly added data source will be automatically tracked, and if the clock of the datasource changes, it will be updated. If you need to set the clock separately, please set this to false.
contextOptions Object optional Context and WebGL creates options that match the attributes passed to Scene. Add the hardware anti-aliasing function. The anti-aliasing coefficient msaalevel uses an integer value from 1 to 8. The default is 1. The larger the value, the better the anti-aliasing effect (because the WebGL2.0 features are used, the requestWebgl2 parameter is set to true. Because WebGL2. 0 There are still some defects, so you need to turn off OIT, FXAA, HDR first).
mapProjection MapProjection new GeographicProjection() optional The map projection used in 2D and Columbus view modes.
globe Globe new Globe(mapProjection.ellipsoid) optional The earth in the scene, if this item is set to false, no sphere object will be added.
orderIndependentTranslucency Boolean true optional If this item is set to true and device support is used, translucency regardless of order will be used.
creditContainer Element | String optional Specify the DOM element or ID that contains the CreditDisplay information. If not specified, credit information will be added to the bottom of the widget.
dataSources DataSourceCollection new DataSourceCollection() optional Specifies the collection of data sources visualized by the viewer component. If this parameter is provided, the instance is owned by the caller, and the instance is not destroyed when the viewer is destroyed.
terrainExaggeration Number 1.0 optional Scalar used to exaggerate the terrain. Please note that setting the terrain exaggeration will not modify any other data.
shadows Boolean false optional Determine whether the shadow is cast by the sun.
terrainShadows ShadowMode ShadowMode.RECEIVE_ONLY optional Determine whether the terrain casts or accepts shadows from the sun.
mapMode2D MapMode2D MapMode2D.INFINITE_SCROLL optional Make sure that the 2D map is rotatable or can be scrolled infinitely in the horizontal direction.
navigation Boolean false optional Whether to display the navigation compass control. If you want to display, you need to set this to true when initializing the viewer.
Throws:
  • DeveloperError : There is no "container" element with this identifier in the document.
  • DeveloperError : When using the BaseLayerPicker component, options.imageryProvider is not available, please change to specify options.selectedImageryProviderViewModel.
  • DeveloperError : When using the BaseLayerPicker widget, options.terrainProvider is not available, please change to specify options.selectedTerrainProviderViewModel.
  • DeveloperError : When using the BaseLayerPicker component, options.selectedImageryProviderViewModel is not available, please change to specify options.imageryProvider.
  • DeveloperError : When using the BaseLayerPicker widget, options.selectedTerrainProviderViewModel is not available, please change to specify options.terrainProvider.
Example:
//Initialize the viewer widget
var viewer = new Supermap3D.Viewer('Supermap3DContainer', {
    //Use STK World Terrain
    terrainProvider : new Supermap3D.Supermap3DTerrainProvider({
        url : 'https://assets.agi.com/stk-terrain/world'
    }),
    //Use OpenStreetMaps
    imageryProvider : Supermap3D.createOpenStreetMapImageryProvider({
        url : 'https://a.tile.openstreetmap.org/'
    }),
});
//Add basic drag and drop functionality
viewer.extend(Supermap3D.viewerDragDropMixin);
//An error was encountered while processing the deleted file and a pop-up warning was displayed.
viewer.dropError.addEventListener(function(dropHandler, name, error) {
    console.log(error);
    window.alert(error);
});
See:

Members

allowDataSourcesToSuspendAnimation : Boolean

Gets or sets whether the datasource can temporarily pause the animation to avoid displaying incomplete pictures to the user. For example, if an asynchronous function is being processed in the background, the clock will not advance until the geometry is ready.

readonlyanimation : Animation

Get the Animation widget.

readonlybaseLayerPicker : BaseLayerPicker

Get the BaseLayerPicker object.

readonlybottomContainer : Element

Get the DOM element at the bottom of the window that contains CreditDisplay and other potential information.

readonlycamera : Camera

Get the camera object.

readonlycanvas : Canvas

Get the canvas object.
Obtain Supermap3D trademark elements.

readonlySupermap3DWidget : Supermap3DWidget

Get the Supermap3DWidget object.

readonlyclock : Clock

Get the clock object.

readonlyclockViewModel : ClockViewModel

Get the clock view model.

readonlycontainer : Element

Get the parent container.

readonlydataSourceDisplay : DataSourceDisplay

Get the display for DataSource.

readonlydataSources : DataSourceCollection

Gets or sets the collection of instances of data source DataSource to be visualized.

readonlyentities : EntityCollection

Get a collection of entities unrelated to a specific data source. This is a shortcut to access dataSourceDisplay.defaultDataSource.entities.

readonlyfullscreenButton : FullscreenButton

Get the FullscreenButton object.

readonlygeocoder : Geocoder

Get the Geocoder object.

readonlyhomeButton : HomeButton

Get the HomeButton object.

readonlyimageryLayers : ImageryLayerCollection

Get the image layer collection that will be rendered on the earth.

readonlyinfoBox : InfoBox

Get the InfoBox object.
Get the navigation help button (NavigationHelpButton) object.

pickEvent : Event

Click the attribute to query the event. Through this event, you can get the object properties returned when you click the specified position on the screen. When using this event, The monitoring event should be set first, and the specified attribute information returned by the callback.
Example:
//Register for click events
viewer.pickEvent.addEventListener(function(feature));
//Remove click event
viewer.pickEvent.removeEventListener(function(feature));

readonlyprojectionPicker : ProjectionPicker

Obtain the projection picker.

resolutionScale : Number

Gets or sets the zoom factor of the rendering resolution. A value less than 1.0 can improve performance on less powerful devices; on the contrary, a value greater than 1.0 will render at a higher resolution and then scale it down to improve visual fidelity. For example, if the widget is laid out in a size of 640x480, setting this property to 0.5 will cause the scene to be rendered at 320x240 resolution and the scene is scaled up, while setting it to 2.0 will cause the scene to be rendered at 1280x960 and the scene is scaled down.
Default Value: 1.0

readonlyscene : Scene

Get the scene object.

readonlysceneModePicker : SceneModePicker

Get the scene mode picker (SceneModePicker) object.

readonlyscreenSpaceEventHandler : ScreenSpaceEventHandler

Get the screen space event handler.

selectedEntity : Entity

Gets or sets the object instance for which the selection indicator is displayed.

readonlyselectedEntityChanged : Event

Get the event triggered when the selected entity object changes.

readonlyselectionIndicator : SelectionIndicator

Get the selection indicator (SelectionIndicator) object.

readonlyshadowMap : ShadowMap

Get the shadow map of the scene.

shadows : Boolean

Determine whether the shadow is cast by the sun.

targetFrameRate : Number

When useDefaultRenderLoop is set to true, get or set the target frame rate of the widget. If this attribute is not defined, the browser��s requestAnimationFrame implementation determines the frame rate; if this attribute is defined, the value should be greater than 0, and Values greater than the underlying requestAnimationFrame will not work.

terrainProvider : TerrainProvider

A TerrainProvider object that provides surface geometry for the earth.

terrainShadows : ShadowMode

Determine whether the terrain casts or accepts shadows from the sun.

readonlytimeline : Timeline

Get the Timeline widget.

trackedEntity : Entity

Gets or sets the entity instance currently tracked by the camera.

readonlytrackedEntityChanged : Event

Gets the event that is triggered when tracking the change of the entity object.

useDefaultRenderLoop : Boolean

Gets or sets whether the component can control the rendering cycle.

When set to true, the component will use requestAnimationFrame to perform rendering and resize the component, and drive clock simulation; When set to false, you must manually call the render and resize methods as part of the custom loop rendering.

If an error occurs during rendering, the renderError event of Scene will be triggered, and this property will be changed to false. After the error occurs, this property must be changed back to true to continue rendering.

readonlyvrButton : VRButton

Get the VRButton object.

Methods

destroy()

Release the resources occupied by the object.

extend(mixin, options)

Use the provided mixin to extend the basic viewer functionality. The mixin can add additional properties, functions, or other behaviors to the provided viewer instance.
Name Type Description
mixin Viewer~ViewerMixin Specify the Viewer mixin object to be added to the instance.
options Object optional Specify the options object passed to the mixin function.
See:

flyTo(target, options) → Promise.<Boolean>

The camera flies to the specified entity, entity set, or data source. If the data source is still being loaded or the visualization is still in progress, this method needs to wait for the data to be ready before executing the flight.

The offset variable is represented by the "azimuth/pitch angle/range" in the local "east-north-up" reference frame (the center point is the center of the enclosing sphere). The azimuth and pitch angles are defined in the local "east-north-up" reference system. Azimuth heading is an angle value that starts from the y axis and increases toward the x axis. The pitch angle is the rotation angle from the xy plane. A positive pitch angle means it is above the plane, and a negative pitch angle means it is below the plane. The distance range represents the distance from the center point. If range is 0, a range will be calculated so that the entire bounding ball is visible.

There must be a top-down view in 2D. The camera is above the looking down target. Range is the height above the target; headingy is determined by the offset. If the azimuth angle cannot be determined based on the offset, heading is the north direction.

Name Type Description
target Entity | Array.<Entity> | EntityCollection | DataSource | ImageryLayer | Promise.<(Entity|Array.<Entity>|EntityCollection|DataSource|ImageryLayer)> Specify the entity, entity set, data source, or image layer to view. You can also specify a promise to resolve one of the aforementioned types.
options Object optional The object has the following properties:
Name Type Default Description
duration Number 3.0 optional Flight duration (in seconds).
maximumHeight Number optional The maximum altitude in flight.
offset HeadingPitchRange optional The offset from the target in the local "east-north-up" reference system centered on the target.
Returns:
When the flight is successful, the promise is resolved to true; if the entity is not visualized in the scene or the flight is cancelled, the promise is resolved to false.

forceResize()

Mandatory readjustment makes the components reconsider the layout including component size and credit placement.

isDestroyed() → Boolean

Returns whether to release the resources occupied by the object.
Returns:
True indicates that the occupied resources have been released, otherwise it returns false.

render()

Render the scene. Unless useDefaultRenderLoop is set to false, this function will be called automatically.

resize()

Resize the part to match the container. This function will be called automatically as required, unless useDefaultRenderLoop is set to false.

zoomTo(target, offset) → Promise.<Boolean>

Set the camera asynchronously to view the specified entity, entity set, or data source. If the data source is still loading or the visualization is still in progress, this method needs to wait for the data to be ready before performing zooming.

The offset variable is represented by the "azimuth/pitch angle/range" in the local "east-north-up" reference system (the center point is the center of the bounding sphere). The azimuth and pitch angles are defined in the local "east-north-up" reference system. Azimuth heading is an angle value that starts from the y axis and increases toward the x axis. The pitch angle is the rotation angle from the xy plane. A positive pitch angle means it is above the plane, and a negative pitch angle means it is below the plane. The distance range represents the distance from the center point. If range is 0, a range will be calculated so that the entire bounding ball is visible.

There must be a top-down view in 2D. The camera is located above the looking down target. Range is the height above the target; heading is determined by an offset, otherwise the azimuth cannot be determined based on the offset, and heading is the north direction.

Name Type Description
target Entity | Array.<Entity> | EntityCollection | DataSource | ImageryLayer | Promise.<(Entity|Array.<Entity>|EntityCollection|DataSource|ImageryLayer)> Specify the entity, entity set, data source, or image layer to view. You can also specify a promise to resolve one of the aforementioned types.
offset HeadingPitchRange optional Specify the offset from the center of the local "East-North-Up" reference system.
Returns:
When the zoom is successful, the promise is resolved to true; if the entity is not visualized in the scene or the zoom is cancelled, the promise is resolved to false.

Type Definitions

ViewerMixin(viewer, options)

Added the function of Viewer instance with additional functions.
Name Type Description
viewer Viewer The viewer instance object.
options Object The options object passed to the mixin function.
See: