Animation of polylines without czml

CesiumJS
1

hi,
I wonder how to animate a polylines when time changes.

For instance, one polyline is consist of a set of points P, when time1, polyline => p1 and p2; when time2, polyline => p1, p2, p3, …, and finally, polyline will be pn-1, pn. I have tried path with czml, the points of path only can be increased, but decreased. And now, i use Primitives to draw a polyline with texture, but i don’t see any api about updating geometry of Primitives, so i have to clear all Primitives of previous time and draw them all of next time to simulate an animation. The result is, when more polylines appear, polylines will flash seriously…

Therefore, i wonder how to update a Primitive with geometry, or other plans to animate lots of polylines. It would be better with some sample code~

2

Hi Sisi,

Here’s a sandcastle example that will add to a polyline primitive: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=5cb24ba0dc0463ac420cb781ddde5d07

But unless there’s a strong reason to do so, I recommend you stick with the entity api. Here’s an example that will add more and more positions to a polyline over time.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var lon = -120;

var lat = 35;

var positions = Cesium.Cartesian3.fromDegreesArray([lon, 35, -125, 35]);

function getPositions(){

lon += 0.05;

positions.push(Cesium.Cartesian3.fromDegrees(lon, lat));

return positions;

}

var redLine = viewer.entities.add({

polyline : {

positions : new Cesium.CallbackProperty(getPositions, false),

width : 5,

material : Cesium.Color.RED

}

});

``

Hope that helps,

  • Rachel
3

hey Rachel, sorry i’m late to say thank you for the response.
I have tried to animate a polyline with api, it succeeded, while, when i animated more polylines, like 10, or more, they flashed frequently, polylineCollection makes it better, but it cannot use material combined with color and texture. I wonder if you have any suggestion about this?

4

Hi Sisi,

What do you mean? Can you provide a code example and screenshot?

Best,

  • Rachel