Displaying a polyline(with some height) in Cesium

Question

Can someone please tell me what's wrong with this piece of code?

    Cesium.Math.setRandomNumberSeed(1234);

    var viewer = new Cesium.Viewer('cesiumContainer');
    var entities = viewer.entities;
    var boxes = entities.add(new Cesium.Entity());
    var polylines = new Cesium.PolylineCollection();

    //Create the entities and assign each entity's parent to the group to which it belongs.
    for (var i = 0; i < 5; ++i) {
        var height = 100000.0 + (200000.0 * i);
        entities.add({
            parent : boxes,
            position : Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
            box : {
                dimensions : new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
                material : Cesium.Color.fromRandom({alpha : 1.0})
            }
        });
        entities.add({
            parent : polylines,
            position : Cesium.Cartesian3.fromDegrees(-86.0, 55.0, height),
            polyline : {
                width : new Cesium.ConstantProperty(2),
                material : Cesium.Color.fromRandom({alpha : 1.0}),
                followSurface : new Cesium.ConstantProperty(false)
            }
        });
    }
    viewer.zoomTo(viewer.entities);

It displays boxes at the given coordinates but when I am trying to draw a poly-line it gives this error: Uncaught TypeError: Cannot read property 'push' of undefined (on line 300 of https://cesiumjs.org/Cesium/Source/DataSources/Entity.js)

I want something like this https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Custom%20DataSource.html&label=Showcases

Thanks in advance.

Answer 1

You're mixing the Entity API (a higher-level API with trackable entities with names and descriptions) with the Primitive Graphics API (the layer below, that just displays graphics primitives).

EDIT: Looks like Scott Reynolds has also answered this for you on the mailing list, and you posted a followup question. Here I've borrowed the "vertical lines" code from Scott, removed the "parent" relationships since they appear to be not used here, and added clickable info box descriptions to all the entities.

Cesium.Math.setRandomNumberSeed(1234);

var viewer = new Cesium.Viewer('cesiumContainer');
var entities = viewer.entities;

var prevHeight = 0.0;
for (var i = 0; i < 5; ++i) {
    var height = 100000.0 + (200000.0 * i);
    entities.add({
        name : 'Box ' + i,
        description : 'This box is at height: ' + height.toLocaleString() + ' m',
        position : Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
        box : {
            dimensions : new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
            material : Cesium.Color.fromRandom({alpha : 1.0})
        }
    });
    entities.add({
        name : 'Line ' + i,
        description : 'This line is from height ' + prevHeight.toLocaleString() +
            ' m to height ' + height.toLocaleString() + ' m',
        position : Cesium.Cartesian3.fromDegrees(-86.0, 55.0, height),
        polyline : {
            positions: [
                Cesium.Cartesian3.fromDegrees(-86.0, 55.0, prevHeight),
                Cesium.Cartesian3.fromDegrees(-86.0, 55.0, height)
            ],
            width : new Cesium.ConstantProperty(2),
            material : Cesium.Color.fromRandom({alpha : 1.0}),
            followSurface : new Cesium.ConstantProperty(false)
        }
    });

    prevHeight = height;
}
viewer.zoomTo(viewer.entities);