animate_polyline.md

Here's what I'm doing to animate a linestring over time. It add points to the front while removing them from the tail. Think snake

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

var positions = [];

function randomInRange(from, to) {
  return Math.random() * (to - from) + from;
}

function pushRandomPosition() {
  var lat = randomInRange(-90, 90);
  var lon = randomInRange(-180, 180);
  var pos = new Cesium.Cartesuan3.fromDegrees(lat, lon);
  positions.push(pos);
}

for (var i = 0; i < 10; i++) {
  pushRandomPosition();
}

var entity = viewer.entities.add({
  name: 'my_line',
  polyline: {
    positions: positions,
    material:  Cesium.Color.RED
  }
});

setInterval(function () {

  // add to front
  pushRandomPosition();

  // remove from end
  positions.shift();

  // update
  entity.polyline.positions = 
      new Cesium.ConstantProperty(positions);

}, 1000);

I'm batching together updates and wrapping them in:

viewer.entities.suspendEvents();

// batch update

viewer.entities.resumeEvents();

I'm having issues when increasing the update interval. It freezes and/or the lines start flickering.

• Is there a more efficient way to do this?
• Should I create a polyline for each segment of the line so only the segments that need to be updated are redrawn?
• Is there an event I can listen for that lets me know that rendering is done and it's ready for more?