Does CallbackProperty work with PolygonHierarchy?

CesiumJS
1

Maybe I’m missing something, but I’m trying to draw a polygon which changes shape dynamically at every frame update.

Starting from this base example which works:

Cesium.Math.setRandomNumberSeed(1234);

var viewer = new Cesium.Viewer(‘cesiumContainer’, { infoBox : false });

var entities = viewer.entities;

var positions = Cesium.Cartesian3.fromDegreesArray([

        -107.0, 31.0,

        -107.0, 39.0,

        -97.0, 39.0,

        -97.0, 31.0

    ]);

entities.add({

polygon : {

    hierarchy : new Cesium.PolygonHierarchy(positions),

    material : Cesium.Color.BLUE

}

});

viewer.zoomTo(viewer.entities);

``

I use CallbackProperty in the following manner:

Cesium.Math.setRandomNumberSeed(1234);

var viewer = new Cesium.Viewer(‘cesiumContainer’, { infoBox : false });

var entities = viewer.entities;

var positions = Cesium.Cartesian3.fromDegreesArray([

        -107.0, 31.0,

        -107.0, 39.0,

        -97.0, 39.0,

        -97.0, 31.0

    ]);

entities.add({

polygon : {

    hierarchy : new Cesium.CallbackProperty(function(){

        return {

            positions: positions

        };

    }, false),

    material : Cesium.Color.BLUE

}

});

viewer.zoomTo(viewer.entities);

``

Which results in the polygon not being drawn. Or:

Cesium.Math.setRandomNumberSeed(1234);

var viewer = new Cesium.Viewer(‘cesiumContainer’, { infoBox : false });

var entities = viewer.entities;

var positions = Cesium.Cartesian3.fromDegreesArray([

        -107.0, 31.0,

        -107.0, 39.0,

        -97.0, 39.0,

        -97.0, 31.0

    ]);

entities.add({

polygon : {

    hierarchy : {

        positions: new Cesium.CallbackProperty(function(){

            return positions;

        }, false)

    },

    material : Cesium.Color.BLUE

}

});

viewer.zoomTo(viewer.entities);

``

Which results in a fatal error:

An error occurred while rendering. Rendering has stopped.
undefined
DataCloneError: Failed to execute ‘postMessage’ on ‘Worker’: An object could not be cloned.
Error: Failed to execute ‘postMessage’ on ‘Worker’: An object could not be cloned.
at Error (native)
at http://cesiumjs.org/Cesium/Source/Core/TaskProcessor.js:235:31
at Object.then (http://cesiumjs.org/Cesium/Source/ThirdParty/when.js:196:34)
at http://cesiumjs.org/Cesium/Source/ThirdParty/when.js:297:13
at processQueue (http://cesiumjs.org/Cesium/Source/ThirdParty/when.js:647:4)
at _resolve (http://cesiumjs.org/Cesium/Source/ThirdParty/when.js:333:4)
at Worker.worker.onmessage (http://cesiumjs.org/Cesium/Source/Core/TaskProcessor.js:56:26)

The following example instead works for a polyline:

Cesium.Math.setRandomNumberSeed(1234);

var viewer = new Cesium.Viewer(‘cesiumContainer’, { infoBox : false });

var entities = viewer.entities;

var positions = Cesium.Cartesian3.fromDegreesArray([

        -107.0, 31.0,

        -107.0, 39.0,

        -97.0, 39.0,

        -97.0, 31.0

    ]);

entities.add({

polyline : {

    positions: new Cesium.CallbackProperty(function(){

        return positions;

    }, false),

    material : Cesium.Color.BLUE

}

});

viewer.zoomTo(viewer.entities);

``

Am I missing something? Does CallbackProperty work on polygons?

Thanks for any pointers.

p.s. great work on 3D tiles and shadows!

2

Hello,

It looks like we have a bug that is causing CallbackProperty to fail when using a polygon on terrain. If you do not have terrain turned on, you can fix this by adding height: 0 to your entity. Here is an example:

var viewer = new Cesium.Viewer(‘cesiumContainer’);
viewer.entities.add({
polygon : {
height: 0,
hierarchy : new Cesium.CallbackProperty(function() {
return Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0]);
}, false),
material : Cesium.Color.RED
}
});

``

I’ve filed an issue for us to fix the bug here: https://github.com/AnalyticalGraphicsInc/cesium/issues/4222

Best,

Hannah

3

Thanks Hannah!

4

I’d like to add, if I have a terrain and my positions have their own heights, I can set the perPositionHeight property to true and then the code works.

https://cesiumjs.org/Cesium/Build/Documentation/PolygonGeometry.html?classFilter=polygon

perPositionHeight
Boolean
false
optionalUse the height of options.positions for each position instead of using options.height to determine the height.

5

We’ve just fixed this issue and it will be available in the 1.25 release out on September 1st.

-Hannah

6

I have this problem too, and my version of cesium is 1.25.
How can it be possible ?

David

7

Hi David,

Could you put together a code example to reproduce the problem? The issue I created here is fixed: https://github.com/AnalyticalGraphicsInc/cesium/issues/4222

But maybe you have a different similar problem.

Thanks,

Hannah

8

Thanks for your quick answer, I put my code

var polygone = viewer.entities.add({
name : name,
id : id,
polygon: {
hierarchy: {
positions: new Cesium.CallbackProperty(function () {

                return Cesium.Cartesian3.fromDegreesArray(control["entities"][id]["points"]); // without the callbackproperty it works
                }, false),
            },
            material : Cesium.Color.AQUA.withAlpha(0.5),
            outline : true,
            asynchronous: false
        }
    });

I have this error :

An error occurred while rendering. Rendering has stopped.
undefined
DataCloneError: The object could not be cloned.

The same error which was reported in this topic.

9

Hello,

You can use a CallbackProperty for polygon.hierarchy, but not for polygon.hierarchy.positions. Changing your code to the following should fix the problem:

var polygon = viewer.entities.add({
name : name,
id : id,
polygon: {
hierarchy: new Cesium.CallbackProperty(function () {
return Cesium.Cartesian3.fromDegreesArray(control[“entities”][id][“points”]); // without the callbackproperty it works
}, false),
material : Cesium.Color.AQUA.withAlpha(0.5),
outline : true
});

``

Best,

Hannah

10

It works.

Thanks.