Cesium error for Cannot Set Property color

[swapn...@gmail.com]

I'm trying to change polygon color to Red in Left_Click event, but I get error for following code.

viewer.entities.getById("SOMEID").polygon.material.color = Cesium.Color.RED;

TypeError: Cannot set property color of #<Object> which has only a getter

Cesium 1.48 is used.

[Omar Shehata]

Could you share a bit more of your code or a Sandcastle example? I just tried this out and it seems to work:

var viewer = new Cesium.Viewer('cesiumContainer');

viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {

     viewer.entities.getById("1").polygon.material.color = Cesium.Color.BLUE;

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

var redPolygon = viewer.entities.add({

    name : 'Red polygon on surface',

    id: '1',

    polygon : {

        hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,

                                                        -115.0, 32.0,

                                                        -107.0, 33.0,

                                                        -102.0, 31.0,

                                                        -102.0, 35.0]),

        material : Cesium.Color.RED

    }

});

viewer.zoomTo(viewer.entities);

Here's a running example.

[swapn...@gmail.com]

When I tried your example it worked fine. But when I try to do the same, it doesn't work.

When I logged your polygon.material.color, I see following.
---------------------------------------------
ConstantProperty {_value: Color, _hasClone: true, _hasEquals: true, _definitionChanged: Event}_definitionChanged: Event {_listeners: Array(0), _scopes: Array(0), _toRemove: Array(0), _insideRaiseEvent: false}_hasClone: true_hasEquals: true_value: Color {red: 1, green: 0, blue: 0, alpha: 1}definitionChanged: (...)__proto__: Object
---------------------------------------------


But when I log mine, i see following
---------------------------------------------
i {_value: s, _hasClone: true, _hasEquals: true, _definitionChanged: i}
_definitionChanged: i {_listeners: Array(0), _scopes: Array(0), _toRemove: Array(0), _insideRaiseEvent: false}
_hasClone: true
_hasEquals: true
_value: s {red: 0, green: 0.4, blue: 0.8, alpha: 1}
definitionChanged: (...)
__proto__: Object
---------------------------------------------


The other difference I had is with LEFT_CLICK event handler.


handler.setInputAction(function(click) {
pickedObject = scene.pick(click.position);
//console.log("pickedObject");
if(Cesium.defined(pickedObject))
{
if(typeof pickedObject.id != "undefined")
{
viewer.entities.getById(pickedObject.id.id).polygon.material.color = Cesium.Color.RED;
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);



Not sure where is the issue. I've huge number of polygons on page, maybe 40,000. It renders fine though.

[Omar Shehata]

Can you show how you're creating your entities/polygons? 

The other thing you could try is using a CallbackProperty for the color, to make sure Cesium knows it's dynamic and can change. This example shows a callback property being used for a position but it can work for color (or any dynamic other property):

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Callback%20Property.html

[swapn...@gmail.com]

Here is sample code.

var parentTest = viewer.entities.add(new Cesium.Entity());
var entity = viewer.entities.add({
id : "someId",
parent : parentTest,
customVar1 : Value1,
customVar1 : Value2,
description : "testDescription",
polygon : {
hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(eval("[COORDINATES FOR POLYGON]"))),
material : Cesium.Color.BLUE
}
});

[Omar Shehata]

Yeah, that looks like the same thing I've got it. Did you try a CallbackProperty for the material?

[swapn...@gmail.com]

Not yet, I'll try it in an hour and let you know.

[swapn...@gmail.com]

I get Cesium error when I try this. I guess I messed up with callBack implementation.

var parentTest = viewer.entities.add(new Cesium.Entity());
var entity = viewer.entities.add({
id : "someId",
parent : parentTest,
customVar1 : Value1,
customVar1 : Value2,
description : "testDescription",
polygon : {
hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(eval("[COORDINATES FOR POLYGON]"))),

material : new Cesium.CallbackProperty(function(material, result) {
console.log("In Here : ", material);
return Cesium.Color.BLUE;
}, isConstant),
}
});

[Omar Shehata]

My bad, it looks like you need to wrap it in a ColorMaterialProperty so it looks like this:

material : new Cesium.ColorMaterialProperty(
                    new Cesium.CallbackProperty(function(time, result) {
                      return color;
                }, false))

Here's a running example. Click to change the color.

[swapn...@gmail.com]

I figured out the issue, At least that's what I think it could be.

When I create entity, If I show/hide it , and then try to change the color, it was throwing the error.
Then Instead of show/hide, I remove that element and create again, that way whenever I click on it I was able to change the color.

Thank you for help, learned new things for callback.

[Omar Shehata]

Thanks for digging deeper into this! You're right, I was able to reproduce it, and it looks like this has just been fixed with this PR:

https://github.com/AnalyticalGraphicsInc/cesium/pull/7053

So once 1.50 comes out you should be able to just change the color without having to remove and recreate the entity. This will be far better for performance compared to using a CallbackProperty especially if you have thousands of entities. 

[ashle...@gmail.com]

I just hit this issue too on 1.49. I am going to try 1.50 and hope it fixes it. We are changing color and doing show/hide a lot on existing Entities.