diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRouteVisualization.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRouteVisualization.js index 6979d91..9c8ea55 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRouteVisualization.js +++ b/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 } diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue index 570d23f..4117894 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue +++ b/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] 中心点标记已添加");