Simplest example for loading and displaying geojson containing ellipses

CesiumJS
1

Hello,

I'm trying to find a simple example explaining how to load a set of ellipses and displaying them with Cesium.

Here is a very simple geojson I made up:

{
    "type": "FeatureCollection",
    "features": [
    {
        "type": "Feature",
        "properties": {
            "name": 1,
            "color": "#fd9826"},
        "geometry": {
            "type": "Ellipse",
            "coordinates": [-110.0,35.0],
            "semiMinorAxis": 80000.0,
            "semiMajorAxis" : 80000.0,
            "height" : 350000
        }
    }
    {
        "type": "Feature",
        "properties": {
            "name": 2,
            "color": "#1c9524"},
        "geometry": {
            "type": "Ellipse",
            "coordinates": [-120.0,45.0],
            "semiMinorAxis": 60000.0,
            "semiMajorAxis" : 60000.0,
            "height" : 150000
        }
    }]
}

The closest I could get is this code:

var viewer = new Cesium.Viewer('cesiumContainer');
var promise = Cesium.GeoJsonDataSource.load('../Apps/ess.geojson');
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
for (var i = 0; i < entities.length; i++) {
    var entity = entities[i];
        entity.ellipse = new Cesium.EllipseGraphics({
            position : Cesium.Cartesian3.fromDegrees(entity.coordinates[0],entity.coordinates[1])
            color: Cesium.Color.fromCssColorString(entity.color),
            semiMinorAxis : entity.semiMinorAxis,
            semiMajorAxis : entity.semiMajorAxis,
            height : entity.height,
     });
  }
});

Which doesn't work, and I'm kind of lost here... Do you have any suggestion in terms of examples where I could learn more about how to achieve this, or what I am doing wrong?

Thanks a lot!

Rodolphe

2

You are on the right track, but your GeoJSON is poorly formed. There is no ellipse geometry type, but that’s okay because you do need the location for the entity. The ellipse’s properties just need to be a property of the feature. Here’s a modified version of your example:

var geojson = {

"type": "FeatureCollection",

"features": [{

        "type": "Feature",

        "geometry": {

            "type": "Point",

            "coordinates": [-110.0, 35.0]

        },

        "properties": {

            "prop0": {

                "type": "ellipse",

                "semiMajorAxis": 60000.0,

                "semiMinorAxis": 60000.0,

                "height": 150000.0,

"color": "#fd9826"

            }

        }

    }

]

};

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var promise = Cesium.GeoJsonDataSource.load(geojson);

promise.then(function(dataSource) {

viewer.dataSources.add(dataSource);

var entities = dataSource.entities.values;

for (var i = 0; i < entities.length; i++) {

    var entity = entities[i];

    if (entity.properties.hasProperty('prop0')) {

        var prop0 = entity.properties.prop0;

        var prop0Value = prop0.valueOf();

        if  (prop0Value.type ==='ellipse') {

            entity.ellipse = new Cesium.EllipseGraphics({

                semiMinorAxis: prop0Value.semiMinorAxis,

                semiMajorAxis: prop0Value.semiMajorAxis,

height: prop0Value.height,

                material: Cesium.Color.fromCssColorString(prop0Value.color)

            });

        }

    }

}

});

``

Hope that helps!

Scott

3

Hi Scott,

Thanks so much, this is fantastic! One more thing though: with this method, I have an extra icon appearing under the ellipse, could this be due to the "Point" definition in the geojson? Here's a screen capture: https://www.dropbox.com/s/aa84skh0jaab5qg/Capture%20d’écran%202017-07-27%20à%2009.30.07.jpg?dl=0

Thanks once again!

Rodolphe

4

Yes. The default behavior for a point geometry is to place a billboard at that location. You can remove it by setting the entity’s billboard object to null.

5

Excellent, thanks!