Unable to switch BaseLayerPicker using javascript function

CesiumJS
1

1. A concise explanation of the problem you're experiencing.
I have two imageryViewModels added to the "viewer" with baseLayerPick set to false. I was able to switch to either one of them by clicking on the drop-down icon. However, I am unable to switch from one to the other by clicking another button that calls a javascript function because I want to switch them on-the-fly through code.

I've been searching this forum and the stackoverflow for a while but I could not solve it. I found many examples show how to set and switch the default imagery when constructing a viewer, but not with customized ProviderViewModel. Please see my code below (I removed my access token). Thanks in advance!

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

This is my HTML button: <button onclick="javascript:changeBaseLayer(1);">changeBaseLayer</button>

var imageryViewModels = ;

imageryViewModels.push(new Cesium.ProviderViewModel({
  name: 'ArtilerySim Terrain',
  iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapboxSatellite.png'),
  tooltip: 'Beautiful clear imagery',
  creationFunction: function () {
    return new Cesium.MapboxImageryProvider({
      mapId: 'mapbox.satellite',
      //Get your DigitalGlobe Maps API Access Token here: http://developer.digitalglobe.com/maps-api
      accessToken: 'pk.',
      credit: 'ArtilleryVision'
    });
  }
}));

imageryViewModels.push(new Cesium.ProviderViewModel({
  name: 'ArtilerySim Street Maps',
  iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapboxStreets.png'),
  tooltip: 'Beautiful clear imagery',
  creationFunction: function () {
    return new Cesium.MapboxImageryProvider({
      mapId: 'mapbox.streets',
      //Get your DigitalGlobe Maps API Access Token here: http://developer.digitalglobe.com/maps-api
      accessToken: 'pk.',
      credit: 'ArtilleryVision'
    });
  }
}));

var viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker: false,
      terrainProvider: Cesium.createWorldTerrain(),
      imageryProviderViewModels: imageryViewModels, //HQN: new with Mapbox
      shouldAnimate: true,
      homeButton: false,
      animation: true,
      timeline: true,
      navigationHelpButton: false
    });

var baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
      globe: viewer.scene, // Yep, this is right
      imageryProviderViewModels: imageryViewModels
});

// This is the javascript function that the button calls:
function changeBaseLayer(iIndex) {
  console.log(imageryViewModels[1]);
  baseLayerPicker.selectedImageryProviderViewModel = imageryViewModels[iIndex];
}

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I want to switch my customized imageryViewModel on-the-fly using Javascript.

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

2

I think you need to change the selectedImagery property itself.

Try this Sandcastle, click the “Next” button to go to the next imagery provider in the list. Let me know if this does what you need! It it doesn’t, it would help to create a Sandcastle link I can run directly to look into the issue.

3

Omar,

I tried using your code, and it worked perfectly. Thank you so much for your help!

Cheers.

Henry

4

For people who may run into this problem, below is the code that I implemented using Omar's suggestion. It not only worked perfectly but also switch the drop-down-list to select the correct icon for that selected ImageryProvider that I set on-the-fly in code.

Thanks again to Omar for his big help!

    var scene = viewer.scene;
    var globe = viewer.scene.globe;
    globe.depthTestAgainstTerrain = true;

    var baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
      // globe: Cesium.Ellipsoid.WGS84, // Psych! this is wrong.
      globe: viewer.scene, // Yep, this is right
      imageryProviderViewModels: imageryViewModels
    });

    function changeImageryProvider(index) {
      var viewModel = baseLayerPicker.viewModel;

      viewModel.selectedImagery = viewModel.imageryProviderViewModels[index];
    }

Cheers.
Henry