I’ve been trying to use the PolylineGeometry primitive where I have many colored segment (~5000) and many of the segments are very close together.
I came across a problem because of these very close position points where the polyline seems to just ignore the segment.
I created a sample below that has 5 positions and 5 colors where the first 4 points are very close together and as a result no colored line segment displays.
This is ok because the user can’t zoom that close to see between the points but I would expect the first 3 colors to then get skipped but it doesn’t. The 5th point
seems to be about the minimum distance between segments for a colored line to appear but the color is green which is the first color in the array. I would expect
the color to be yellow (4th color in the array) skipping the colors that didn’t display.
The distance between the 4th and 5th point is 0.34 m and anything below that ignores the colored line segment. I thought the granularity option for the
PolylineGeometry would be a solution but it doesn’t seem to work as I would expect. Any ideas?
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var positions = ;
var colors = ;
positions.push(Cesium.Cartesian3.fromDegrees(-110.9041338, 30.5786851));
positions.push(Cesium.Cartesian3.fromDegrees(-110.9041339, 30.5786852));
positions.push(Cesium.Cartesian3.fromDegrees(-110.9041340, 30.5786853));
positions.push(Cesium.Cartesian3.fromDegrees(-110.9041341, 30.5786854));
positions.push(Cesium.Cartesian3.fromDegrees(-110.9041366, 30.5786876));
colors.push(Cesium.Color.GREEN);
colors.push(Cesium.Color.RED);
colors.push(Cesium.Color.BLUE);
colors.push(Cesium.Color.YELLOW);
colors.push(Cesium.Color.PINK);
console.log(positions.length);
console.log(colors.length);
viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.PolylineGeometry({
positions : positions,
width : 5.0,
colors : colors,
vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT,
followSurface: false,
granularity: Cesium.Math.toRadians(0.000002)
})
}),
appearance : new Cesium.PolylineColorAppearance()
}));
for (var i = 0; i < positions.length; i++) {
viewer.entities.add({
position : positions[i],
billboard :{
image : ‘…/images/facility.gif’
}
});
}
viewer.trackedEntity = viewer.entities.values[0];
console.log("Distance " + Cesium.Cartesian3.distance(positions[3], positions[4]));
``