Drawing animated polyline between multiple points over time

[he...@rogerserentill.com]

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.

[Hannah Pinkos]

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

[he...@rogerserentill.com]

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

[Brian Ryall]

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?

[Hannah Pinkos]

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

[Hannah Pinkos]

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

[he...@rogerserentill.com]

Thank you Hannah!

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

[Ian Walberg]

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

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Brian Ryall]

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

[Hannah Pinkos]

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

[Hannah Pinkos]

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

-Hannah

[Brian Ryall]

I am using chrome 64bit version 50.0.2661.86.

[Hannah Pinkos]

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