学步园

Dynamic Scene

Dynamic Scene builds on top of the previous three layers to enable data-driven visualization, primarily via the processing of CZML, a new JSON based schema for describing a time-dynamic graphical scene.

Rather than manually update primitives every frame, Dynamic Scene allows us to load or stream our data into a collection of high-level
DynamicObjects, which are then rendered using Visualizers. A single update call is all that's required to update the entire scene to a new time.

The code below is all that's needed to load and visualize any non-streaming CZML document into any Cesium based application.

//Create a scene
var scene = new Scene(document.getElementById("canvas"));
//Create a DynamicObjectCollection to contain the objects from CZML
var dynamicObjectCollection = new DynamicObjectCollection();
//Create the standard CZML visualizer collection
var visualizers = VisualizerCollection.createCzmlStandardCollection(scene, dynamicObjectCollection);
//Create a Clock object to drive time.
var clock = new Clock();
//Download and parse a CZML file asynchronously
var czmlUrl = 'http://cesiumjs.org/someFile.czml';
getJson(czmlUrl).then(function(czml) {
    //Process the CZML, which populates the collection with DynamicObjects
    processCzml(czml, dynamicObjectCollection, czmlUrl);
    //Figure out the time span of the data
    var availability = dynamicObjectCollection.computeAvailability();
    clock.startTime = availability.start;
    clock.stopTime = availability.stop;
});

After the initial set-up, we call update in our requestAnimationFrame callback.

var currentTime = clock.tick();
visualizers.update(currentTime);

While the above example is only nine lines of code ignoring comments, there's obviously a lot of work being done under-the-hood to parse and visualize the data. There's also plenty of room for extending and customizing behavior for each use case. The primary
concept not seen in the above code is DynamicObject, which are created by the call to
processCzml and populate the dynamicObjectCollection. These object in turn, contain instances of
DynamicProperty, which map to a CZML standard object and in most cases have a direct analogue to a Cesium primitive, e.g.,
Billboard. For example, the code below gets all of the objects in the collection, sees if they have a
DynamicBillboard instance with a DynamicProperty indicating scale, and retrieves the scale value for the current time.

var dynamicObjects = dynamicObjectCollection.getObjects();
for (var i = 0, len = dynamicObjects.length; i < len; i++) {
    var dynamicBillboard = dynamicObject[i].billboard;
    if (typeof dynamicBillboard !== 'undefined') {
        var scale = dynamicBillboard.scale;
        if (typeof scale !=== 'undefined') {
            var currentScale = scale.getValue(currentTime);
        }
    }
}

Even though the above code isn't very useful on it's own, it's easy to see how an object could be written which maintains a
BillboardCollection primitive that mirrors the data in the dynamicObjectCollection at a given time; in fact this is exactly what
DynamicBillboardVisualizer does and it is a member of the standard
VisualizerCollection created by the method of a similar name in the first example.

A full overview of CZML, including its structure and schema, as well as an in-depth overview of the Cesium client-side implementation, can be found in the

CZML Guide.