Trouble with polylines

CesiumJS
1

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 ofhttps://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.

2

The crash is caused by attempting to use a PolylineCollection as the parent of an entity. You can eliminate the crash by changing line 6 to

var polylines = entities.add(new Cesium.Entity());

``

At which point you will need to supply positions to the PolylineGraphics object to have a line drawn.

Scott

3

Thank you so much.
I want a vertical line. Can you please help me with that.

4

Below you will find code to draw a polyline from one height to the next, similar to what you did with the boxes.

Cesium.Math.setRandomNumberSeed(1234);

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

var entities = viewer.entities;

var boxes = entities.add(new Cesium.Entity());

var polylines = entities.add(new Cesium.Entity());

//Create the entities and assign each entity's parent to the group to which it belongs.

var prevHeight = 0.0;

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 : {

            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);

``

5

Thank you so much! You made my day.

6

How can I display tooltip when I hover over the polyline?

7

onHover is going to be a difficult proposition because of the expense of auto picking at each pixel the mouse hovers over. You’re better off with a click event for triggering a tooltip.

8

Can i display stacked bars in cesium?
I will use a poly-line with different width but how to display different colors as in this
https://www.google.com.pk/search?q=stacked+bars&biw=1920&bih=955&source=lnms&tbm=isch&sa=X&ei=KhZoVaTYOdLkuQS-goLIAg&ved=0CAYQ_AUoAQ#imgrc=gf73VpC1sohVlM%3A%3Bs-loaRVabg2h1M%3Bhttp%3A%2F%2Fthedailyviz.com%2Fwp-content%2Fuploads%2F2012%2F08%2Fguns-620x415.png%3Bhttp%3A%2F%2Fvizwiz.blogspot.com%2F2012%2F08%2Fdisplaying-time-series-data-stacked.html%3B620%3B415

9

I don’t see why not :slight_smile:

you could do this in 1 of 2 ways that I can think of off the top of my head.

  • Custom Canvas on Material on a single geometry
  • Multiple Geometries that have their position adjusted accordingly.
    If your going to be displaying charts, presumably on a billboard or overlay, I personally would recommend the canvas route.

Anyone else have an alternative or recommendation?