Animate a polyline to move between different coordinates

CesiumJS
1

Hi everyone,

I am trying to create an animation with Polylines moving from one coordinate to the other over time.

So I have each polyline is an entity. And Each has an array points of [[time, lat, long, height], ...].

My code is roughly as follow:

var samples = new Cesium.SampledPositionProperty();
var position = Cesium.Cartesian3.fromDegrees(long, lat, height, ellipsoid, cartesian3Scratch);
samples.addSample(Cesium.JulianDate.fromIso8601(time), position);

...

var polyline = new Cesium.PolylineGraphics();
polyline.followSurface = new Cesium.ConstantProperty(false);
polyline.positions = new Cesium.PositionPropertyArray(samples);
..
entity.polyline = polyline
entities.add(entity);

The problem is when I try to animate with this, only tip of the polyline moves to the new position. The root of it stays the same. You can see it from here: http://staging.nova.scapp.io/testing.html

How can I make the whole polyline move ?

Thank you very much.

Khue.

2

Hi,

I figured out how to do this. I need to have both the surface position and the height position of a line as SampledPositionProperty, and then add samples over time to the property.

And when creating the polyline, polyline.positions = Cesium.PositionPropertyArray([surface, height]) in which surface and height are the respective SampledPositionProperty.

Cheers,

Khue.