Search code examples
javascriptcesiumjs

Polyline not showing, it does show when chopped in smaller lines


I'm trying to show a line but when I initiate the polyline like this nothing shows:

var geopositions = [];

for (var i = 0; i < c.geo.length; i++) {
    var g = c.geo[i];
    geopositions.push(parseFloat(g.lon));
    geopositions.push(parseFloat(g.lat));
}

var line = {
    positions: Cesium.Cartesian3.fromDegreesArray(geopositions),
    width: 1,
    id: "C" + c.id,
    material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.fromBytes(255, 0, 0, 255)
    }),
    show: true
}
var coll = new Cesium.PolylineCollection();
coll.add(line);
primitives.add(coll);

So I thought I'd try to draw lines between all the points of the line (the points in c.geo) like so:

var collection = new Cesium.PolylineCollection();
var prev = null;
for (var j = 0; j < c.geo.length; j++) {
    var geo = c.geo[j];
    if (prev) {
        collection.add(
            {
                positions: Cesium.Cartesian3.fromDegreesArray([
                    parseFloat(prev.lon), parseFloat(prev.lat),
                    parseFloat(geo.lon), parseFloat(geo.lat)]),
                width: 2,
                material: Cesium.Material.fromType('Color', {
                    color: Cesium.Color.fromBytes(0, 180, 0, 255)
                })
            }
        );
    }
    prev = geo;
}
primitives.add(collection);

For some reason this does show the line. I can't find the reason why this would be the case and don't understand why a list of lines does show and a standard polyline doesn't show. Does anyone know how to show the line without chopping the line up in small polylines?


Solution

  • I fixed the problem.

    Apparently the Cesium.Polyline doesn't appreciate two consecutive coordinates (both lat and lon) that are exactly the same. The problem seems to be solved by removing the extra coordinates.