diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js index aa56c92..be38422 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js @@ -18,19 +18,17 @@ export function useEntityAnimation() { * 这些坐标定义了人员从起点到终点的移动路径 */ const PERSONNEL_PATH_COORDINATES = [ - { x: -1705480.2641142386, y: 5247435.146513505, z: 3189090.667137187 }, - { x: -1705494.4820981335, y: 5247449.285793587, z: 3189060.452114544 }, - { x: -1705510.0809808762, y: 5247465.767274618, z: 3189023.050648535 }, - { x: -1705511.0338125327, y: 5247476.4118378535, z: 3188998.3643177846 }, - { x: -1705515.8155320068, y: 5247491.504151518, z: 3188970.3225750974 }, - { x: -1705512.9523099929, y: 5247504.710873116, z: 3188943.7936982675 }, - { x: -1705519.7649184526, y: 5247519.060354441, z: 3188915.1883725724 }, - { x: -1705528.241912857, y: 5247539.302819527, z: 3188872.220619207 }, - { x: -1705530.7649293465, y: 5247548.26353356, z: 3188852.4565014304 }, - { x: -1705536.847870567, y: 5247562.107401437, z: 3188816.1164027476 }, - { x: -1705554.2817406887, y: 5247571.234068825, z: 3188789.6105980803 }, - { x: -1705573.026007999, y: 5247580.50225183, z: 3188770.244426234 }, - { x: -1705602.018256302, y: 5247597.236114229, z: 3188743.7470805836 } + { x: -1706079.1327424292, y: 5247893.165552528, z: 3187993.9339800295 }, + { x: -1706116.7863268533, y: 5247923.177994122, z: 3187929.297700776 }, + { x: -1706131.4939896727, y: 5247956.7916397555, z: 3187865.1250298577 }, + { x: -1706117.7768181972, y: 5247999.865521995, z: 3187795.4584125844 }, + { x: -1706148.232862157, y: 5248029.100250082, z: 3187735.2203392833 }, + { x: -1706129.4638550146, y: 5248073.941490989, z: 3187662.59740559 }, + { x: -1706131.3071046746, y: 5248086.057462914, z: 3187643.216358425 }, + { x: -1706164.2362053818, y: 5248120.213627388, z: 3187577.1867482658 }, + { x: -1706255.3513903276, y: 5248175.916851786, z: 3187422.819624157 }, + { x: -1706300.2731912779, y: 5248172.011305182, z: 3187397.8767570513 }, + { x: -1706343.1007708232, y: 5248165.925888667, z: 3187382.186124808 } ] /** diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue index ddfad6e..e065d0d 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue @@ -977,6 +977,63 @@ const handleMapTooltipClose = () => { mapTooltip.value.visible = false; }; +// 路径线实体引用 +const pathLineEntity = ref(null); + +/** + * 绘制红色路径线 + * @param {Cesium.Viewer} viewer - Cesium viewer 实例 + */ +const drawRedPathLine = (viewer) => { + if (!viewer) { + console.warn('[index.vue] drawRedPathLine: viewer 为空'); + return; + } + + // 如果已存在路径线,先移除 + if (pathLineEntity.value) { + viewer.entities.remove(pathLineEntity.value); + pathLineEntity.value = null; + } + + // 路径坐标点 + const pathCoordinates = [ + { x: -1706079.1327424292, y: 5247893.165552528, z: 3187993.9339800295 }, + { x: -1706116.7863268533, y: 5247923.177994122, z: 3187929.297700776 }, + { x: -1706131.4939896727, y: 5247956.7916397555, z: 3187865.1250298577 }, + { x: -1706117.7768181972, y: 5247999.865521995, z: 3187795.4584125844 }, + { x: -1706148.232862157, y: 5248029.100250082, z: 3187735.2203392833 }, + { x: -1706129.4638550146, y: 5248073.941490989, z: 3187662.59740559 }, + { x: -1706131.3071046746, y: 5248086.057462914, z: 3187643.216358425 }, + { x: -1706164.2362053818, y: 5248120.213627388, z: 3187577.1867482658 }, + { x: -1706255.3513903276, y: 5248175.916851786, z: 3187422.819624157 }, + { x: -1706300.2731912779, y: 5248172.011305182, z: 3187397.8767570513 }, + { x: -1706343.1007708232, y: 5248165.925888667, z: 3187382.186124808 } + ]; + + // 将坐标点转换为 Cartesian3 数组 + const positions = pathCoordinates.map(coord => + new Cesium.Cartesian3(coord.x, coord.y, coord.z) + ); + + // 创建红色路径线实体 + pathLineEntity.value = viewer.entities.add({ + polyline: { + positions: positions, + width: 5, + material: Cesium.Color.RED, + clampToGround: true, + // 添加发光效果使路径更醒目 + // material: new Cesium.PolylineGlowMaterialProperty({ + // glowPower: 0.3, + // color: Cesium.Color.RED + // }) + } + }); + + console.log('[index.vue] 红色路径线已绘制'); +}; + /** * 处理力量调度启动事件 * 显示加载动画,3秒后自动隐藏,然后启动人员移动动画 @@ -987,6 +1044,11 @@ const handleStartDispatch = (payload) => { // 显示加载动画 showLoading.value = true; + // 绘制红色路径线 + if (mapStore.viewer) { + drawRedPathLine(mapStore.viewer); + } + // 3秒后隐藏加载动画并启动人员移动 setTimeout(() => { showLoading.value = false; @@ -1463,8 +1525,8 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => { &__loading-gif { width: auto; height: auto; - max-width: 80%; - max-height: 60%; + max-width: 320px; + max-height: 55px; object-fit: contain; } }