From f3b29eec85807f2c7a90c6935189d6f038ceae9f Mon Sep 17 00:00:00 2001
From: along <long.ao@cug.edu.cn>
Date: Mon, 23 Feb 2026 11:57:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=81=AB=E6=98=9Fcesium?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue            |  1 +
 src/router/index.js    |  2 ++
 src/views/MarsView.vue | 39 ++++++++++++++++---------
 src/views/TestView.vue | 65 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 94 insertions(+), 13 deletions(-)
 create mode 100644 src/views/TestView.vue

diff --git a/src/App.vue b/src/App.vue
index d2d4962..90800f4 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/router/index.js b/src/router/index.js
index 526e439..535de37 100644
--- a/src/router/index.js
+++ b/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({
diff --git a/src/views/MarsView.vue b/src/views/MarsView.vue
index 79e09c4..1fa635c 100644
--- a/src/views/MarsView.vue
+++ b/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,
-    baseLayer: false,
+    terrainProvider: new Cesium.EllipsoidTerrainProvider(),
     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
-  viewer.scene.globe.show = false
+  // 移除默认 Bing Maps，再加自己的图层
+  // 注意：不能用 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)
-  try {
-    const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(3644333)
-    viewer.scene.primitives.add(tileset)
-    viewer.zoomTo(tileset)
-  } catch (error) {
-    console.error('Failed to load Mars tileset:', error)
-  }
+  // 自建 Mars 底图 TMS（port 8002）
+  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 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(() => {
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
new file mode 100644
index 0000000..256f94f
--- /dev/null
+++ b/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>