How to properly display all layers

CesiumJS
1

Hello. At the beginning I've had one ImageryProvider with multiple layers and they were displayed correctly. Now I have multiple ImageryProviders, each of those has it's own layer. When I try to display them, only one of them is visible (the one on the top of the ImageryLayerCollection). I've lowered it's alpha property just to make sure if other layers are underneath it and they were. My question is how to properly display all of the layers without modifying their alpha value?

Example code:

var imageryProvider1 = new Cesium.WebMapServiceImageryProvider({
    url: "url_wms_1",
    layers: "layer_1",
    parameters: { transparent: 'true' }
});

var imageryProvider2 = new Cesium.WebMapServiceImageryProvider({
    url: "url_wms_2",
    layers: "layer_2",
    parameters: { transparent: 'true' }
});

viewer = new Cesium.Viewer('map3d', {
    imageryProvider: imageryProvider1,
    baseLayerPicker: false
});
   
viewer.scene.imageryLayers.addImageryProvider(imageryProvider2); // only this one is visible

Cesium version: 1.50.0
OS: Windows 10
Browsers: Chrome & Firefox

Thank you all for your time and help!

2

Can you show a screenshot of the layers? I’m imagining the upper layer is supposed to have holes in it that should show the underlying layers through? I think if you’re using PNG, and the layer has transparency, it should work automatically.

Otherwise we recently added a feature to allow you to define what color should be considered “transparent” and what the threshold for that should be. You can check it out here:

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Imagery%20Color%20To%20Alpha.html

Let me know if this helps! What kind of application are you working on?