Showing blue screen while changing base layer

CesiumJS
1

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

Adding custom base layer picker, on load base layer displaying. When trying to change the selection of base layer removing old base layer and showing blue screen, new base layer not adding on the map. I am using typescript.

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

public crearteViewer(htmlElement: any, mapType: number = 0) {
        var imageryViewModels = ;
        imageryViewModels.push(new Cesium.ProviderViewModel({
            name : ‘Open\u00adStreet\u00adMap’,
            iconUrl : Cesium.buildModuleUrl(‘Widgets/Images/ImageryProviders/openStreetMap.png’),
            tooltip : ‘OpenStreetMap (OSM) is a collaborative project to create a free editable \
       map of the world.\nhttp://www.openstreetmap.org’,
            creationFunction : function() {
                return Cesium.createOpenStreetMapImageryProvider({
                    url : ‘https://a.tile.openstreetmap.org/’
                });
            }
        }));

        imageryViewModels.push(new Cesium.ProviderViewModel({
            name : ‘Open\u00adStreet\u00adMap’,
            iconUrl : Cesium.buildModuleUrl(‘Widgets/Images/ImageryProviders/openStreetMap.png’),
            tooltip : ‘OpenStreetMap (OSM) is a collaborative project to create a free editable \
       map of the world.\nhttp://www.openstreetmap.org’,
            creationFunction : function() {
                return Cesium.createOpenStreetMapImageryProvider({
                    url : ‘https://a.tile.openstreetmap.org/’
                });
            }
        }));

        console.log(imageryViewModels);
        //Create a CesiumWidget without imagery, if you haven't already done so.
        var cesiumWidget = new Cesium.Viewer(htmlElement, {
            imageryProvider: false,
            baseLayerPicker: false,
        });
        //Finally, create the baseLayerPicker widget using our view models.
        this.baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
            globe: cesiumWidget.scene.globe,
            imageryProviderViewModels: imageryViewModels,
            selectedImageryProviderViewModel: imageryViewModels[mapType]
        });
    }

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

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

1.51, Windows 7 Professional, Chrome Browser

2

How are you hiding/switching the layers?

One thing you can do instead of completely removing it is just setting alpha = 0 to hide a layer and alpha = 1 to show it. See the docs for a full list of properties:

https://cesiumjs.org/Cesium/Build/Documentation/ImageryLayer.html?classFilter=Layer

This will make the layers switch immediately, but the downside is Cesium will always be loading both at all times. You can also try the show property.

Let me know if that helps.