添加火星cesium渲染

src/App.vue

@@ -3,6 +3,7 @@
   <nav class="page-nav">
     <RouterLink to="/" class="nav-link">Earth</RouterLink>
     <RouterLink to="/mars" class="nav-link">Mars</RouterLink>
+    <RouterLink to="/test" class="nav-link">Test</RouterLink>
   </nav>
 </template>
 

src/router/index.js

@@ -1,10 +1,12 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import EarthView from '../views/EarthView.vue'
 import MarsView from '../views/MarsView.vue'
+import TestView from '../views/TestView.vue'
 
 const routes = [
   { path: '/', component: EarthView },
   { path: '/mars', component: MarsView },
+  { path: '/test', component: TestView },
 ]
 
 export default createRouter({

src/views/MarsView.vue

@@ -10,10 +10,9 @@ import 'cesium/Build/Cesium/Widgets/widgets.css'
 const cesiumContainer = ref(null)
 let viewer = null
 
-onMounted(async () => {
+onMounted(() => {
   viewer = new Cesium.Viewer(cesiumContainer.value, {
-    terrainProvider: false,
+    terrainProvider: new Cesium.EllipsoidTerrainProvider(),
-    baseLayer: false,
     baseLayerPicker: false,
     geocoder: false,
     homeButton: false,
@@ -28,8 +27,9 @@ onMounted(async () => {
     skyAtmosphere: new Cesium.SkyAtmosphere(Cesium.Ellipsoid.MARS),
   })
 
-  // Hide the default globe mesh — surface comes from the Ion tileset
+  // 移除默认 Bing Maps，再加自己的图层
-  viewer.scene.globe.show = false
+  // 注意：不能用 baseLayer:false，Globe 渲染管线需要经过"有layer→初始化"这个过程
+  viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
 
   // Mars-like atmosphere (reddish, thinner than Earth)
   const atmo = viewer.scene.skyAtmosphere
@@ -40,14 +40,27 @@ onMounted(async () => {
   atmo.saturationShift = -0.1
   atmo.perFragmentAtmosphere = true
 
-  // Mars global 3D tileset from Cesium Ion (asset 3644333)
+  // 自建 Mars 底图 TMS（port 8002）
-  try {
+  viewer.imageryLayers.addImageryProvider(
-    const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(3644333)
+    new Cesium.UrlTemplateImageryProvider({
-    viewer.scene.primitives.add(tileset)
+      url: 'http://localhost:8002/tiles/{z}/{x}/{y}.png',
-    viewer.zoomTo(tileset)
+      tilingScheme: new Cesium.GeographicTilingScheme({
-  } catch (error) {
+        numberOfLevelZeroTilesX: 2,
-    console.error('Failed to load Mars tileset:', error)
+        numberOfLevelZeroTilesY: 1,
-  }
+      }),
+      maximumLevel: 7,
+      credit: 'Mars MGS MOLA Color-Shaded Relief',
+    })
+  )
+
+  viewer.camera.setView({
+    destination: Cesium.Cartesian3.fromDegrees(0, 20, 15000000, Cesium.Ellipsoid.MARS),
+    orientation: {
+      heading: 0,
+      pitch: -Cesium.Math.PI_OVER_TWO,
+      roll: 0,
+    },
+  })
 })
 
 onBeforeUnmount(() => {

src/views/TestView.vue

@@ -0,0 +1,65 @@
+<template>
+  <div ref="cesiumContainer" class="cesium-fullscreen"></div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount, ref } from 'vue'
+import * as Cesium from 'cesium'
+import 'cesium/Build/Cesium/Widgets/widgets.css'
+
+const cesiumContainer = ref(null)
+let viewer = null
+
+onMounted(() => {
+  // 用地球 globe + EllipsoidTerrainProvider（不需要 Ion token）
+  // 目的：验证 port 8002 的火星瓦片能否被正常请求和渲染
+  // 排除 Mars Globe 配置问题，单独验证后端
+  viewer = new Cesium.Viewer(cesiumContainer.value, {
+    terrainProvider: new Cesium.EllipsoidTerrainProvider(),
+    baseLayerPicker: false,
+    geocoder: false,
+    homeButton: false,
+    sceneModePicker: false,
+    navigationHelpButton: false,
+    animation: false,
+    timeline: false,
+    fullscreenButton: false,
+  })
+
+  // 移除默认 Bing Maps，换成火星瓦片
+  viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
+
+  viewer.imageryLayers.addImageryProvider(
+    new Cesium.UrlTemplateImageryProvider({
+      url: 'http://localhost:8002/tiles/{z}/{x}/{y}.png',
+      tilingScheme: new Cesium.GeographicTilingScheme({
+        numberOfLevelZeroTilesX: 2,
+        numberOfLevelZeroTilesY: 1,
+      }),
+      maximumLevel: 7,
+      credit: 'Mars MGS MOLA (test on Earth globe)',
+    })
+  )
+
+  // 明确指定 pitch=-90° 垂直俯视，确保地球在视锥体内
+  viewer.camera.setView({
+    destination: Cesium.Cartesian3.fromDegrees(0, 20, 15000000),
+    orientation: {
+      heading: 0,
+      pitch: -Cesium.Math.PI_OVER_TWO,
+      roll: 0,
+    },
+  })
+})
+
+onBeforeUnmount(() => {
+  viewer?.destroy()
+})
+</script>
+
+<style scoped>
+.cesium-fullscreen {
+  width: 100vw;
+  height: 100vh;
+}
+</style>