how to change ColorMaterialProperty

CesiumJS
1

Hello,

I'm getting an exception when I try to change the color of a path element of an Entity imported from dragged CZML. Cesium version 1.4.

if( this.material instanceof Cesium.ColorMaterialProperty ) {
  if( this.material.color ) {
        // CODE BLOWS-UP HERE
  this.material.color = Cesium.Color.RED;

        // THIS ALSO BLOWS-UP
        this.material = new $wnd.Cesium.ColorMaterialProperty( $wnd.Cesium.Color.RED );
  }
}

where *this* is PathGraphics object from an Entity.

What are the errors of my ways?

Thanks for advice!

Here's the CZML segment:

<snip>
},
"path":{"material":{"solidColor":{"color":{"rgba":[255,255,100,100]}}},
"width":[ { "number":1.0}],
"show":[{"interval": "2014-09-03T11:45:10Z/2014-09-03T12:16:24Z","boolean":true}]
},
<snip>

2

I'm getting this exception: Would appreciate any shared successes. Thanks

An error occurred while rendering. Rendering has stopped.
undefined
TypeError: undefined is not a function
TypeError: undefined is not a function
    at Function.i.getValueOrClonedDefault (http://localhost:8080/sdat/js/cesium_1.4/Cesium.js:392:28514)
    at l.getValue (http://localhost:8080/sdat/js/cesium_1.4/Cesium.js:393:1636)
    at Function.o.getValue (http://localhost:8080/sdat/js/cesium_1.4/Cesium.js:397:29330)

3

GOT IT! The right way:
this.material = Cesium.ColorMaterialProperty.fromColor(Cesium.Color.RED);

where 'this' is the PathGraphics object.

4

If you aren’t in complete control of the data (such as loading from an external file) you’ll always want to assign a new property rather than try and re-use the existing one. Here’s a simple example that loads a CZML file and assigns random colors to all entity paths when the button is clicked. You can paste the below directly into Sandcastle: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html

var gallery = ‘…/…/SampleData/’;

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var czmlDataSource = new Cesium.CzmlDataSource();

czmlDataSource.loadUrl(gallery + ‘simple.czml’);

viewer.dataSources.add(czmlDataSource);

Sandcastle.addToolbarButton(‘Change colors’, function() {

var entities = czmlDataSource.entities.entities;

for(var i = 0, len = entities.length; i < len; i++) {

var entity = entities[i];

if(entity.path) {

entity.path.material = Cesium.ColorMaterialProperty.fromColor(Cesium.Color.fromRandom({ alpha: 1.0 }));

}

}

});

5

I’ll also add that we are in the process of making the high-level API much easier to use. Keep your eye on https://github.com/AnalyticalGraphicsInc/cesium/pull/2315, which I expect to be in the Feb. 1st release