Global Values undefined in Callback Property

CesiumJS
1

Hello,

I am a bit confused on how to implement the callback property for my project. I want to use it to change the positions of a wall that surrounds an aircraft. I wrote the callback function so that I could adjust the position using only global variables, some of which call on other files in the project.

updateWallValues() {
    var target = this.dtif.getTargetByTrafficId(this.selectedTarget);
    if (target) {
        var tmpLong = target.longitude;
        var tmpLat = target.latitude;
        var radius = this.getThresholdRangeValue;
        var array: Array<number> = [];
        for (var i = 0; i <= 360; i++) {
            var rad = Cesium.Math.toRadians(i);
            array.push(((radius/60) * Math.sin(rad)) + tmpLong);
            array.push(((radius/60) * Math.cos(rad)) + tmpLat);
        }
        this.wallValues = Cesium.Cartesian3.fromDegreesArray(array);
        return this.wallValues;
    }
}

I input this as the positions for my wall in my callback function:

             this.ThresholdOuterWall = this.viewer.entities.add({
                id: "Threshold Outer",
                wall: {
                    material: this.thresholdWallMaterial,
                    positions: new Cesium.CallbackProperty(this.updateWallValues, false),
                    minimumHeights: this.wallHeights(tmpAlti - 1000),
                    maximumHeights: this.wallHeights(tmpAlti + 1000),
                },
            });

And I update the wall with:

this.thresholdWall.wall.positions.getValue();

The error that I am getting is that “this.dtif” in one of the first lines here appears to be undefined, and therefore it can’t get the info for the “getTargetByTrafficId()” function. Can callback properties not take in global values like this? Is there something I’m doing wrong in this implementation? The function seemed to work perfectly before I implemented the Callback property (aside from flickering whenever the wall moved).

2

Figured this out! This was a coding issue, doesn’t have to do with Cesium. You need to pass in the global variables to some sort of constructor function for the callback to get it to work. So now I have the code below as my formatting function and it works perfectly
this.activeCavsThresholdOuterWall = this.viewer.entities.add({ id: "Threshold Outer", wall: { material: this.thresholdWallMaterial, positions: new Cesium.CallbackProperty(this.getCallBackFunction(this.dtif, this.selectedTarget, this.getThresholdRangeValue), false), minimumHeights: this.wallHeights(tmpAlti - 1000), maximumHeights: this.wallHeights(tmpAlti + 1000), }, });

3

This sounds like a JS issue, not a Cesium issue. There’s no problem with CallbackProperty() grabbing what is essentially a global value (or class value) either from or in a function, global or local. But I’m suspicious that, depending on the environment you’re in, you may need to bind() your function in.

But I think we need more context for this. Is your program running in global space? Are the two functions in the same namespace? What’s the value of ‘this’ in updateWallValues()?

Also, I’d probably go with a more direct approach of calling the functions;

this.ThresholdOuterWall = this.viewer.entities.add({
   id: "Threshold Outer",
   wall: {
      material: this.thresholdWallMaterial,
      positions: new Cesium.CallbackProperty( () => {
         return this.updateWallValues()
      }), false),
      minimumHeights: this.wallHeights(tmpAlti - 1000),
      maximumHeights: this.wallHeights(tmpAlti + 1000),
   },
});

… And make sure the return from your updateWallValues() always is an array of Cartesian3 or empty array.

Cheers,

Alex