How to display a polyline collection in Cesium?

Question

I must be doing something simply wrong because I am not sure after reading the documents how to show a polyline collection in Cesium. I am not explicitly seeing any method or tutorial in the documentation here about displaying the polyline collection. Nor are there any tutorials in the sand box that I can find that seem more on point that this one, which only displays singular polylines with

viewer.entites.add(Polyline)

I have tried using the example code for PolylineCollection's add (and suggestion for iteration then toggling) in this sandbox, but nothing is displayed, and no errors are shown:

// Create a polyline collection with two polylines
var polylines = new Cesium.PolylineCollection();
polylines.add({
  positions : Cesium.Cartesian3.fromDegreesArray([
    -75.10, 39.57,
    -77.02, 38.53,
    -80.50, 35.14,
    -80.12, 25.46]),
  width : 2
});

polylines.add({
  positions : Cesium.Cartesian3.fromDegreesArray([
    -73.10, 37.57,
    -75.02, 36.53,
    -78.50, 33.14,
    -78.12, 23.46]),
  width : 4
});
// Toggle the show property of every polyline in the collection
var len = polylines.length;
for (var i = 0; i < len; ++i) {
  var p = polylines.get(i);
  p.show = true;
}

I'm not sure what other means the documentation would point me towards to render these. Any help is appreciated.

Answer 1

You're mixing Cesium API layers here. Cesium has 2 different layers of public API, an "Entity" layer and a "Primitive" layer. The Primitive layer is for graphics primitives: A whole collection of polylines is effectively a single graphics primitive (internally, a single "draw call"), a collection of billboards is another single primitive, etc. An "Entity" is for a more high-level concept of an object or vehicle, for example a single truck entity may have a billboard, a label, and a polyline that are all showing where the truck is and where it's been. A collection of separate entities will share one collection of billboards, plus one collection of polylines, etc., for graphics performance reasons.

Typically it's recommended to use the Entity layer where possible or practical, as that lets you think in terms of real-world objects instead of collections of graphics primitives. But sometimes, you have such a large collection of static primitives that it's more performant to simply submit that collection directly.

In the demo you linked, the code there is creating a number of entities, and attaching a polyline to each one. But, in the code you've posted, you're manually creating PolylineCollection, and trying to display it. So to fix your code, remove this line:

viewer.entites.add(Polyline)

and add this line:

viewer.scene.primitives.add(polylines);

Note that polylines is declared in your code, but Polyline is just a class. Also note that we're adding the polylineCollection as a scene.primitive, not an entity.

Depending on what you're really using this for, it may or may not be better to scrap your code here and re-copy the entity demo code you linked to, and use that form instead.