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.
alias Viewer
- {Element|String} container The DOM element or ID that will contain the widget.
- The options object takes the following properties
- {Boolean} [options.animation=true] If set to false, the Animation widget will not be created.
- {Boolean} [options.baseLayerPicker=true] If set to false, the BaseLayerPicker widget will not be created.
- {Boolean} [options.fullscreenButton=true] If set to false, the FullscreenButton widget will not be created.
- {Boolean} [options.vrButton=false] If set to true, the VRButton widget will be created.
- {Boolean} [options.geocoder=true] If set to false, the Geocoder widget will not be created.
- {Boolean} [options.homeButton=true] If set to false, the HomeButton widget will not be created.
- {Boolean} [options.infoBox=true] If set to false, the InfoBox widget will not be created.
- {Boolean} [options.sceneModePicker=true] If set to false, the SceneModePicker widget will not be created.
- {Boolean} [options.selectionIndicator=true] If set to false, the SelectionIndicator widget will not be created.
- {Boolean} [options.timeline=true] If set to false, the Timeline widget will not be created.
- {Boolean} [options.navigationHelpButton=true] If set to false, the navigation help button will not be created.
- {Boolean} [options.navigationInstructionsInitiallyVisible=true] True if the navigation instructions should initially be visible, or false if the should not be shown until the user explicitly clicks the button.
- {Boolean} [options.scene3DOnly=false] When true, each geometry instance will only be rendered in 3D to save GPU memory.
- {Clock} [options.clock=new Clock()] The clock to use to control current time.
- {ProviderViewModel} [options.selectedImageryProviderViewModel] The view model for the current base imagery layer, if not supplied the first available base layer is used. This value is only valid if options.baseLayerPicker is set to true.
- {ProviderViewModel[]} [options.imageryProviderViewModels=createDefaultImageryProviderViewModels()] The array of ProviderViewModels to be selectable from the BaseLayerPicker. This value is only valid if options.baseLayerPicker is set to true.
- {ProviderViewModel} [options.selectedTerrainProviderViewModel] The view model for the current base terrain layer, if not supplied the first available base layer is used. This value is only valid if options.baseLayerPicker is set to true.
- {ProviderViewModel[]} [options.terrainProviderViewModels=createDefaultTerrainProviderViewModels()] The array of ProviderViewModels to be selectable from the BaseLayerPicker. This value is only valid if options.baseLayerPicker is set to true.
- {ImageryProvider} [options.imageryProvider=new BingMapsImageryProvider()] The imagery provider to use. This value is only valid if options.baseLayerPicker is set to false.
- {TerrainProvider} [options.terrainProvider=new EllipsoidTerrainProvider()] The terrain provider to use
- {SkyBox} [options.skyBox] The skybox used to render the stars. When undefined, the default stars are used.
- {SkyAtmosphere} [options.skyAtmosphere] Blue sky, and the glow around the Earth's limb. Set to false to turn it off.
- {Element|String} [options.fullscreenElement=document.body] The element or id to be placed into fullscreen mode when the full screen button is pressed.
- {Boolean} [options.useDefaultRenderLoop=true] True if this widget should control the render loop, false otherwise.
- {Number} [options.targetFrameRate] The target frame rate when using the default render loop.
- {Boolean} [options.showRenderLoopErrors=true] If true, this widget will automatically display an HTML panel to the user containing the error, if a render loop error occurs.
- {Boolean} [options.automaticallyTrackDataSourceClocks=true] If true, this widget will automatically track the clock settings of newly added DataSources, updating if the DataSource's clock changes. Set this to false if you want to configure the clock independently.
- {Object} [options.contextOptions] Context and WebGL creation properties corresponding to options passed to Scene
- {SceneMode} [options.sceneMode=SceneMode.SCENE3D] The initial scene mode.
- {MapProjection} [options.mapProjection=new GeographicProjection()] The map projection to use in 2D and Columbus View modes.
- {Globe} [options.globe=new Globe(mapProjection.ellipsoid)] The globe to use in the scene. If set to false, no globe will be added.
- {Boolean} [options.orderIndependentTranslucency=true] If true and the configuration supports it, use order independent translucency.
- {Element|String} [options.creditContainer] The DOM element or ID that will contain the CreditDisplay If not specified, the credits are added to the bottom of the widget itself.
- {DataSourceCollection} [options.dataSources=new DataSourceCollection()] The collection of data sources visualized by the widget. If this parameter is provided,
the instance is assumed to be owned by the caller and will not be destroyed when the viewer is destroyed.
- {Number} [options.terrainExaggeration=1.0] A scalar used to exaggerate the terrain. Note that terrain exaggeration will not modify any other primitive as they are positioned relative to the ellipsoid.
exception {DeveloperError} Element with id "container" does not exist in the document.
exception {DeveloperError} options.imageryProvider is not available when using the BaseLayerPicker widget, specify options.selectedImageryProviderViewModel instead.
exception {DeveloperError} options.terrainProvider is not available when using the BaseLayerPicker widget, specify options.selectedTerrainProviderViewModel instead.
exception {DeveloperError} options.selectedImageryProviderViewModel is not available when not using the BaseLayerPicker widget, specify options.imageryProvider instead.
exception {DeveloperError} options.selectedTerrainProviderViewModel is not available when not using the BaseLayerPicker widget, specify options.terrainProvider instead.
Annotations
@RawJSType()@native()@JSName("Cesium.Viewer")
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 standard Cesium terrain
terrainProvider : new Cesium.CesiumTerrainProvider({
url : 'https://assets.agi.com/stk-terrain/world'
}),
//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);
});
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.
alias Viewer
- {Element|String} container The DOM element or ID that will contain the widget. - The options object takes the following properties - {Boolean} [options.animation=true] If set to false, the Animation widget will not be created. - {Boolean} [options.baseLayerPicker=true] If set to false, the BaseLayerPicker widget will not be created. - {Boolean} [options.fullscreenButton=true] If set to false, the FullscreenButton widget will not be created. - {Boolean} [options.vrButton=false] If set to true, the VRButton widget will be created. - {Boolean} [options.geocoder=true] If set to false, the Geocoder widget will not be created. - {Boolean} [options.homeButton=true] If set to false, the HomeButton widget will not be created. - {Boolean} [options.infoBox=true] If set to false, the InfoBox widget will not be created. - {Boolean} [options.sceneModePicker=true] If set to false, the SceneModePicker widget will not be created. - {Boolean} [options.selectionIndicator=true] If set to false, the SelectionIndicator widget will not be created. - {Boolean} [options.timeline=true] If set to false, the Timeline widget will not be created. - {Boolean} [options.navigationHelpButton=true] If set to false, the navigation help button will not be created. - {Boolean} [options.navigationInstructionsInitiallyVisible=true] True if the navigation instructions should initially be visible, or false if the should not be shown until the user explicitly clicks the button. - {Boolean} [options.scene3DOnly=false] When
true, each geometry instance will only be rendered in 3D to save GPU memory. - {Clock} [options.clock=new Clock()] The clock to use to control current time. - {ProviderViewModel} [options.selectedImageryProviderViewModel] The view model for the current base imagery layer, if not supplied the first available base layer is used. This value is only valid if options.baseLayerPicker is set to true. - {ProviderViewModel[]} [options.imageryProviderViewModels=createDefaultImageryProviderViewModels()] The array of ProviderViewModels to be selectable from the BaseLayerPicker. This value is only valid if options.baseLayerPicker is set to true. - {ProviderViewModel} [options.selectedTerrainProviderViewModel] The view model for the current base terrain layer, if not supplied the first available base layer is used. This value is only valid if options.baseLayerPicker is set to true. - {ProviderViewModel[]} [options.terrainProviderViewModels=createDefaultTerrainProviderViewModels()] The array of ProviderViewModels to be selectable from the BaseLayerPicker. This value is only valid if options.baseLayerPicker is set to true. - {ImageryProvider} [options.imageryProvider=new BingMapsImageryProvider()] The imagery provider to use. This value is only valid if options.baseLayerPicker is set to false. - {TerrainProvider} [options.terrainProvider=new EllipsoidTerrainProvider()] The terrain provider to use - {SkyBox} [options.skyBox] The skybox used to render the stars. Whenundefined, the default stars are used. - {SkyAtmosphere} [options.skyAtmosphere] Blue sky, and the glow around the Earth's limb. Set tofalseto turn it off. - {Element|String} [options.fullscreenElement=document.body] The element or id to be placed into fullscreen mode when the full screen button is pressed. - {Boolean} [options.useDefaultRenderLoop=true] True if this widget should control the render loop, false otherwise. - {Number} [options.targetFrameRate] The target frame rate when using the default render loop. - {Boolean} [options.showRenderLoopErrors=true] If true, this widget will automatically display an HTML panel to the user containing the error, if a render loop error occurs. - {Boolean} [options.automaticallyTrackDataSourceClocks=true] If true, this widget will automatically track the clock settings of newly added DataSources, updating if the DataSource's clock changes. Set this to false if you want to configure the clock independently. - {Object} [options.contextOptions] Context and WebGL creation properties corresponding tooptionspassed to Scene - {SceneMode} [options.sceneMode=SceneMode.SCENE3D] The initial scene mode. - {MapProjection} [options.mapProjection=new GeographicProjection()] The map projection to use in 2D and Columbus View modes. - {Globe} [options.globe=new Globe(mapProjection.ellipsoid)] The globe to use in the scene. If set tofalse, no globe will be added. - {Boolean} [options.orderIndependentTranslucency=true] If true and the configuration supports it, use order independent translucency. - {Element|String} [options.creditContainer] The DOM element or ID that will contain the CreditDisplay If not specified, the credits are added to the bottom of the widget itself. - {DataSourceCollection} [options.dataSources=new DataSourceCollection()] The collection of data sources visualized by the widget. If this parameter is provided, the instance is assumed to be owned by the caller and will not be destroyed when the viewer is destroyed. - {Number} [options.terrainExaggeration=1.0] A scalar used to exaggerate the terrain. Note that terrain exaggeration will not modify any other primitive as they are positioned relative to the ellipsoid.exception {DeveloperError} Element with id "container" does not exist in the document. exception {DeveloperError} options.imageryProvider is not available when using the BaseLayerPicker widget, specify options.selectedImageryProviderViewModel instead. exception {DeveloperError} options.terrainProvider is not available when using the BaseLayerPicker widget, specify options.selectedTerrainProviderViewModel instead. exception {DeveloperError} options.selectedImageryProviderViewModel is not available when not using the BaseLayerPicker widget, specify options.imageryProvider instead. exception {DeveloperError} options.selectedTerrainProviderViewModel is not available when not using the BaseLayerPicker widget, specify options.terrainProvider instead.
//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 standard Cesium terrain terrainProvider : new Cesium.CesiumTerrainProvider({ url : 'https://assets.agi.com/stk-terrain/world' }), //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); });
viewerDragDropMixin demo Sandcastle Hello World Demo
Timeline
SceneModePicker
HomeButton
FullscreenButton
CesiumWidget
BaseLayerPicker
Animation