CesiumViewerWidget - Cesium Documentation

new CesiumViewerWidget

This Dojo widget wraps the full functionality of Cesium Viewer.

Parameters:

Name	Type	Description
`options`	Object	A list of options to pre-configure the widget. Names matching member fields/functions will override the default values.

Members

autoStartRenderLoop :Boolean

If true, CesiumViewerWidget#startRenderLoop will be called automatically at the end of CesiumViewerWidget#startup.

Default Value:

true

dayImageUrl :String

The URL for a daytime image on the globe.

enableDragDrop :Boolean

Allow the user to drag-and-drop CZML files into this widget. This is read-only after construction.

Default Value:

false

enableWebGLDebugging :Boolean

Check for WebGL errors after every WebGL API call. Enabling this debugging feature comes at a substantial performance cost, halting and restarting the graphics pipeline hundreds of times per frame. But it can uncover problems that are otherwise very difficult to diagnose. This property is read-only after construction.

Default Value:

false

endUserOptions :Object

An object containing settings supplied by the end user, typically from the query string of the URL of the page with the widget.

Examples

var ioQuery = require('dojo/io-query');
var endUserOptions = {};
if (window.location.search) {
    endUserOptions = ioQuery.queryToObject(window.location.search.substring(1));
}

var endUserOptions = {
    'source' : 'file.czml', // The relative URL of the CZML file to load at startup.
    'lookAt' : '123abc',    // The CZML ID of the object to track at startup.
    'stats'  : 1,           // Enable the FPS performance display.
    'debug'  : 1,           // Full WebGL error reporting at substantial performance cost.
};

fullscreenElement :Object

The HTML element to place into fullscreen mode when the corresponding button is pressed. If undefined, only the widget itself will go into fullscreen mode. By specifying another container, such as document.body, this property allows an application to retain any overlaid or surrounding elements when in fullscreen.

Default Value:

undefined

mapStyle :BingMapsStyle

The map style for streaming imagery. This is read-only after construction.

Default Value:

BingMapsStyle.AERIAL

See:

CesiumViewerWidget#setStreamingImageryMapStyle

resizeWidgetOnWindowResize :Boolean

Register this widget's resize handler to get called every time the browser window resize event fires. This is read-only after construction. Generally this should be true for full-screen widgets, and true for fluid layouts where the widget is likely to change size at the same time as the window. The exception is, if you use a Dojo layout where this widget exists inside a Dojo ContentPane or similar, you should set this to false, because Dojo will perform its own layout calculations and call this widget's resize handler automatically. This can also be false for a fixed-size widget. If unsure, test the widget with this set to false, and if window resizes cause the globe to stretch, change this to true.

Default Value:

true

See:

CesiumViewerWidget#resize

showSkyBox :Boolean

Determines if a sky box with stars is drawn around the globe. This is read-only after construction.

Default Value:

true

See:

SkyBox

showSkyBox :Boolean

Determines if a sky box with stars is drawn around the globe. This is read-only after construction.

Default Value:

true

See:

SkyBox

useStreamingImagery :Boolean

Enable streaming Imagery. This is read-only after construction.

Default Value:

true

See:

CesiumViewerWidget#enableStreamingImagery

Methods

addCzml

Add CZML data to the viewer.

Parameters:

Name	Type	Description
`czml`	CZML	The CZML (as objects) to be processed and added to the viewer.
`source`	string	The filename or URI that was the source of the CZML collection.
`lookAt`	string	Optional. The ID of the object to center the camera on.

See:

CesiumViewerWidget#loadCzml

centerCameraOnObject

Have the camera track a particular object.

Parameters:

Name	Type	Description
`selectedObject`	Object	The object to track, or `undefined` to stop tracking.

centerCameraOnPick

Have the camera track a particular object based on the result of a pick.

Parameters:

Name	Type	Description
`selectedObject`	Object	The object to track, or `undefined` to stop tracking.

enableStatistics

Enable or disable the FPS (Frames Per Second) perfomance display.

Parameters:

Name	Type	Description
`showStatistics`	Boolean	`true` to enable it.

enableStreamingImagery

Enable or disable streaming imagery, and update the globe.

Parameters:

Name	Type	Description
`value`	Boolean	`true` to enable streaming imagery.

See:

CesiumViewerWidget#useStreamingImagery

handleDrop

This function is called when files are dropped on the widget, if drag-and-drop is enabled.

Parameters:

Name	Type	Description
`event`	Object	The drag-and-drop event containing the dropped file(s).

highlightObject

Highlight an object in the scene, usually in response to a click or hover.

Parameters:

Name	Type	Description
`selectedObject`	Object	The object to highlight, or `undefined` to un-highlight.

initializeFrame

Initialize the current frame.

Parameters:

Name	Type	Description
`currentTime`	JulianDate	The date and time in the scene of the frame to be rendered

loadCzml

Asynchronously load and add CZML data to the viewer.

Parameters:

Name	Type	Description
`source`	string	The URI to load the CZML from.
`lookAt`	string	Optional. The ID of the object to center the camera on.

See:

CesiumViewerWidget#addCzml

onLeftDrag

Override this function to be notified when the left mouse button is dragged.

Parameters:

Name	Type	Description
`The`	Object	object with the start and end position of the mouse.

onLeftMouseDown

Override this function to be notified when the left mouse button is pressed down.

Parameters:

Name	Type	Description
`The`	Object	object with the position of the mouse.

onLeftMouseUp

Override this function to be notified when the left mouse button is released.

Parameters:

Name	Type	Description
`The`	Object	object with the position of the mouse.

onObjectLeftDoubleClickSelected

Override this function to be notified when an object is left-double-clicked.

Parameters:

Name	Type	Description
`selectedObject`	Object	The object that was selected, or `undefined` to de-select.

onObjectMousedOver

Override this function to be notified when an object hovered by the mouse.

Parameters:

Name	Type	Description
`selectedObject`	Object	The object that was hovered, or `undefined` if the mouse moved off.

onObjectRightClickSelected

Override this function to be notified when an object is right-clicked.

Parameters:

Name	Type	Description
`selectedObject`	Object	The object that was selected, or `undefined` to de-select.

onObjectSelected

Override this function to be notified when an object is selected (left-click).

Parameters:

Name	Type	Description
`selectedObject`	Object	The object that was selected, or `undefined` to de-select.

onRightMouseDown

Override this function to be notified when the right mouse button is pressed down.

Parameters:

Name	Type	Description
`The`	Object	object with the position of the mouse.

onRightMouseUp

Override this function to be notified when the right mouse button is released.

Parameters:

Name	Type	Description
`The`	Object	object with the position of the mouse.

onSetupError

This function will get a callback in the event of setup failure, likely indicating a problem with WebGL support or the availability of a GL context.

Parameters:

Name	Type	Description
`widget`	Object	A reference to this widget
`error`	Object	The exception that was thrown during setup

onZoom

Override this function to be notified when the right mouse button is dragged or mouse wheel is zoomed.

Parameters:

Name	Type	Description
`The`	Object	object with the start and end position of the mouse.

removeAllCzml

Removes all CZML data from the viewer.

render

Render the widget's scene.

resize

This function must be called when the widget changes size. It updates the canvas size, camera aspect ratio, and viewport size.

See:

CesiumViewerWidget#resizeWidgetOnWindowResize

setLogoOffset

Set the positional offset of the logo of the streaming imagery provider.

Parameters:

Name	Type	Description
`logoOffsetX`	Integer	The horizontal offset in screen space
`logoOffsetY`	Integer	The vertical offset in screen space

setStreamingImageryMapStyle

Change the streaming imagery type, and update the globe.

Parameters:

Name	Type	Description
`value`	BingMapsStyle	the new map style to use.

See:

CesiumViewerWidget#mapStyle

setTimeFromBuffer

Apply the animation settings from a CZML buffer.

showSkyAtmosphere

Enable or disable the "sky atmosphere" effect, which displays the limb of the Earth (seen from space) or blue sky (seen from inside the atmosphere).

Parameters:

Name	Type	Description
`show`	Boolean	`true` to enable the effect.

startRenderLoop

This is a simple render loop that can be started if there is only one CesiumViewerWidget on your page. If you wish to customize your render loop, avoid this function and instead use code similar to one of the following examples.

Examples

// This takes the place of startRenderLoop for a single widget.

var animationController = widget.animationController;
function updateAndRender() {
    var currentTime = animationController.update();
    widget.initializeFrame(currentTime);
    widget.update(currentTime);
    widget.render();
    requestAnimationFrame(updateAndRender);
}
requestAnimationFrame(updateAndRender);

// This example requires widget1 and widget2 to share an animationController
// (for example, widget2's constructor was called with a copy of widget1's
// animationController).

function updateAndRender() {
    var currentTime = animationController.update();
    widget1.initializeFrame(currentTime);
    widget2.initializeFrame(currentTime);
    widget1.update(currentTime);
    widget2.update(currentTime);
    widget1.render();
    widget2.render();
    requestAnimationFrame(updateAndRender);
}
requestAnimationFrame(updateAndRender);

// This example uses separate animationControllers for widget1 and widget2.
// These widgets can animate at different rates and pause individually.

function updateAndRender() {
    var time1 = widget1.animationController.update();
    var time2 = widget2.animationController.update();
    widget1.initializeFrame(time1);
    widget2.initializeFrame(time2);
    widget1.update(time1);
    widget2.update(time2);
    widget1.render();
    widget2.render();
    requestAnimationFrame(updateAndRender);
}
requestAnimationFrame(updateAndRender);

See:

startup

Call this after placing the widget in the DOM, to initialize the WebGL context, wire up event callbacks, begin requesting CZML, imagery, etc.

See:

CesiumViewerWidget#autoStartRenderLoop

update

Call this function prior to rendering each animation frame, to prepare all CZML objects and other settings for the next frame.

Parameters:

Name	Type	Description
`currentTime`	JulianDate	The date and time in the scene of the frame to be rendered

viewHome

Reset the camera to the home view for the current scene mode.