How to animate polyline?

CesiumJS
1

Say I have a polyline of 10 points, each of them with a time field.
Is there a basic example of how to make it such that the polyline segments show up as the timeslider gets to them programatically? Conversely, if the time slider is moved to the left, points would disappear.

I have 2 separate polylines, each with different times that I want to be able to add to cesium to animate. Is this done with a single entity per polyline? Or is is it a single entity per segment? Or is it primitives I should be using for better performance?

2

It depends on what you mean by animate. Do you have a set of intervals and want the line to change depending on what interval youā€™re in? Or do you want to sooth animate the line as individual vertices along it change? In both cases, you only need one entity with one polyline. Itā€™s the polyline.positions property that actually controls the time-dynamicness of it. If you want intervals, you can just use TimeIntervalCollectionProperty and assign one array of positions to each interval you have data for. In the latter case, you can either PositionPropertyArray, which would allow you to specify a Property for each vertex position. For example, you could have an array of position properties that are from other entities, which allows you to then draw an animated line connected 2 entities, like simple.czml does.

If you can provide more info about your use case, I can probably point you to some sample code.

3

I want to smooth animate the line as individual vertices along it show up as each time point is hit. So given say 10 individual vertices exist for polylineA, each with a specific time associated with it. I want to be able to slide the timeslider to show the polyline growing in length as each individual verticeā€™s time is hit. Likewise, if the timeslider were slid tot he left, then the polyline grows shorter is the ā€œBird/bulletinā€ is reversing/rewinding.

I have two polylines that I want to do this with, each with separate times. If there is some good sample codes on this, I would most appreciate it.
I would prefer to do this programatically if possible without the use of CZML. Though I am slightly curious about it.

4

Hereā€™s a very simple example that you can paste into Sandcastle. Itā€™s usually a good idea to set entity.availability as well, but I didnā€™t do that here. You can add as many samples or points on the line as you like. (as well as any additional styling).

var viewer = new Cesium.Viewer(ā€˜cesiumContainerā€™);

var start = Cesium.JulianDate.fromDate(new Date(Date.now()));

var stop = Cesium.JulianDate.addSeconds(start, 14400, new Cesium.JulianDate());

var point1 = new Cesium.SampledPositionProperty();

point1.addSample(start, Cesium.Cartesian3.fromDegrees(0, 0, 0));

point1.addSample(stop, Cesium.Cartesian3.fromDegrees(1, 0, 0));

var point2 = new Cesium.SampledPositionProperty();

point2.addSample(start, Cesium.Cartesian3.fromDegrees(1, 0, 0));

point2.addSample(stop, Cesium.Cartesian3.fromDegrees(0, 1, 0));

var entity = viewer.entities.add({

polyline : {

positions : new Cesium.PositionPropertyArray([point1, point2])

}

});

viewer.zoomTo(entity);

viewer.clock.multiplier = 300;

1 Like