add base layer picker

modules/exts/BaseLayerPicker.js

@@ -3,6 +3,115 @@
  * @Date: 2023-01-07 15:49:26
  */
 
-class BaseLayerPicker {}
+import { DeveloperError, EllipsoidTerrainProvider } from '@cesium/engine'
+
+class BaseLayerPicker {
+  constructor(options) {
+    if (!options.globe) {
+      throw new DeveloperError('globe is required')
+    }
+    this._globe = options.globe
+    this._imageryProviders = []
+    this._terrainProviders = []
+    this._selectedImagery = undefined
+    this._selectedTerrain = undefined
+  }
+
+  set selectedImagery(imagery) {
+    if (!imagery || !imagery.providers) {
+      new DeveloperError('imagery format error')
+    }
+    const imageryLayers = this._globe.imageryLayers
+    if (!this._selectedImagery) {
+      for (let i = imagery.providers.length - 1; i >= 0; i--) {
+        imageryLayers.addImageryProvider(imagery.providers[i], 0)
+      }
+    } else if (
+      this._selectedImagery &&
+      imagery.id !== this._selectedImagery.id
+    ) {
+      imageryLayers.removeAll()
+      for (let i = imagery.providers.length - 1; i >= 0; i--) {
+        imageryLayers.addImageryProvider(imagery.providers[i], 0)
+      }
+    }
+    this._selectedImagery = imagery
+  }
+
+  get selectedImagery() {
+    return this._selectedImagery
+  }
+
+  set selectedTerrain(terrian) {
+    if (this.selectedImagery !== terrian) {
+      this._globe.depthTestAgainstTerrain = !(
+        terrian instanceof EllipsoidTerrainProvider
+      )
+      this._globe.terrainProvider = terrian
+      this._selectedTerrain = terrian
+    }
+  }
+
+  get selectedTerrain() {
+    return this._selectedTerrain
+  }
+
+  /**
+   *
+   * @param provider
+   * @returns {BaseLayerPicker}
+   */
+  addImageryProvider(provider) {
+    let providers = []
+    let len = this._imageryProviders.length + 1
+    if (!Array.isArray(provider)) {
+      providers = [provider]
+    } else {
+      providers = provider.since(0)
+    }
+    this._imageryProviders.push({
+      id: `dc-imagery-${len}`,
+      providers
+    })
+    return this
+  }
+
+  /**
+   *
+   * @param provider
+   * @returns {BaseLayerPicker}
+   */
+  addTerrainProvider(provider) {
+    this._terrainProviders.push(provider)
+    return this
+  }
+
+  /**
+   *
+   * @param index
+   * @returns {BaseLayerPicker}
+   */
+  changeImagery(index) {
+    if (index > this._imageryProviders.length - 1) {
+      new DeveloperError('index error ')
+      return this
+    }
+    this.selectedImagery = this._imageryProviders[index]
+    return this
+  }
+
+  /**
+   *
+   * @param index
+   * @returns {BaseLayerPicker}
+   */
+  changeTerrain(index) {
+    if (index > this._terrainProviders.length - 1) {
+      new DeveloperError('index error ')
+      return this
+    }
+    this.selectedTerrain = this._terrainProviders[index]
+  }
+}
 
 export default BaseLayerPicker

modules/exts/index.js

@@ -3,5 +3,6 @@
  * @Date: 2021-02-21 17:51:00
  */
 
-export { default as GroundSkyBox } from './GroundSkyBox'
 export { default as CesiumViewer } from './CesiumViewer'
+export { default as BaseLayerPicker } from './BaseLayerPicker'
+export { default as GroundSkyBox } from './GroundSkyBox'

modules/viewer/Viewer.js

@@ -49,7 +49,7 @@ class Viewer {
       typeof id === 'string' ? document.getElementById(id) : id
     ) //Register the custom container
 
-    this._baseLayerPicker = new Cesium.BaseLayerPickerViewModel({
+    this._baseLayerPicker = new Cesium.BaseLayerPicker({
       globe: this._delegate.scene.globe
     }) //Initialize the baseLayer picker
 
@@ -294,18 +294,9 @@ class Viewer {
     if (!baseLayers) {
       return this
     }
-    this._baseLayerPicker.imageryProviderViewModels.push(
-      new Cesium.ProviderViewModel({
-        name: options.name || '地图',
-        tooltip: options.tooltip || '地图',
-        iconUrl: '',
-        creationFunction: () => {
-          return baseLayers
-        }
-      })
-    )
+    this._baseLayerPicker.addImageryProvider(baseLayers)
     if (!this._baseLayerPicker.selectedImagery) {
-      this._baseLayerPicker.selectedImagery = this._baseLayerPicker.imageryProviderViewModels[0]
+      this._baseLayerPicker.changeBaseLayer(0)
     }
     this.mapSwitch && this.mapSwitch.addMap(options)
     return this
@@ -317,11 +308,7 @@ class Viewer {
    * @returns {Viewer}
    */
   changeBaseLayer(index) {
-    if (this._baseLayerPicker && index >= 0) {
-      this._baseLayerPicker.selectedImagery = this._baseLayerPicker.imageryProviderViewModels[
-        index
-      ]
-    }
+    this._baseLayerPicker.changeBaseLayer(index)
     return this
   }
 
@@ -339,27 +326,17 @@ class Viewer {
   }
 
   /**
-   * Adds the terrain
+   *
    * @param terrain
-   * @param options
-   * @returns {Viewer}
+   * @return {Viewer}
    */
-  addTerrain(terrain, options = {}) {
+  addTerrain(terrain) {
     if (!terrain) {
       return this
     }
-    this._baseLayerPicker.terrainProviderViewModels.push(
-      new Cesium.ProviderViewModel({
-        name: options.name || '地形',
-        tooltip: options.tooltip || '地形',
-        iconUrl: '',
-        creationFunction: () => {
-          return terrain
-        }
-      })
-    )
+    this._baseLayerPicker.addTerrainProvider(terrain)
     if (!this._baseLayerPicker.selectedTerrain) {
-      this._baseLayerPicker.selectedTerrain = this._baseLayerPicker.terrainProviderViewModels[0]
+      this._baseLayerPicker.changeTerrain(0)
     }
     return this
   }
@@ -370,11 +347,7 @@ class Viewer {
    * @returns {Viewer}
    */
   changeTerrain(index) {
-    if (this._baseLayerPicker && index >= 0) {
-      this._baseLayerPicker.selectedTerrain = this._baseLayerPicker.terrainProviderViewModels[
-        index
-      ]
-    }
+    this._baseLayerPicker.changeTerrain(index)
     return this
   }
 
@@ -383,8 +356,6 @@ class Viewer {
    * @returns {Viewer}
    */
   removeTerrain() {
-    this._baseLayerPicker.terrainProviderViewModels = []
-    this._baseLayerPicker.selectedTerrain = undefined
     this._delegate.terrainProvider = new Cesium.EllipsoidTerrainProvider()
     return this
   }