添加经纬度

src/views/MarsView.vue

@@ -19,6 +19,44 @@
       </button>
     </div>
   </div>
+
+  <!-- 经纬度信息面板 -->
+  <div class="coord-panel">
+    <div class="coord-title">视角定位</div>
+    <div class="coord-info">
+      <div class="coord-item">
+        <span class="coord-label">经度:</span>
+        <input
+          v-model.number="inputLongitude"
+          type="number"
+          step="0.0001"
+          class="coord-input"
+          @keyup.enter="flyToLocation"
+        />
+      </div>
+      <div class="coord-item">
+        <span class="coord-label">纬度:</span>
+        <input
+          v-model.number="inputLatitude"
+          type="number"
+          step="0.0001"
+          class="coord-input"
+          @keyup.enter="flyToLocation"
+        />
+      </div>
+      <div class="coord-item">
+        <span class="coord-label">高度:</span>
+        <input
+          v-model.number="inputAltitude"
+          type="number"
+          step="100"
+          class="coord-input"
+          @keyup.enter="flyToLocation"
+        />
+      </div>
+      <button class="fly-to-btn" @click="flyToLocation">定位</button>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -28,6 +66,12 @@ import 'cesium/Build/Cesium/Widgets/widgets.css'
 
 const cesiumContainer = ref(null)
 const currentBasemap = ref('mola')
+const longitude = ref(0)
+const latitude = ref(0)
+const altitude = ref(0)
+const inputLongitude = ref(-54.9)
+const inputLatitude = ref(-33.7)
+const inputAltitude = ref(20000)
 let viewer = null
 let molaLayer = null
 let moricLayer = null
@@ -79,6 +123,50 @@ function switchBasemap(type) {
   currentBasemap.value = type
 }
 
+// 更新经纬度信息
+function updateCameraInfo() {
+  if (!viewer) return
+
+  // 获取相机位置
+  const cameraPosition = viewer.camera.positionCartographic
+  const lon = Cesium.Math.toDegrees(cameraPosition.longitude)
+  const lat = Cesium.Math.toDegrees(cameraPosition.latitude)
+  const alt = cameraPosition.height / 1000 // 转换为公里
+
+  longitude.value = lon
+  latitude.value = lat
+  altitude.value = alt
+
+  // 更新输入框的值
+  inputLongitude.value = lon
+  inputLatitude.value = lat
+  inputAltitude.value = alt
+}
+
+// 定位到指定位置
+function flyToLocation() {
+  if (!viewer) return
+
+  const lon = Number(inputLongitude.value)
+  const lat = Number(inputLatitude.value)
+  const alt = Number(inputAltitude.value) * 1000 // 转换为米
+
+  if (isNaN(lon) || isNaN(lat) || isNaN(alt)) {
+    console.warn('Invalid coordinates')
+    return
+  }
+
+  viewer.camera.flyTo({
+    destination: Cesium.Cartesian3.fromDegrees(lon, lat, alt, Cesium.Ellipsoid.MARS),
+    orientation: {
+      heading: 0,
+      pitch: -Cesium.Math.PI_OVER_TWO,
+      roll: 0,
+    },
+    duration: 2,
+  })
+}
+
 onMounted(() => {
   viewer = new Cesium.Viewer(cesiumContainer.value, {
     terrainProvider: new Cesium.EllipsoidTerrainProvider(),
@@ -135,13 +223,18 @@ onMounted(() => {
   moricLayer.show = false
 
   viewer.camera.setView({
-    destination: Cesium.Cartesian3.fromDegrees(0, 20, 15000000, Cesium.Ellipsoid.MARS),
+    destination: Cesium.Cartesian3.fromDegrees(-54.9, -33.7, 10000000, Cesium.Ellipsoid.MARS),
     orientation: {
       heading: 0,
       pitch: -Cesium.Math.PI_OVER_TWO,
       roll: 0,
     },
   })
+
+  // 监听相机移动事件，更新经纬度显示
+  viewer.camera.moveEnd.addEventListener(updateCameraInfo)
+  // 初始化时更新一次
+  updateCameraInfo()
 })
 
 onBeforeUnmount(() => {
@@ -170,6 +263,114 @@ onBeforeUnmount(() => {
   min-width: 180px;
 }
 
+/* 经纬度信息面板 */
+.coord-panel {
+  position: fixed;
+  bottom: 20px;
+  left: 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: 200px;
+}
+
+.coord-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);
+}
+
+.coord-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.coord-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.coord-label {
+  color: rgba(255, 255, 255, 0.7);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  min-width: 50px;
+}
+
+.coord-input {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  padding: 6px 10px;
+  color: rgba(255, 255, 255, 0.95);
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 13px;
+  font-weight: 600;
+  width: 110px;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.coord-input:focus {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(232, 93, 4, 0.6);
+  box-shadow: 0 0 0 2px rgba(232, 93, 4, 0.2);
+}
+
+.coord-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+/* 移除数字输入框的箭头 */
+.coord-input::-webkit-outer-spin-button,
+.coord-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.coord-input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.fly-to-btn {
+  margin-top: 8px;
+  background: linear-gradient(135deg, #e85d04 0%, #dc2f02 100%);
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  color: rgba(255, 255, 255, 1);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  outline: none;
+  box-shadow: 0 2px 8px rgba(232, 93, 4, 0.3);
+}
+
+.fly-to-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(232, 93, 4, 0.5);
+}
+
+.fly-to-btn:active {
+  transform: translateY(0);
+}
+
 .basemap-title {
   color: rgba(255, 255, 255, 0.9);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;