Plotting Spatial Data with respect to Elevation

CesiumJS
1

I am looking at for plotting data in the elevation dimension, this would be useful for things like plotting temperature with respect to elevation ect …

I am exploring a couple of options, one with walls, the other is with polygons. In google earth I used polygons

Any comments on which one would be more efficient for cesium to render, issues, or future solutions ect… would be appreciated

One thing I noticed is that the polygon approach has issues with a geometry that crosses over or comes into contact with itself

(note the point with longitude = -115.0009999, using -115.0010 causes issues )

the following should run in sandbox

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

var step = 1,

top = new Cesium.Cartographic.fromDegrees(-115.0010, 44.0, 36.0),

bottom = new Cesium.Cartographic.fromDegrees(-115.0010, 44.0, 12.0);

var points = [

        new Cesium.Cartographic.fromDegrees(-115.0006, 44.0, 36.0),

        new Cesium.Cartographic.fromDegrees(-115.0003, 44.0, 35.0),

        new Cesium.Cartographic.fromDegrees(-115.0009, 44.0, 34.0),

        new Cesium.Cartographic.fromDegrees(-115.0007, 44.0, 33.0),

        new Cesium.Cartographic.fromDegrees(-115.0007, 44.0, 32.0),

        new Cesium.Cartographic.fromDegrees(-115.0006, 44.0, 31.0),

        new Cesium.Cartographic.fromDegrees(-115.0000, 44.0, 30.0),

        new Cesium.Cartographic.fromDegrees(-115.0004, 44.0, 29.0),

        new Cesium.Cartographic.fromDegrees(-115.0003, 44.0, 28.0),

        new Cesium.Cartographic.fromDegrees(-115.0002, 44.0, 27.0),

        new Cesium.Cartographic.fromDegrees(-115.0006, 44.0, 26.0),

        new Cesium.Cartographic.fromDegrees(-115.0003, 44.0, 25.0),

        new Cesium.Cartographic.fromDegrees(-115.0006, 44.0, 24.0),

        new Cesium.Cartographic.fromDegrees(-115.0009999, 44.0, 23.0),

        new Cesium.Cartographic.fromDegrees(-115.0009, 44.0, 22.0),

        new Cesium.Cartographic.fromDegrees(-115.0007, 44.0, 21.0),

        new Cesium.Cartographic.fromDegrees(-115.0007, 44.0, 20.0),

        new Cesium.Cartographic.fromDegrees(-115.0006, 44.0, 19.0),

        new Cesium.Cartographic.fromDegrees(-115.0000, 44.0, 18.0),

        new Cesium.Cartographic.fromDegrees(-115.0004, 44.0, 17.0),

        new Cesium.Cartographic.fromDegrees(-115.0003, 44.0, 16.0),

        new Cesium.Cartographic.fromDegrees(-115.0002, 44.0, 15.0),

        new Cesium.Cartographic.fromDegrees(-115.0006, 44.0, 14.0),

        new Cesium.Cartographic.fromDegrees(-115.0003, 44.0, 13.0)];

points.forEach(

function(p, i){

     viewer.entities.add({

            wall : { positions : [ 

            Cesium.Cartesian3.fromRadians(top.longitude- 0.00002, top.latitude  , p.height + step/2 ),

            Cesium.Cartesian3.fromRadians(p.longitude- 0.00002, p.latitude  , p.height + step/2 )

                        ],

                    minimumHeights : [p.height - step/2  , p.height - step/2 ],

                    material : Cesium.Color.RED

            }

     });

}

);

points.push(bottom);

points.push(top);

var p = viewer.entities.add({

            polygon : {

                 hierarchy : (ellipsoid.cartographicArrayToCartesianArray(points)),

                material : Cesium.Color.BLUE,

                perPositionHeight : true

            }

});

viewer.zoomTo(viewer.entities);

2

If you have a lot of complex polygons (i.e. polygons that cross over themselves), then walls would probably be better in the short term. Eventually we will revisit filling complex polygons in Cesium, but it’s actually a fairly complicated problem.

As far as performance goes, since Walls are easier to triangulate, load times would probably be faster than polygons, but that also assumes you have a lot of data. For many use cases they’ll be no noticeable differences. Once the data is loaded performance should be pretty identical either way.

3

first line needs to include ellipsoid

change from:

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

to

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

ellipsoid =  viewer.scene.globe.ellipsoid;
4

Matt

Thanks for the info.

I have a lot of data, typically 40 points per meter of vertical representation, and typically 25-30 meters per location but ranging up to 200 meters of vertical data per sounding location

And usually 10 - 50 sounding locations shown at a time.

At the moment I have implemented a polygon solution that mimics the Google Earth implementation. In part due to the data being run through a polyline simplification library to reduce point counts before the geoRenderer (Earth or Cesium) is called.

For the most part it works well and I’m happy with performance. The one rub is I have is that I have a user option to toggle a behavior where the charts rotate with respect to the heading so that the charts face the user , pointing in a direction perpendicular to the heading.

Even with this turned on things work well in chrome, and the newest version of firefox.

With the google earth plugin I was able to batch up all the commands for the changes that would occur for adding removing items with:

var runBatch = function (commands) {

    google.earth.executeBatch(ge, function () {

        commands.forEach(function (c) {

            c();

        });

    });

};

In cesium I’m using the following, and suggestions for another approach

var runBatch = function (commands) {

    viewer.useDefaultRenderLoop = false;

    commands.forEach(function (c) {

        c();

    });

    setTimeout(function () {

        viewer.useDefaultRenderLoop = true;

    }, 500);

};