Applying a new style to a GeoJSON polygon

CesiumJS
1

I’ve have a Cesium map where I loaded some data from a GeoJsonDataSource.
For every shape loaded, I’m applying the following:

const loaded = await datasource.load(figure, {
          stroke: Cesium.Color.LIGHTBLUE,
          fill: Cesium.Color.RED.withAlpha(0.5),
          strokeWidth: 3,
        });

Later in the application, I want to change the color of the shapes based on some inputs (as an example: when hovering on the shape).

The only (TS friendly) way of doing this I found is like the following:

const currentColor = entity.polygon.material as Cesium.ColorMaterialProperty;
const color = currentColor.color.getValue(Cesium.JulianDate.now()) as Cesium.Color;
color.alpha = 0.8;
entity.polygon.material = new Cesium.ColorMaterialProperty(color);

It works, but there is a “blink effect” which is very annoying: the shape with the initial color disappear for a moment, then it’s replaced by a new one with the new color.
It seems like that the whole feature is repainted from scratch.

I’m wondering what I’m doing wrong. Where I can find an example on how to do this in a performant way? The only similar example I found is in this discussion, but API seems not compatible.

2

OK, probably this post is a more interesting input… How to darken entity color on hover - #4 by Rachel_Hwang

3

Hi @keul,

Upon reading your first message, I was just about to post a thread similar to the one you linked to. Does that approach work for you?

Thanks,
Gabby

4

Hi @Gabby_Getz, (sorry for late reply, but I was on holidays).
This link seems promising. Let me try to apply this to my usecase in next few days

5

Unluckily all of the links on that thread are gone. I’m trying to figure out myself how to use CallbackProperty for this

6

OK, I was able to make this work using an alternative version of ColorMaterialProperty that can receive a CallBackProperty instead of a color.

Something like this:

          const property = new Cesium.CallbackProperty(
            cachedCallbackPropery,
            false,
          );
          if (entity.polygon) {
            entity.polygon.material = new Cesium.ColorMaterialProperty(property);
          }

It has been not easy to make this work smoothly inside a React context (I cannot use the official React integration), but in the end it seems to work: flickering disappeared.