Add polylines dynamically with time

CesiumJS
1

I am trying to add a polyline to viewer every minute. The polylines are constant. Once added they will not change. The number will increase over time. Example: If you added a polyline every minute for an hour, you would have 60 polylines at the end. I want to animate this, so if you scrolled the timeline from start to end, you would see the lines being added.
Previously I have animated moving entities. But the lines are moving, I just want to animate them being added to viewer over time. Not sure how to do this. This is what I have tried.

 viewer.clock.startTime = modelStart.clone();
 viewer.clock.stopTime = modelStop.clone();
 viewer.clock.currentTime = modelStart.clone();
 viewer.clock.multiplier = 1;
 viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
 viewer.clock.shouldAnimate = true;
 viewer.timeline.zoomTo(modelStart, modelStop);
 
 const avail = new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
   start: modelStart,
   stop: modelStop,
 })]);
...
 In loop for each new time with new linePosition 
 ...
      const positionWithTime = new Cesium.SampledPositionProperty();
      const linePosition = Cesium.Cartesian3.fromDegreesArrayHeights([
        lon1, lat1, alt1, lon2, lat2, alt2
      ]);
      newTime = Cesium.JulianDate.fromDate(time);
      positionWithTime.addSample(newTime, linePosition);
      viewer.clock.currentTime = newTime;
 
     // This draws lines without timeline
/*
      viewer.entities.add({
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
             lon1, lat1, alt1, lon2, lat2, alt2
          ]),
          material: Cesium.Color.RED,
        }
      });
*/

      // Trying to draw a new line that will be added over time
      // I tried this but no lines show up
      viewer.entities.add({
	 availability: avail,
         polyline: {
            positions: positionWithTime,
            material: Cesium.Color.RED,
        }
      });
      // I also tried a callback, lines show up but not associated with time
      viewer.entities.add({
        availability: avail,
        polyline: {
          positions: new Cesium.CallbackProperty((time) => {
             const linePosition = Cesium.Cartesian3.fromDegreesArrayHeights([
               lon1, lat1, alt1, lon2, lat2, alt2
             ]);
             return linePosition;
          }, false),
          material: Cesium.Color.RED,
        }
      });
 end of loop

Any hints or suggestions?
Thanks in advance

1 Like
2

Welcome @NancyLSnyder !
What kind of animation you are looking for? I’m not very clear about your requirement. Would you please explain it more with the help of reference link of sandcastle or by any drawing?

  • Regards,
3

When you move the timeline from start to finish, you will see a new polyline show up at each minute. Once the polyline added, it does not change. The only thing that changes, is the viewer has more polylines.

4

Thanks for the reply. Please create a sandcastle example for better understanding. :beers:

5

I’m currently doing something similar. Maybe this will help . . .

I’m using a CallbackProperty function in the position property of the Polyline which updates the position each timestep. My entities are kept in an array (entityList).

polyline:{
            positions: new Cesium.CallbackProperty(()=>{return points;}, false),

“points” is an array of Cesium.Cartesian3.fromDegrees(lon, lat, alt);

On a change of state, I create the new Polyline and start with the previous point.

entityList[name].polyPath = createTrailPolyline();//Overwrites old line
entityList[name].polyPath.points.push(entityList[received.name].prevPosition);
entityList[name].polyPath.entity.polyline.material.color = myNewColor;

//This happens each timestep 
entityList[received.name].polyPath.points.push(position);
entityList[received.name].prevPosition = position;

This is what I’m doing. My add entity call is inside the function createTrailPolyline(). Whenever I want to create a new polyline I just call my function. Then each timestep I just update position by calling push.

1 Like
6

If you have all the data already and just want them to incrementally be shown on the globe as time progresses, one method of achieving this would be to set the availability value on the entities accordingly. So, you could add all of them initially and then they would slowly be shown as their availability is reached.

Another way would be to set an interval for their show property.

7

Thank you David. This worked for me:)