Paths or Polylines over Time.

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I need to draw a line (path of polyline) BUT, paths won’t follow a great arc or clamp to ground and Polylines won’t draw over time. What is my solution?

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

{
“id” : “1”,
“name” : “line 1”,
“availability” : “2012-08-04T10:00:00Z/2012-08-04T15:00:00Z”,

"path" : {
    "material" : {
        "polylineOutline" : {
            "color" : {
                "rgba" : [255, 0, 0, 255]
            },
            "outlineColor" : {
                "rgba" : [255, 0, 0, 255]
            },
            "outlineWidth" : 10
        }
    },
    "width" : 8,
    "leadTime" : 10,
    "trailTime" : 1000,
    "resolution" : 5
},
"position" : {
    "epoch" : "2012-08-04T10:00:00Z",
        "cartographicDegrees" : [
             10, -1.74, -3.02, 0,
             100, 0.98,  1.74, 0,
        ]}

}

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Need to draw a line between two points to improve customer experience.

4. The Cesium version you’re using, your operating system and browser.

1.47

1. A concise explanation of the problem you’re experiencing.

I need to draw a line (a path or polyline) over time. Paths dont follow the surface of the earth, and polylines can’t be drawn over time. What is my solution?

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

{
“id” : “1”,
“name” : “line 1”,
“availability” : “2012-08-04T10:00:00Z/2012-08-04T15:00:00Z”,

"path" : {
    "interpolationAlgorithm": "LAGRANGE",
    "clampToGround" : true,
    "zIndex" : 3,
    "material" : {
        "polylineOutline" : {
            "color" : {
                "rgba" : [255, 0, 0, 255]
            },
            "outlineColor" : {
                "rgba" : [255, 0, 0, 255]
            },
            "outlineWidth" : 10
        }
    },
    "width" : 8,
    "leadTime" : 10,
    "trailTime" : 1000,
    "resolution" : 5
},
"position" : {
    "epoch" : "2012-08-04T10:00:00Z",
        "cartographicDegrees" : [
             10, -1.74, -3.02, 1000,
             100, 0.98,  1.74, 1000,
        ]}

}

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

animating a line drawn between two points.

4. The Cesium version you’re using, your operating system and browser.

1.47

2

I share your pain, and would also like a solution. I've wasted hours unsuccessfully experimenting with generating a czml polyline that animates over time just so I could clampToGround, because a GPS path disappears under terrain at portions of the tracklog.
What do I want to see in Cesium in 2019? ClampToGround support for Path.

3

Hi Jody,

You can draw polylines over time! You can use something like a CallbackProperty or a SampledPositionProperty to add positions.

You should also be able to clamp the polyline to terrain using clampToGround like in this example, (select “Draw polyline on terrain”).

Does that answer your questions?

Thanks,

Gabby

4

Gabby,
Your message motivated me to take another stab at using a callback function for polyline positions, which I had tried in the past unsuccessfully. I got it to work, this time, animating the positions read from a GPS tracklog, with both a polyline for the entire track, and a billboard for the first position at each time stamp. The billboard and polyline “ClampToGround” on top of terrain successfully. If at first you don’t succeed, try, try again.

Thanks!

-Jon

5

Awesome, glad everything is working! We’d love to see what the results are if you’re willing to share.

6

I will try to pull out a minimal code example, the functions are buried in my WordPress plugin. It was not as trivial as the Sandcastle gallery example for using callback to animate a polyline. I’m sure better programmers than I have mastered this years ago, lol.

7

I would love to see this in sandcastle.

Jody

8

I know this is an old post but it really helped me. Basically, I have thousands of lat/lon points I want to display during a playback but not until the time of the point has been reached. This is working for me by using callbacks but as I add more lines (each with thousands of points) the playback gets choppy.

As all of the data is known when playback starts, I’m trying to front-load it using a SampledPositionProperty. When all of the points are front-loaded , the memory spikes during playback to several hundred MB. I didn’t have memory issues with the callback approach.

Honestly, I’m open to any approach which optimizes performance given large sets of data where the start and end are known in advance and are represented as a lines connecting the lat/lon points.

Thanks for the help this thread has already provided and for any further suggestions!

1 Like