距离和时间随着动画会递减

packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRouteVisualization.js

@@ -7,6 +7,7 @@ import { ref } from 'vue'
 import * as Cesium from 'cesium'
 import { ROUTE_STYLES, LABEL_STYLE } from '../constants/routeStyles'
 import { formatDistance, formatDuration } from '../utils/geoUtils'
+import { CallbackProperty } from 'cesium'
 
 export function useRouteVisualization() {
   // 路线实体集合
@@ -144,27 +145,36 @@ export function useRouteVisualization() {
       return null
     }
 
-    // 计算中点位置
     const midIndex = Math.floor(positions.length / 2)
     const labelPosition = positions[midIndex]
 
-    // 格式化文本
-    const distanceText = formatDistance(routeData.distance)
-    const durationText = formatDuration(routeData.duration)
-    const labelText = `${distanceText} | ${durationText}`
+    // 存储初始值
+    const initialDistance = routeData.distance
+    const initialDuration = routeData.duration
+    const startTime = Date.now()
+    const durationMs = 60000 // 60秒
 
-    // 添加降级标识
-    const finalText = routeData.isFallback ? `${labelText} (直线)` : labelText
-
-    // 获取标签颜色
-    const type = routeData.isFallback ? 'fallback' : (routeData.type || 'personnel')
-    const style = ROUTE_STYLES[type] || ROUTE_STYLES.personnel
-
-    // 创建标签实体
     const entity = viewer.entities.add({
       position: labelPosition,
       label: {
-        text: finalText,
+        text: new Cesium.CallbackProperty(() => {
+          const elapsed = Date.now() - startTime
+          const progress = Math.min(elapsed / durationMs, 1)
+
+          // 计算新的距离和时间
+          const currentDistance = initialDistance * (1 - progress)
+          const currentDuration = initialDuration * (1 - progress)
+
+          const distanceText = formatDistance(currentDistance)
+          const durationText = formatDuration(currentDuration)
+
+          // 添加降级标识
+          const finalText = routeData.isFallback ?
+            `${distanceText} | ${durationText} (直线)` :
+            `${distanceText} | ${durationText}`
+
+          return finalText
+        }, false),
         font: LABEL_STYLE.font,
         fillColor: LABEL_STYLE.fillColor,
         outlineColor: LABEL_STYLE.outlineColor,
@@ -186,7 +196,13 @@ export function useRouteVisualization() {
       }
     })
 
-    labelEntities.value.push(entity)
+    // 在 Vue 的 ref 中存储实体以便后续清除
+    labelEntities.value.push({
+      entity: entity,
+      routeId: routeData.id
+    })
+
+    console.log(`[useRouteVisualization] 添加标签实体: ${routeData.name} (${routeData.id})`)
 
     return entity
   }
@@ -206,9 +222,9 @@ export function useRouteVisualization() {
     })
 
     // 清除标签实体
-    labelEntities.value.forEach(entity => {
-      if (entity) {
-        viewer.entities.remove(entity)
+    labelEntities.value.forEach(item => {
+      if (item && item.entity) {
+        viewer.entities.remove(item.entity)
       }
     })
 
@@ -239,7 +255,7 @@ export function useRouteVisualization() {
     // 清除路线实体
     routeEntities.value = routeEntities.value.filter(entity => {
       if (entity && entity.properties) {
-        // 关键修复：使用 getValue() 获取 Cesium Property 的实际值
+        // 使用 getValue() 获取 Cesium Property 的实际值
         const entityRouteId = entity.properties.routeId?.getValue ? entity.properties.routeId.getValue() : entity.properties.routeId
         console.log(`[useRouteVisualization] 检查路线实体 routeId: "${entityRouteId}", 目标: "${routeId}", 匹配: ${entityRouteId === routeId}`)
 
@@ -254,14 +270,15 @@ export function useRouteVisualization() {
     })
 
     // 清除标签实体
-    labelEntities.value = labelEntities.value.filter(entity => {
-      if (entity && entity.properties) {
-        // 关键修复：使用 getValue() 获取 Cesium Property 的实际值
-        const entityRouteId = entity.properties.routeId?.getValue ? entity.properties.routeId.getValue() : entity.properties.routeId
-
+    labelEntities.value = labelEntities.value.filter(item => {
+      if (item && item.entity && item.entity.properties) {
+        // 使用 getValue() 获取 Cesium Property 的实际值
+        const entityRouteId = item.entity.properties.routeId?.getValue ?
+          item.entity.properties.routeId.getValue() :
+          item.entity.properties.routeId
         if (entityRouteId === routeId) {
           console.log(`[useRouteVisualization] 移除标签实体: ${routeId}`)
-          viewer.entities.remove(entity)
+          viewer.entities.remove(item.entity)
           removedLabels++
           return false
         }

packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue

@@ -1461,7 +1461,7 @@ const initializeScene = async () => {
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           disableDepthTestDistance: Number.POSITIVE_INFINITY,
         },
-        priority: Number.MAX_SAFE_INTEGER, // 保证在所有模型之上
+        priority: 10000, // 这个设置好像并不能让中心点位于所有实体之上 我不知道为什么
       });
       console.log("[index.vue] 中心点标记已添加");