Drawing animated polyline between multiple points over time

CesiumJS
1

Hi,

I'm trying to draw a polyline (with animation effect which draws the in x time) between various points (I need to draw a plane route over time). I'm new to Cesium and I couldn't find any solution which achieves that.

I also need the polyline to be longer/shorter when the user moves along time.

Could anyone help me with this issue?

Thank you.

2

Hello,

You can use a Path. Take a look at this example for creating a path with data loaded from a CZML file: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Path.html&label=CZML

And here is an example of creating a path using the Entity API: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Interpolation.html&label=All

That demo also shows you how to use different interpolation algorithms for drawing between points in the dataset.

Best,

Hannah

3

Thank you Hannah!

I'd like to use Entity API, but in the example it only shows an aircraft going through an already drawn path.
I like this effect, but do you think is possible to draw the line from the source to the destination without an aircraft?. I mean, at time x it begins to draw the path, and at time x+10 it ends drawing the line, then the line disappears. But if I go back to the time x+5, it should show only half the path.

Thanks again for your help,

Roger

4

I am interested in this too, but when using paths with over a hundred tracks really hindering performance. Is there another way to get roughly the same effect?

5

Hi Roger,

You can use the leadTime and trailTime properties of PathGraphics to define how much of the path to draw. Set leadTime to 0 so no path shows in front of the current time, and trailTime to the length of the interval to keep drawing it starting at the first position.

Replace the path in the Interpolation demo with the code snippet below to see this work.

path : {
resolution : 1,
leadTime: 0,
trailTime: 360,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.1,
color : Cesium.Color.YELLOW
}),
width : 10
}

``

Best,

Hannah

1 Like
6

I wouldn’t expect this to be too performance heavy for a few hundred paths. I’m not sure what would be causing that problem.

You could try using polylines instead. That should have better performance but you wouldn’t have the same visualization of the animated path.

-Hannah

7

Thank you Hannah!

This is exactly what I was looking for. Now it is working perfectly :slight_smile:

8

Hannah,

How do we load the existing path and then update the path as the entity moves. This is for the case when cesium is loaded to display say a live aircraft flightpath and then
track that aircraft.

Thanks

Ian

On Behalf Of Hannah Pinkos

9

Dug into this a little deeper and found that our performance issues were only in the Chrome browser. Any special settings I need to turn on (I do have WebGL turned in)? Firefox the app runs great.

Thanks for any help

10

Hello Ian.

How is your data being updated? If you are using a path, you should be able to update the samples in the entity’s position property.

Best,

Hannah

11

What version of Chrome are you running? Updating may help.

-Hannah

12

I am using chrome 64bit version 50.0.2661.86.

13

Have you tried clearing your cache or running in incognito mode?
Other than that, I’m not really sure what the problem would be, sorry

-Hannah

14

Thank you! l have looking for it a long time.
This is what l want !
Thank agagin.