frameend event

CesiumJS
1

I’m animating a polyline over time by adding points to the head and 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);

To help with performance, I’m batching the updates together:

viewer.entities.suspendEvents();

// batch update

viewer.entities.resumeEvents();

I’m migrating from GoogleEarth, and there I would wait for the frameend event to know when to start the next batch.

Does cesium have something similar? I’m currently just throttling it.

2

Check http://analyticalgraphicsinc.github.io/cesium-google-earth-examples/examples/frameAnimation.html and the other info on http://analyticalgraphicsinc.github.io/cesium-google-earth-examples/ and http://cesiumjs.org/for-google-earth-developers.html

Willem

3

You dan use the Cesium clock ticks, see http://analyticalgraphicsinc.github.io/cesium-google-earth-examples/examples/frameAnimation.html
Willem

4

Scene has a postRender event you can hook into to so that your batching can work similar to the prior Google Earth application.

http://cesiumjs.org/Cesium/Build/Documentation/Scene.html?classFilter=sce

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Scene.js#L712

Let me know if that works out for you.

-Mike lp