增加了灰度地图和底图切换按钮

src/utils/common.js

@@ -1,3 +1,5 @@
+import { getParamsList } from '../api/home'
+
 export function modifyCesiumMouseWheel(viewer) {
     // 地图缩放改为按下 Ctrl + 鼠标滚轮
     viewer.scene.screenSpaceCameraController.zoomEventTypes = [{ eventType: Cesium.CameraEventType.WHEEL, modifier: Cesium.KeyboardEventModifier.CTRL }];
@@ -17,3 +19,49 @@ export function modifyCesiumMouseWheel(viewer) {
         document.getElementById('mouseWheelTip').style.display = '';
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 }
+
+let imageryViewModels = [];
+export function setImageryViewModels(cesiumHostAddr) {
+    if (imageryViewModels.length == 0) {
+        // 彩色地形底图
+        const colorMap = new Cesium.WebMapTileServiceImageryProvider(
+            {
+                url: cesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
+                layer: 'ougp:world',
+                style: 'default',
+                format: 'image/jpeg',
+                tileMatrixSetID: 'EPSG:4326',
+                tilingScheme: new Cesium.GeographicTilingScheme()
+            }
+        );
+        // 灰度地形底图
+        const grayMap = new Cesium.WebMapTileServiceImageryProvider(
+            {
+                url: cesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world_gray/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
+                layer: 'ougp:world_gray',
+                style: 'default',
+                format: 'image/jpeg',
+                tileMatrixSetID: 'EPSG:4326',
+                tilingScheme: new Cesium.GeographicTilingScheme()
+            }
+        );
+        // 自定义底图
+        imageryViewModels.push(new Cesium.ProviderViewModel({
+            name: "地形地图",
+            iconUrl: "static/images/world_color.png",
+            tooltip: "彩色地形底图",
+            creationFunction: function () {
+                return colorMap;
+            }
+        }));
+        imageryViewModels.push(new Cesium.ProviderViewModel({
+            name: "灰度地图",
+            iconUrl: "static/images/world_gray.png",
+            tooltip: "灰度地形底图",
+            creationFunction: function () {
+                return grayMap;
+            }
+        }));
+    }
+    return imageryViewModels;
+}

src/views/dataSearch.vue

@@ -166,6 +166,10 @@ import {
 } from '../api/dataSearch'
 import { getParamsList, getVoyageLine } from '../api/home'
 import Cookies from 'js-cookie'
+import {
+  setImageryViewModels
+} from '@/utils/common'
+
 const Cesium = window.Cesium
 export default {
   name: 'Shuju',
@@ -223,7 +227,9 @@ export default {
       chooseLine: null,
       currentVoyage: null, // 当前选中的航次
       // 地图图层基础地址
-      CesiumHostAddr: ''
+      CesiumHostAddr: '',
+      // 保存自定义底图
+      imageryViewModels: []
     }
   },
   created() {
@@ -281,6 +287,7 @@ export default {
           arr.forEach(item => {
             if (item.param_name === 'CesiumHostAddr') {
               this.CesiumHostAddr = item.param_value
+              this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr);
               this.initCesium()
             }
           })
@@ -452,7 +459,11 @@ export default {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
-        baseLayerPicker: false,
+        baseLayerPicker: true,
+        // 设置自定义底图
+        imageryProviderViewModels: this.imageryViewModels,
+        // 关闭默认的地形底图
+        terrainProviderViewModels: [],
         fullscreenButton: false,
         selectionIndicator: false,
         homeButton: true,
@@ -490,7 +501,7 @@ export default {
       });
 
       // 不显示底图
-      this.viewer.imageryLayers.get(0).show = false
+      // this.viewer.imageryLayers.get(0).show = false
 
       // 创建一个ScreenSpaceEventHandler实例
       const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
@@ -514,17 +525,17 @@ export default {
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
       // 叠加叠加影像服务
-      const earthMap = new Cesium.WebMapTileServiceImageryProvider(
+      // const earthMap = new Cesium.WebMapTileServiceImageryProvider(
-        {
+      //   {
-          url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
+      //     url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
-          layer: 'ougp:world',
+      //     layer: 'ougp:world',
-          style: 'default',
+      //     style: 'default',
-          format: 'image/jpeg',
+      //     format: 'image/jpeg',
-          tileMatrixSetID: 'EPSG:4326',
+      //     tileMatrixSetID: 'EPSG:4326',
-          tilingScheme: new Cesium.GeographicTilingScheme()
+      //     tilingScheme: new Cesium.GeographicTilingScheme()
-        }
+      //   }
-      )
+      // )
-      this.viewer.imageryLayers.addImageryProvider(earthMap)
+      // this.viewer.imageryLayers.addImageryProvider(earthMap)
       // 增加海岸线  /geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png
       const coastline = new Cesium.WebMapTileServiceImageryProvider(
         {

src/views/home.vue

@@ -231,7 +231,7 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
 import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
 import {
-  modifyCesiumMouseWheel
+  modifyCesiumMouseWheel, setImageryViewModels
 } from '@/utils/common'
 
 const Cesium = window.Cesium
@@ -288,7 +288,9 @@ export default {
       viewer: null,
       color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
       // 地图图层基础地址
-      CesiumHostAddr: ''
+      CesiumHostAddr: '',
+      // 保存自定义底图
+      imageryViewModels: []
     }
   },
 
@@ -316,6 +318,7 @@ export default {
           arr.forEach(item => {
             if (item.param_name === 'CesiumHostAddr') {
               this.CesiumHostAddr = item.param_value
+              this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr);
               this.initCesium()
             }
           })
@@ -343,6 +346,7 @@ export default {
         this.voyageList = voyageList
       })
     },
+
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
@@ -350,7 +354,11 @@ export default {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
-        baseLayerPicker: false,
+        baseLayerPicker: true,
+        // 设置自定义底图
+        imageryProviderViewModels: this.imageryViewModels,
+        // 关闭默认的地形底图
+        terrainProviderViewModels: [],
         fullscreenButton: false,
         selectionIndicator: false,
         homeButton: true,
@@ -391,20 +399,20 @@ export default {
       modifyCesiumMouseWheel(this.viewer);
 
       // 不显示底图
-      this.viewer.imageryLayers.get(0).show = false
+      // this.viewer.imageryLayers.get(0).show = true;
 
       // 叠加叠加影像服务
-      const earthMap = new Cesium.WebMapTileServiceImageryProvider(
+      // const earthMap = new Cesium.WebMapTileServiceImageryProvider(
-        {
+      //   {
-          url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
+      //     url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
-          layer: 'ougp:world',
+      //     layer: 'ougp:world',
-          style: 'default',
+      //     style: 'default',
-          format: 'image/jpeg',
+      //     format: 'image/jpeg',
-          tileMatrixSetID: 'EPSG:4326',
+      //     tileMatrixSetID: 'EPSG:4326',
-          tilingScheme: new Cesium.GeographicTilingScheme()
+      //     tilingScheme: new Cesium.GeographicTilingScheme()
-        }
+      //   }
-      )
+      // )
-      this.viewer.imageryLayers.addImageryProvider(earthMap)
+      // this.viewer.imageryLayers.addImageryProvider(earthMap)
       // 增加海岸线
       const coastline = new Cesium.WebMapTileServiceImageryProvider(
         {