Cesium material being ignored on polygon

Question

I am trying to set the colour of a polygon using the material property, like this:

drawOnMap() {
  let material = Cesium.Material.fromType('Color');
  material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);

  const entityObject = {
    polygon: {
      hierarchy: this.positions !== undefined ? this.positions : undefined,
      height: 0,
      material: material, 
    }
  };

  return this.cesiumEntity = this.cesiumViewerService.getViewer().entities.add( entityObject );
}

I have tried all sorts of combinations to create the material, but they are all being ignored and the polygon is being rendered as white. What am I missing?

Note that if I use Cesium.Color.RED, the polygon renders as red, as expected.

Help greatly appreciated!

Answer 1

You've got two different APIs in use here. After an Entity has been created, you can edit an existing Material by setting color uniforms and such. But, before the entity exists, the fields you use are for the Entity creation options, not for the pre-existing Entity.

So looking at the Entity doc, we can see an option polygon that takes a PolygonGraphics, which has a field material that takes a MaterialProperty (not a constructed material!), which is an abstract class with a few implementations, one of which is ColorMaterialProperty.

So, try this:

drawOnMap() {
  let materialProperty = new Cesium.ColorMaterialProperty(
      new Cesium.Color(1.0, 1.0, 0.0, 1.0)
  );

  const entityObject = {
    polygon: {
      hierarchy: this.positions !== undefined ? this.positions : undefined,
      height: 0,
      material: materialProperty
    }
  };

  return this.cesiumEntity = this.cesiumViewerService.getViewer().entities.add( entityObject );
}