Changing points of a polyline dynamically

CesiumJS
1

Hello.
I am trying to change the points of a polyline dynamically, but not happening by some reason, and I am unable to find a demo which describing how to.
I have a points which is coming each 1-2 seconds from a server, and I need to add them to a single polyline.
How to do that ?

2

but not happening by some reason,

Please provide a Sandcastle to show what exactly is not happening, containing code that shows what you’ve tried so far.

3

Well I am trying to use polyline.positions as an Array, and add to it more points, but it is not an array and it just not working, and I am unable to find an example which is doing just this - to add more points to a polyline, so i am not sure what to write and test in this sandcastle.

4

You can define a Property that returns the desired positions.

5

Thank You Marco13 ! This is really going forward help.
I have the follow issue now, and I am not understanding the problem.
I encapsulating everything in classes, and I have the follow class:

class Trajectory
{
    positionsHolder = undefined;
    constructor( )
    {        
       
        this.positionsHolder = new Array( 0, 0, 1, 100 );
    }
    get positionsProperty() 
    {
        console.log(this.positionsHolder);

        return Cesium.Cartesian3.fromDegreesArray(this.positionsHolder);

    }
    trajectoryDescriptor =
    {
        type: 'Trajectory',
        polyline:
        {
            positions: this.positionsProperty,

            width: 4,
            material: Cesium.Color.RED,
            clampToGround: true
        }
    }
}

But I keep getting that error Warning: Unhandled exception rendering component: coordinates is required, actual value was undefined
positionsProperty seems like return undefined.
Outside class works, but not inside class. Is there something else I shall consider when using it encapsulated ?

6

When you post a Sandcastle where it is possible to reproduce the error, it can probably be solved quickly.

1 Like
7
8

Adding a log output like

    get positionsProperty() 
    {
        console.log("this.positionsHolder is "+this.positionsHolder);
        return Cesium.Cartesian3.fromDegreesArray(this.positionsHolder);
    }

or adding a
debugger;
statement there or or looking at the stack trace (or even just posting the stack trace as part of the error description!) or knowing the quirks of JavaScript could have answered that.

I do not know the quirks of JavaScript :slight_smile:
But I’ve learned something today, and isn’t that great? :mortar_board:

The stack trace is

DeveloperError: coordinates is required, actual value was undefined
Error
    at new DeveloperError (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:10462:13)
    at Check.defined (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:10498:13)
    at Cartesian3.fromDegreesArray (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:11337:19)
    at get positionsProperty (<anonymous>:16:34)
    at <instance_members_initializer> (<anonymous>:24:29)
    at new Trajectory (<anonymous>:9:16)
    at window.startup (<anonymous>:32:18)
    at <anonymous>:60:12
    at HTMLScriptElement.loadScript (https://sandcastle.cesium.com/CesiumSandcastle.js:681:24) (on line 13)

Now, it says that the error comes from
at <instance_members_initializer> (<anonymous>:24:29)

This can roughly be imagined as follows:

  • It creates the Trajectory object
  • As part of this object, it initializes the trajectoryDescriptor
  • This happens before running the constructor(). This means that the positionsHolder is still undefined at this point!
  • As part of the trajectoryDescriptor, it tries to get the positionsProperty, which uses the positionsHolder (which is still undefined)
  • Bam :zap: - it crashes

There are different possible solutions. A simple one is to not initialize the trajectoryDescriptor as an “instance member”, but to just return it from a getter (assuming that this will be called only once - if not, you have to solve this differently).

Note that what you did there is still not dynamic. You are still just returning a positions array, and not a Property that returns the positions array. In order to return a property, you have to… return a property. This can be done as shown in my first answer here, or using a CallbackProperty. Another example, including a fix for the error that you mentioned:

Also note that dynamic polylines currently have a distressingly low rendering performance. This is “tracked” in Dynamic Buffers · Issue #932 · CesiumGS/cesium · GitHub but has not … “yet”… been addressed.

2 Likes
9

Good heavens ! This wouldn’t pass my mind as approach soon.
Now sure how to thank You.
So… THANK YOU ! <3