添加底图切换功能

src/views/MarsView.vue

@@ -1,5 +1,24 @@
 <template>
   <div ref="cesiumContainer" class="cesium-fullscreen"></div>
+
+  <!-- 底图切换面板 -->
+  <div class="basemap-panel">
+    <div class="basemap-title">底图选择</div>
+    <div class="basemap-buttons">
+      <button
+        :class="['basemap-btn', { active: currentBasemap === 'mola' }]"
+        @click="switchBasemap('mola')"
+      >
+        MOLA 高程图
+      </button>
+      <button
+        :class="['basemap-btn', { active: currentBasemap === 'moric' }]"
+        @click="switchBasemap('moric')"
+      >
+        天问全球镶嵌
+      </button>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -8,7 +27,57 @@ import * as Cesium from 'cesium'
 import 'cesium/Build/Cesium/Widgets/widgets.css'
 
 const cesiumContainer = ref(null)
+const currentBasemap = ref('mola')
 let viewer = null
+let molaLayer = null
+let moricLayer = null
+
+// 底图配置 - 使用不同的 url 参数区分数据源
+const BASEMAPS = {
+  mola: {
+    name: 'MOLA 高程图',
+    url: 'http://192.168.190.42:8001/tiles/MarsCylindrical/{z}/{x}/{y}.png?url=/data/mola/Mars_MGS_MOLA_ClrShade_merge_global_463m.ptiff',
+    credit: 'Mars MGS MOLA Color-Shaded Relief',
+    maximumLevel: 10,
+  },
+  moric: {
+    name: '天问全球镶嵌',
+    url: 'http://192.168.190.42:8001/tiles/MarsCylindrical/{z}/{x}/{y}.png?url=/data/moric_global/HX1_GRAS_MoRIC_DOM_076m_Global_00N00E_A.ptiff',
+    credit: 'HX1 GRAS MoRIC DOM 076m Global',
+    maximumLevel: 12,
+  },
+}
+
+function switchBasemap(type) {
+  if (currentBasemap.value === type) return
+
+  const config = BASEMAPS[type]
+  if (!config) return
+
+  // 创建新的图层
+  const newProvider = new Cesium.UrlTemplateImageryProvider({
+    url: config.url,
+    tilingScheme: new Cesium.GeographicTilingScheme({
+      numberOfLevelZeroTilesX: 2,
+      numberOfLevelZeroTilesY: 1,
+    }),
+    maximumLevel: config.maximumLevel,
+    credit: config.credit,
+  })
+
+  // 移除当前图层，添加新图层
+  if (molaLayer && moricLayer) {
+    if (type === 'mola') {
+      moricLayer.show = false
+      molaLayer.show = true
+    } else {
+      molaLayer.show = false
+      moricLayer.show = true
+    }
+  }
+
+  currentBasemap.value = type
+}
 
 onMounted(() => {
   viewer = new Cesium.Viewer(cesiumContainer.value, {
@@ -40,18 +109,30 @@ onMounted(() => {
   atmo.saturationShift = -0.1
   atmo.perFragmentAtmosphere = true
 
-  // 自建 Mars 底图 TMS（port 8002）
+  // 创建 MOLA 底图
-  viewer.imageryLayers.addImageryProvider(
+  const molaProvider = new Cesium.UrlTemplateImageryProvider({
-    new Cesium.UrlTemplateImageryProvider({
+    url: BASEMAPS.mola.url,
-      url: 'http://192.168.190.42:8002/tiles/{z}/{x}/{y}.png',
+    tilingScheme: new Cesium.GeographicTilingScheme({
-      tilingScheme: new Cesium.GeographicTilingScheme({
+      numberOfLevelZeroTilesX: 2,
-        numberOfLevelZeroTilesX: 2,
+      numberOfLevelZeroTilesY: 1,
-        numberOfLevelZeroTilesY: 1,
+    }),
-      }),
+    maximumLevel: BASEMAPS.mola.maximumLevel,
-      maximumLevel: 7,
+    credit: BASEMAPS.mola.credit,
-      credit: 'Mars MGS MOLA Color-Shaded Relief',
+  })
-    })
+  molaLayer = viewer.imageryLayers.addImageryProvider(molaProvider)
-  )
+
+  // 创建 MoRIC 底图（初始隐藏）
+  const moricProvider = new Cesium.UrlTemplateImageryProvider({
+    url: BASEMAPS.moric.url,
+    tilingScheme: new Cesium.GeographicTilingScheme({
+      numberOfLevelZeroTilesX: 2,
+      numberOfLevelZeroTilesY: 1,
+    }),
+    maximumLevel: BASEMAPS.moric.maximumLevel,
+    credit: BASEMAPS.moric.credit,
+  })
+  moricLayer = viewer.imageryLayers.addImageryProvider(moricProvider)
+  moricLayer.show = false
 
   viewer.camera.setView({
     destination: Cesium.Cartesian3.fromDegrees(0, 20, 15000000, Cesium.Ellipsoid.MARS),
@@ -73,4 +154,71 @@ onBeforeUnmount(() => {
   width: 100vw;
   height: 100vh;
 }
+
+/* 底图切换面板 */
+.basemap-panel {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  background: rgba(20, 20, 30, 0.85);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  min-width: 180px;
+}
+
+.basemap-title {
+  color: rgba(255, 255, 255, 0.9);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.basemap-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.basemap-btn {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.8);
+  padding: 10px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  transition: all 0.25s ease;
+  outline: none;
+}
+
+.basemap-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.25);
+  color: rgba(255, 255, 255, 1);
+  transform: translateY(-1px);
+}
+
+.basemap-btn.active {
+  background: linear-gradient(135deg, #e85d04 0%, #dc2f02 100%);
+  border-color: #e85d04;
+  color: rgba(255, 255, 255, 1);
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(232, 93, 4, 0.4);
+}
+
+.basemap-btn:active {
+  transform: translateY(0);
+}
 </style>