Does CallbackProperty work with PolygonHierarchy?

[Piero Toffanin]

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!

[Hannah Pinkos]

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

[Piero Toffanin]

Thanks Hannah!

[Piero Toffanin]

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.

On Monday, August 22, 2016 at 9:15:58 AM UTC-5, Hannah Pinkos wrote:

[Hannah Pinkos]

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

-Hannah

[mail.dav...@gmail.com]

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

David

[Hannah Pinkos]

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

[David K]

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.

[Hannah Pinkos]

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

[David K]

It works.

Thanks.