BingMapsImageryProvider.fromUrl() error

CesiumJS
1

Hi to all, in my web app I would like to reproduce the behaviour of Cesium.Viewer baseLayerPicker in order to pick the “default” layer provided by Cesium (for example “Bing Maps Aerial”).
I’ve a radio buttons list, each radio button activates a specific layer.
For example, BING-AERIAL radio button behaviour is the following:

const layers = this.viewer?.scene.imageryLayers;
var baseLayer = layers?.get(1);
if (baseLayer) layers?.remove(baseLayer);
layers?.addImageryProvider(
        Cesium.BingMapsImageryProvider.fromUrl(
          "https://dev.virtualearth.net", {
            key: "MYKEY",
            mapStyle: Cesium.BingMapsStyle.AERIAL
        })
      );

but on Chrome console I got this error:

ERROR TypeError: Cannot read properties of undefined (reading 'tileXYToRectangle')
    at new GE (node_modules\cesium\Build\Cesium\Cesium.js:9565:174)
    at GE.createPlaceholder (node_modules\cesium\Build\Cesium\Cesium.js:9565:455)
    at new gi (node_modules\cesium\Build\Cesium\Cesium.js:9565:3747)
    at us.addImageryProvider (node_modules\cesium\Build\Cesium\Cesium.js:9565:65834)
    at CesiumDirective.changeMapLayer (cesium.directive.ts:79:15)
    at Object.next (cesium.directive.ts:50:14)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at Subject.js:34:30

Can you help me, please? Thanks a lot.

2

This changes the BaseLayerPicker. Hope this helps.

const imageryViewModels = Cesium.createDefaultImageryProviderViewModels();
            const selectedProviders = [
                "Bing Maps Aerial",
                "Bing Maps Aerial with Labels",
                "Bing Maps Roads",
                "ArcGIS World Imagery",
                "ArcGIS World Hillshade",
                //"Esri World Ocean",
                "Open­Street­Map",
                //"Stamen Watercolor",
                "Stamen Toner",
                //"Sentinel-2",
                //"Blue Marble",
                //"Earth at night",
                //"Natural Earth II"
            ];

            // Filter the desired providers
            const filteredProviders = imageryViewModels.filter(model => selectedProviders.includes(model.name));

            

            // Create your custom provider
            const customProvider = new Cesium.ProviderViewModel({
                name: 'a name',
                iconUrl: 'https://somepictureurl/cropped-logow2i-2.png', // Updated this line with the provided image URL
                tooltip: 'bla)',
                creationFunction: function () {
                    return new Cesium.UrlTemplateImageryProvider({
                        url: 'someurl/{z}/{x}/{y}.png'
                    });
                }
            });

            // Add the custom provider to the list
            filteredProviders.push(customProvider);

            // Update the BaseLayerPicker's providers
            viewer.baseLayerPicker.viewModel.imageryProviderViewModels = filteredProviders;

            // Force Cesium to refresh the BaseLayerPicker's UI
            viewer.baseLayerPicker.viewModel.selectedItem = customProvider;
3

Thanks for your replay.
Rather than modify the baselayerpicker I would like to “emulare” It.
My goal is to have a button in My front end: once clicked It, a default Cesium imagery provider Will be activated (for example Bing with Aerial).
Thanks for your help.