Adding and removing ImageryProvider synchronously

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I want to have an animation made from ImageryLayers, and for each tick, it should remove the old imageryLayer and add a new one. However, in doing so, there is a time in between when no image is loaded - resulting in a flicker between images - ON - OFF - ON

In my code, I keep a copy of the OLD layer, then add a new one and only AFTER I have added it, I call the remove function, but obviously it does the adding/removing asynchronously and thus it still removes the old layer without the new one added first.

My goal is to have the old layer only removed when the new one is added, so there is no empty gap in between.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

I add the layer as

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({

  •   url: png_url,*

  •   rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),*

  •   alpha: 1*

  • }))*

*and then *I remove the layer as:

layers.remove(layer_to_remove, true);

where layer_to_remove is the old top layer before adding a new ImageryProvider

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Make a smooth animation from Imagery Layers

4. The Cesium version you’re using, your operating system and browser.

1.65

2

Hi, i had a similar use case and solved this by pre caching every SingleTileImageryProvider and adding all of them with the attribute ‘show’ to ‘false’ and then put the current layer to ‘true’ while the others to ‘false’.

I dont know if this is really the proper way nor elegante one but i ended with pretty smooth animation without flicker nor tile download time

3

Thanks for the reply, my current workaround is to keep two last loaded layers in a stack data structure, and remove the layer only when the layers_to_be_removed stack becomes of length 3. This is not ideal as there are always 2 layers loaded, but does not flicker.

How did you cache the images dynamically?

4

You can build all your SingleTileImagery and then wait for all the readyPromise to complete before playing with them