Creating an Object Directly - Not Through CZML

CesiumJS
1

Is it possible to create an object, say a ground vehicle with a billboard, label, position etc.., directly without defining it through CZML?

I and can't seem to figure it out, and can't find any examples of this.

2

Sorry, I meant to say a "Dynamic Object".

3

This pull request is just about to go into master: https://github.com/AnalyticalGraphicsInc/cesium/pull/1080 It will be part of our b20 release on Tuesday.

It is a large scale refactor to make what you want to do much much easier.

At a high level, the easiest way to do this is implement a DataSource and add it to the list of data sources in the Viewer widget. (if you’re not using the Viewer widget you can still do it easy enough using DataSourceDisplay).

In your data source, you create DynamicObjects and assign their properties. Have a look at GeoJsonDataSource.js as an example.

The code is relatively the same whether you are reading a real-time stream or just loading static data. I’m hoping to put together a tutorial/example of ingesting external data sources some time soon. I hopet his helps get you started.

4

I'm glad to hear about b20! It looks like there will be a lot of helpful changes.

I have been implementing a czmlDataSource, from which I could load CZML data into
with functions that load czmlData from an external CZML file or built in CZMl.

Ex:
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.dataSources.add(czmlDataSource);

I have also been able to create DynamicObjects directly, but I suppose my problem is defining a billboard that I can view in the scene.

Ex:
function dynamicObject()
{
    console.log("Creating a dynamic object.");
    var dynObjCol = czmlDataSource.getDynamicObjectCollection();
    var testDynObj = dynObjCol.getOrCreateObject("TestID");
}

Maybe I am not aware of the correct syntax for defining a billboard this way (I can create them as primitives easily enough).

For example, I have written a function that populates the Earth with a bunch of billboards at random locations with random images.

    //Add a lot of billboards to the scene with random images and positions.
    function GenerateBillboards(scene, ellipsoid)
    {
        //Height of the camera. Used for getting the scale the billboards should be set to on creation.
        var cameraHeight = ellipsoid.cartesianToCartographic(scene.getCamera().position).height;

        Cesium.when.all
        (
            [
                Cesium.loadImage('../images/Cesium_Logo_overlay.png'),
                Cesium.loadImage('../images/facility.gif'),
                Cesium.loadImage('../images/UpArrow.png'),
            ],
         
            // Once both images are downloaded, they are combined into one image,
            // called a texture atlas, which is assigned to a billboard-collection.
            // Several billboards can be added to the same collection; each billboard
            // references an image in the texture atlas.
            function(images)
            {
                var billboards = new Cesium.BillboardCollection();
                var textureAtlas = scene.getContext().createTextureAtlas
                ({
                    images : images
                });
                billboards.setTextureAtlas(textureAtlas);

                var numBillboards = 150;
                
                //Add billboards with random images to the scene at random locations.
                for(var i = 0; i < numBillboards; i++)
                {
                    var negOrPos = Math.random() < 0.5 ? -1 : 1;
                    var randLon = getRandomFloat(-180,180);
                    var randLat = getRandomFloat(-90,90);
                    var randImg = getRandomInt(0, 2);

                    billboards.add
                    ({
                        position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(randLon, randLat)),
                        imageIndex : randImg,
                        scale : GetBillboardScale(cameraHeight)
                    });
                }
                scene.getPrimitives().add(billboards);
            }
        );
                
    }

5

Once b20 is release today, you should be able to change your primitive code to use dynamic objects with something like the below. I didn’t run this code, but it should be pretty close to what you need.

var dynamicObject = new Cesium.DynamicObject();

dynamicObject.position = new Cesium.ConstantPositionProperty(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(randLon, randLat)));

var billboard = new Cesium.DynamicBillboard();

dynamicObject.billboard = billboard;

billboard.image = new Cesium.ConstantProperty(’…/images/Cesium_Logo_overlay.png’);

billboard.scale = new Cesium.ConstantProperty(GetBillboardScale(cameraHeight));

dynamicObjectCollection.add(dynamicObject);

Of course the added benefit is that you can change any of the ConstantProperty instances to SampledProperty or TimeIntervalCollectionProperty and add time-tagged values instead of static ones.