GeoJSON datasource with Cesium widget

CesiumJS
1

I am trying to display GeoJSON data using the CesiumWidget. I have the following code which uses the GeoJSON sandcastle example as a starting point. When running the code the following console statements are printed in the console.

# of entities loaded = 182
Datasource added successfully
Display updated successfully

While looking at the forum for help, I found older posts which indicated that I needed to update the datsourceDisplay. Which I am know doing.

Currently the code does not generate any error message or exceptions however, entities are not being rendered. Does anybody know what I am doing wrong?

Thanks in advance

Jerry

P.S. Sandcastle is a great tool!!

2

Update needs to be called every frame, not just once. Remove the last two lines of your function and put them into the clock callback instead.

widget.clock.onTick.addEventListener(function(clock){

dataSourceDisplay.update(clock.currentTime);

});

3

I am trying to display GeoJSON data using the CesiumWidget. I have the following code which uses the GeoJSON sandcastle example as a starting point. When running the code the following console statements are printed in the console.

# of entities loaded = 182
Datasource added successfully
Display updated successfully

While looking at the forum for help, I found older posts which indicated that I needed to update the datsourceDisplay. Which I am know doing.

Currently the code does not generate any error message or exceptions however, entities are not being rendered. Does anybody know what I am doing wrong?

Thanks in advance

Jerry

P.S. Sandcastle is a great tool!!

------------------------------------------------------------------------------

var widget = new Cesium.CesiumWidget('cesiumContainer');

var dataSourceCollection = new Cesium.DataSourceCollection();
var datasource = new Cesium.GeoJsonDataSource();

var dataSourceDisplay = new Cesium.DataSourceDisplay({
    scene: widget.scene,
    dataSourceCollection : dataSourceCollection
});

//Load the document into the data source and then set custom graphics
datasource.loadUrl('../../SampleData/ne_10m_us_states.topojson').then(function() {
    //Get the array of entities
    var entities = datasource.entities.entities;

    console.warn('# of entities loaded = ' + entities.length);

    var colorHash = {};
    for (var i = 0; i < entities.length; i++) {
        //For each entity, create a random color based on the state name.
        //Some states have multiple entities, so we store the color in a
        //hash so that we use the same color for the entire state.
        var entity = entities[i];
        var name = entity.name;
        var color = colorHash[name];
        if (!color) {
            color = Cesium.Color.fromRandom({
                alpha : 1.0
            });
            colorHash[name] = color;
        }

        //Set the polygon material to our random color.
        entity.polygon.material = Cesium.ColorMaterialProperty.fromColor(color);
        //Outline each polygon in black.
        entity.polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);

        //Extrude the polygon based on the state's population. Each entity
        //stores the properties for the GeoJSON feature it was created from
        //Since the population is a huge number, we divide by 50.
        entity.polygon.extrudedHeight = new Cesium.ConstantProperty(entity.properties.Population / 50.0);
    }
    
    dataSourceCollection.add(datasource);
    console.warn('Datasource added successfully');
    
    dataSourceDisplay.update(new Cesium.JulianDate());
    console.warn('Display updated successfully');
});

I am trying to display GeoJSON data using the CesiumWidget. I have the following code which uses the GeoJSON sandcastle example as a starting point. When running the code the following console statements are printed in the console.

# of entities loaded = 182
Datasource added successfully
Display updated successfully

While looking at the forum for help, I found older posts which indicated that I needed to update the datsourceDisplay. Which I am know doing.

Currently the code does not generate any error message or exceptions however, entities are not being rendered. Does anybody know what I am doing wrong?

Thanks in advance

Jerry

P.S. Sandcastle is a great tool!!

------------------------------------------------------------------------------

var widget = new Cesium.CesiumWidget('cesiumContainer');

var dataSourceCollection = new Cesium.DataSourceCollection();
var datasource = new Cesium.GeoJsonDataSource();

var dataSourceDisplay = new Cesium.DataSourceDisplay({
    scene: widget.scene,
    dataSourceCollection : dataSourceCollection
});

//Load the document into the data source and then set custom graphics
datasource.loadUrl('../../SampleData/ne_10m_us_states.topojson').then(function() {
    //Get the array of entities
    var entities = datasource.entities.entities;

    console.warn('# of entities loaded = ' + entities.length);

    var colorHash = {};
    for (var i = 0; i < entities.length; i++) {
        //For each entity, create a random color based on the state name.
        //Some states have multiple entities, so we store the color in a
        //hash so that we use the same color for the entire state.
        var entity = entities[i];
        var name = entity.name;
        var color = colorHash[name];
        if (!color) {
            color = Cesium.Color.fromRandom({
                alpha : 1.0
            });
            colorHash[name] = color;
        }

        //Set the polygon material to our random color.
        entity.polygon.material = Cesium.ColorMaterialProperty.fromColor(color);
        //Outline each polygon in black.
        entity.polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);

        //Extrude the polygon based on the state's population. Each entity
        //stores the properties for the GeoJSON feature it was created from
        //Since the population is a huge number, we divide by 50.
        entity.polygon.extrudedHeight = new Cesium.ConstantProperty(entity.properties.Population / 50.0);
    }
    
    dataSourceCollection.add(datasource);
    console.warn('Datasource added successfully');
    
    dataSourceDisplay.update(new Cesium.JulianDate());
    console.warn('Display updated successfully');
});

4

Are you on the latest version of Cesium? Copy and pasting the exact code above into Sandcastle works as expected. Here’s a screenshot.

image.png
image.png960×670 351 KB

5

Matthew,

You are correct it is working fine I was not waiting long enough (old slow computer at home).

Thanks again!

Jerry