Smoother Globe Layer Loading

CesiumJS
1

Is there a way to animate the opacity of a display layer on the globe? I am trying to overlay maps with an opacity slider but the opacity only updates when the slider is released. Is it possible to make the update more continuous?

opacityslider

Is there a way to make this operate more smoothly without the flashing reload?

Here’s the code:

const onChangeOpacity = useCallback(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (event: any) => {
      setMapOpacity(event.target.value / 100);
    },
    [setMapOpacity],
  );

 <StyledMapOpacitySlider>
        <UnFillMap />

        <Slider
          value={mapOpacity * 100}
          onChange={onChangeOpacity}
          color={'primary'}
        />

        <FillMap />
      </StyledMapOpacitySlider>

Image provider:

    const provider = new Cesium.UrlTemplateImageryProvider({
      url: String(mapUrl).replace(/\$/g, ''),
      tilingScheme: new Cesium.GeographicTilingScheme({
        rectangle: new Cesium.Rectangle(
          -Math.PI,
          -Math.PI / 2,
          Math.PI,
          Math.PI * 1.5,
        ),
        numberOfLevelZeroTilesX: 1,
      }),

      credit: '© Analytical Graphics, Inc.',
    });

    provider.defaultAlpha = mapOpacity;