A base widget for building applications. It composites all of the standard Cesium widgets into one reusable package.
The widget can always be extended by using mixins, which add functionality useful for a variety of applications.
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
container |
Element | String | The DOM element or ID that will contain the widget. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
options |
Object |
optional
Object with the following properties:
|
Throws:
-
DeveloperError : Element with id "container" does not exist in the document.
-
DeveloperError : options.selectedImageryProviderViewModel is not available when not using the BaseLayerPicker widget, specify options.imageryProvider instead.
-
DeveloperError : options.selectedTerrainProviderViewModel is not available when not using the BaseLayerPicker widget, specify options.terrainProvider instead.
Example:
//Initialize the viewer widget with several custom options and mixins.
var viewer = new Cesium.Viewer('cesiumContainer', {
//Start in Columbus Viewer
sceneMode : Cesium.SceneMode.COLUMBUS_VIEW,
//Use Cesium World Terrain
terrainProvider : Cesium.createWorldTerrain(),
//Hide the base layer picker
baseLayerPicker : false,
//Use OpenStreetMaps
imageryProvider : Cesium.createOpenStreetMapImageryProvider({
url : 'https://a.tile.openstreetmap.org/'
}),
// Use high-res stars downloaded from https://github.com/AnalyticalGraphicsInc/cesium-assets
skyBox : new Cesium.SkyBox({
sources : {
positiveX : 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
negativeX : 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
positiveY : 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
negativeY : 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
positiveZ : 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
negativeZ : 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
}
}),
// Show Columbus View map with Web Mercator projection
mapProjection : new Cesium.WebMercatorProjection()
});
//Add basic drag and drop functionality
viewer.extend(Cesium.viewerDragDropMixin);
//Show a pop-up alert if we encounter an error when processing a dropped file
viewer.dropError.addEventListener(function(dropHandler, name, error) {
console.log(error);
window.alert(error);
});Demo:
See:
Members
-
Gets or sets whether or not data sources can temporarily pause animation in order to avoid showing an incomplete picture to the user. For example, if asynchronous primitives are being processed in the background, the clock will not advance until the geometry is ready.
-
readonlyanimation : Animation
-
Gets the Animation widget.
-
readonlybaseLayerPicker : BaseLayerPicker
-
Gets the BaseLayerPicker.
-
Gets the DOM element for the area at the bottom of the window containing the
CreditDisplayand potentially other things. -
readonlycamera : Camera
-
Gets the camera.
-
Gets the canvas.
-
Gets the Cesium logo element.
-
readonlycesiumWidget : CesiumWidget
-
Gets the CesiumWidget.
-
readonlyclock : Clock
-
Gets the clock.
-
clockTrackedDataSource : DataSource
-
Gets or sets the data source to track with the viewer's clock.
-
readonlyclockViewModel : ClockViewModel
-
Gets the clock view model.
-
Gets the parent container.
-
readonlydataSourceDisplay : DataSourceDisplay
-
Gets the display used for
DataSourcevisualization. -
readonlydataSources : DataSourceCollection
-
Gets the set of
DataSourceinstances to be visualized. -
readonlyentities : EntityCollection
-
Gets the collection of entities not tied to a particular data source. This is a shortcut to
dataSourceDisplay.defaultDataSource.entities. -
readonlyfullscreenButton : FullscreenButton
-
Gets the FullscreenButton.
-
readonlygeocoder : Geocoder
-
Gets the Geocoder.
-
readonlyhomeButton : HomeButton
-
Gets the HomeButton.
-
readonlyimageryLayers : ImageryLayerCollection
-
Gets the collection of image layers that will be rendered on the globe.
-
readonlyinfoBox : InfoBox
-
Gets the info box.
-
readonlynavigationHelpButton : NavigationHelpButton
-
Gets the NavigationHelpButton.
-
readonlyprojectionPicker : ProjectionPicker
-
Gets the ProjectionPicker.
-
Gets or sets a scaling factor for rendering resolution. Values less than 1.0 can improve performance on less powerful devices while values greater than 1.0 will render at a higher resolution and then scale down, resulting in improved visual fidelity. For example, if the widget is laid out at a size of 640x480, setting this value to 0.5 will cause the scene to be rendered at 320x240 and then scaled up while setting it to 2.0 will cause the scene to be rendered at 1280x960 and then scaled down.
-
Default Value:
1.0 -
readonlyscene : Scene
-
Gets the scene.
-
readonlysceneModePicker : SceneModePicker
-
Gets the SceneModePicker.
-
readonlyscreenSpaceEventHandler : ScreenSpaceEventHandler
-
Gets the screen space event handler.
-
selectedEntity : Entity
-
Gets or sets the object instance for which to display a selection indicator.
-
readonlyselectedEntityChanged : Event
-
Gets the event that is raised when the selected entity chages
-
readonlyselectionIndicator : SelectionIndicator
-
Gets the selection indicator.
-
readonlyshadowMap : ShadowMap
-
Get the scene's shadow map
-
Determines if shadows are cast by the sun.
-
Gets or sets the target frame rate of the widget when
useDefaultRenderLoopis true. If undefined, the browser'srequestAnimationFrameimplementation determines the frame rate. If defined, this value must be greater than 0. A value higher than the underlying requestAnimationFrame implementation will have no effect. -
terrainProvider : TerrainProvider
-
The terrain provider providing surface geometry for the globe.
-
terrainShadows : ShadowMode
-
Determines if the terrain casts or shadows from the sun.
-
readonlytimeline : Timeline
-
Gets the Timeline widget.
-
trackedEntity : Entity
-
Gets or sets the Entity instance currently being tracked by the camera.
-
readonlytrackedEntityChanged : Event
-
Gets the event that is raised when the tracked entity chages
-
Gets or sets whether or not this widget should control the render loop. If set to true the widget will use
requestAnimationFrameto perform rendering and resizing of the widget, as well as drive the simulation clock. If set to false, you must manually call theresize,rendermethods as part of a custom render loop. If an error occurs during rendering,Scene'srenderErrorevent will be raised and this property will be set to false. It must be set back to true to continue rendering after the error. -
readonlyvrButton : VRButton
-
Gets the VRButton.
Methods
-
Destroys the widget. Should be called if permanently removing the widget from layout.
-
Extends the base viewer functionality with the provided mixin. A mixin may add additional properties, functions, or other behavior to the provided viewer instance.
Name Type Description mixinViewer~ViewerMixin The Viewer mixin to add to this instance. optionsObject optional The options object to be passed to the mixin function. See:
-
Flies the camera to the provided entity, entities, or data source. If the data source is still in the process of loading or the visualization is otherwise still loading, this method waits for the data to be ready before performing the flight.
The offset is heading/pitch/range in the local east-north-up reference frame centered at the center of the bounding sphere. The heading and the pitch angles are defined in the local east-north-up reference frame. The heading is the angle from y axis and increasing towards the x axis. Pitch is the rotation from the xy-plane. Positive pitch angles are above the plane. Negative pitch angles are below the plane. The range is the distance from the center. If the range is zero, a range will be computed such that the whole bounding sphere is visible.
In 2D, there must be a top down view. The camera will be placed above the target looking down. The height above the target will be the range. The heading will be determined from the offset. If the heading cannot be determined from the offset, the heading will be north.
Name Type Description targetEntity | Array.<Entity> | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | Promise.<(Entity|Array.<Entity>|EntityCollection|DataSource|ImageryLayer|Cesium3DTileset)> The entity, array of entities, entity collection, data source, Cesium3DTileset, or imagery layer to view. You can also pass a promise that resolves to one of the previously mentioned types. optionsObject optional Object with the following properties: Name Type Default Description durationNumber 3.0optional The duration of the flight in seconds. maximumHeightNumber optional The maximum height at the peak of the flight. offsetHeadingPitchRange optional The offset from the target in the local east-north-up reference frame centered at the target. Returns:
A Promise that resolves to true if the flight was successful or false if the target is not currently visualized in the scene or the flight was cancelled. //TODO: Cleanup entity mentions -
This forces the widget to re-think its layout, including widget sizes and credit placement.
-
Returns:
true if the object has been destroyed, false otherwise. -
Renders the scene. This function is called automatically unless
useDefaultRenderLoopis set to false; -
Resizes the widget to match the container size. This function is called automatically as needed unless
useDefaultRenderLoopis set to false. -
Asynchronously sets the camera to view the provided entity, entities, or data source. If the data source is still in the process of loading or the visualization is otherwise still loading, this method waits for the data to be ready before performing the zoom.
The offset is heading/pitch/range in the local east-north-up reference frame centered at the center of the bounding sphere. The heading and the pitch angles are defined in the local east-north-up reference frame. The heading is the angle from y axis and increasing towards the x axis. Pitch is the rotation from the xy-plane. Positive pitch angles are above the plane. Negative pitch angles are below the plane. The range is the distance from the center. If the range is zero, a range will be computed such that the whole bounding sphere is visible.
In 2D, there must be a top down view. The camera will be placed above the target looking down. The height above the target will be the range. The heading will be determined from the offset. If the heading cannot be determined from the offset, the heading will be north.
Name Type Description targetEntity | Array.<Entity> | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | Promise.<(Entity|Array.<Entity>|EntityCollection|DataSource|ImageryLayer|Cesium3DTileset)> The entity, array of entities, entity collection, data source, Cesium#DTileset, or imagery layer to view. You can also pass a promise that resolves to one of the previously mentioned types. offsetHeadingPitchRange optional The offset from the center of the entity in the local east-north-up reference frame. Returns:
A Promise that resolves to true if the zoom was successful or false if the target is not currently visualized in the scene or the zoom was cancelled.
Type Definitions
-
A function that augments a Viewer instance with additional functionality.
Name Type Description viewerViewer The viewer instance. optionsObject Options object to be passed to the mixin function. See: