From d73c5f7ca7766dd4ea5ff981193ea781103194fe Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Fri, 21 Nov 2025 17:00:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(screen):=20=E6=B7=BB=E5=8A=A0=E5=A4=9A?=
=?UTF-8?q?=E4=B8=AA=E5=AE=9E=E4=BD=93=E5=8A=A8=E7=94=BB=E5=92=8C=E5=BA=94?=
=?UTF-8?q?=E6=80=A5=E9=A2=84=E6=A1=88=E6=A8=A1=E6=80=81=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 添加对多个实体（包括设备和其他人员组）动画的支持
- 引入具有一键调度功能的应急预案模态框
- 通过多条红色路径线和起点标记增强路径可视化效果
- 更新相机控制以实现对所有动画实体的最佳观看效果
---
.../composables/useEntityAnimation.js | 208 +++++++++++-
.../3DSituationalAwarenessRefactor/index.vue | 300 +++++++++++++++---
2 files changed, 469 insertions(+), 39 deletions(-)
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js
index be38422..1b58500 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js
@@ -1,6 +1,7 @@
import { ref } from 'vue'
import * as Cesium from 'cesium'
import soldierIcon from '../assets/images/SketchPngfbec927027ff9e49207749ebaafd229429315341fda199251b6dfb1723ff17fb.png'
+import deviceIcon from '../assets/images/SketchPng860d54f2a31f5f441fc6a88081224f1e98534bf6d5ca1246e420983bdf690380.png'
/**
* 实体动画管理 Composable
@@ -10,6 +11,9 @@ export function useEntityAnimation() {
// 动画实体引用
const animatedEntity = ref(null)
+ // 多组动画实体引用
+ const animatedEntities = ref([])
+
// 动画是否正在运行
const isAnimating = ref(false)
@@ -31,6 +35,49 @@ export function useEntityAnimation() {
{ x: -1706343.1007708232, y: 5248165.925888667, z: 3187382.186124808 }
]
+ // 设备组路径坐标
+ const DEVICE_PATH_COORDINATES = [
+ { x: -1706935.1617290622, y: 5248501.604252841, z: 3186498.2137252213 },
+ { x: -1706870.4952433936, y: 5248490.611178698, z: 3186558.182971472 },
+ { x: -1706837.227189178, y: 5248420.334709732, z: 3186690.581380162 },
+ { x: -1706838.280444158, y: 5248431.37975438, z: 3186708.4743944216 },
+ { x: -1706773.0696515848, y: 5248373.01216906, z: 3186823.943446862 },
+ { x: -1706727.805384834, y: 5248323.242719114, z: 3186915.9148211516 },
+ { x: -1706710.854065587, y: 5248281.031240471, z: 3186987.549384787 },
+ { x: -1706660.1034110512, y: 5248266.553680115, z: 3187047.6342452955 },
+ { x: -1706604.7906532797, y: 5248253.292764083, z: 3187082.311741225 },
+ { x: -1706556.3289747096, y: 5248217.41920621, z: 3187155.538613598 },
+ { x: -1706516.2888762353, y: 5248217.691641104, z: 3187197.012414378 },
+ { x: -1706436.9808225571, y: 5248198.704904958, z: 3187267.311000274 },
+ { x: -1706345.7538517928, y: 5248165.481249246, z: 3187379.4674185305 }
+ ]
+
+ // 人员组2路径坐标
+ const PERSONNEL_PATH_COORDINATES_2 = [
+ { x: -1707020.4106680197, y: 5248239.972166492, z: 3187000.301322692 },
+ { x: -1706846.822522451, y: 5248275.0303560095, z: 3186986.011771928 },
+ { x: -1706851.3836389545, y: 5248300.681797178, z: 3186942.7035291386 },
+ { x: -1706844.580179418, y: 5248304.977808034, z: 3186932.891914393 },
+ { x: -1706818.9276717228, y: 5248278.222342581, z: 3186976.253684671 },
+ { x: -1706831.3209432173, y: 5248316.447298632, z: 3186957.2249293313 },
+ { x: -1706806.3169318594, y: 5248307.832821272, z: 3186919.6375066047 },
+ { x: -1706805.9829374112, y: 5248319.428155191, z: 3186900.13906115 },
+ { x: -1706795.069820001, y: 5248321.041829423, z: 3186896.925767256 },
+ { x: -1706797.8593846853, y: 5248325.909509062, z: 3186906.0008906457 },
+ { x: -1706806.3364665583, y: 5248330.644777029, z: 3186917.773814682 },
+ { x: -1706778.3135473165, y: 5248282.550132113, z: 3186963.408730601 },
+ { x: -1706750.0602398354, y: 5248252.482706784, z: 3187012.7495610164 },
+ { x: -1706738.0772460685, y: 5248263.416236532, z: 3187023.8067475185 },
+ { x: -1706691.7246759017, y: 5248270.110156667, z: 3187018.588901565 },
+ { x: -1706599.6318286993, y: 5248240.149769867, z: 3187087.254778178 },
+ { x: -1706564.1779400432, y: 5248218.9292086465, z: 3187146.335302665 },
+ { x: -1706486.5598449395, y: 5248207.86588749, z: 3187216.762631293 },
+ { x: -1706445.7375556522, y: 5248203.1875622, z: 3187252.8650745875 },
+ { x: -1706409.1757614242, y: 5248182.077526832, z: 3187307.1294440767 },
+ { x: -1706408.0269636167, y: 5248192.685664652, z: 3187323.2121423096 },
+ { x: -1706390.7352810341, y: 5248211.637499602, z: 3187344.1570185754 }
+ ]
+
/**
* 启动应急人员沿路径移动动画
* @param {Cesium.Viewer} viewer - Cesium viewer 实例
@@ -243,16 +290,175 @@ export function useEntityAnimation() {
}
}
+ /**
+ * 创建单个移动实体
+ * @param {Cesium.Viewer} viewer
+ * @param {Array} pathCoordinates - 路径坐标数组
+ * @param {Object} config - 配置
+ * @param {Cesium.JulianDate} startTime
+ * @param {Cesium.JulianDate} stopTime
+ * @returns {Cesium.Entity}
+ */
+ const createMovingEntity = (viewer, pathCoordinates, config, startTime, stopTime) => {
+ const positionProperty = new Cesium.SampledPositionProperty()
+ const numberOfPoints = pathCoordinates.length
+ const timeInterval = config.duration / (numberOfPoints - 1)
+
+ pathCoordinates.forEach((coord, index) => {
+ const time = Cesium.JulianDate.addSeconds(
+ startTime,
+ index * timeInterval,
+ new Cesium.JulianDate()
+ )
+ const position = new Cesium.Cartesian3(coord.x, coord.y, coord.z)
+ positionProperty.addSample(time, position)
+ })
+
+ const pulseScale = new Cesium.CallbackProperty((time) => {
+ const elapsed = Cesium.JulianDate.secondsDifference(time, startTime)
+ return 1.0 + Math.sin(elapsed * 3) * 0.3
+ }, false)
+
+ const icon = config.type === 'device' ? deviceIcon : soldierIcon
+ const trailColor = config.type === 'device' ? Cesium.Color.ORANGE : Cesium.Color.CYAN
+
+ return viewer.entities.add({
+ availability: new Cesium.TimeIntervalCollection([
+ new Cesium.TimeInterval({ start: startTime, stop: stopTime })
+ ]),
+ position: positionProperty,
+ orientation: new Cesium.VelocityOrientationProperty(positionProperty),
+ billboard: {
+ image: icon,
+ width: 48,
+ height: 56,
+ scale: pulseScale,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ scaleByDistance: new Cesium.NearFarScalar(1000, 1.5, 50000, 0.8)
+ },
+ path: {
+ resolution: 1,
+ material: new Cesium.PolylineGlowMaterialProperty({
+ glowPower: 0.4,
+ taperPower: 0.5,
+ color: trailColor
+ }),
+ width: 8,
+ leadTime: 0,
+ trailTime: config.duration
+ },
+ properties: {
+ type: config.type === 'device' ? 'animatedDevice' : 'animatedSoldier',
+ name: config.name,
+ department: config.department,
+ isAnimating: true
+ }
+ })
+ }
+
+ /**
+ * 启动多组移动动画（设备组 + 人员组2）
+ * @param {Cesium.Viewer} viewer
+ * @param {Object} options
+ */
+ const startMultipleMovements = (viewer, options = {}) => {
+ if (!viewer) {
+ console.warn('[useEntityAnimation] startMultipleMovements: viewer 为空')
+ return []
+ }
+
+ const config = {
+ duration: options.duration ?? 60
+ }
+
+ console.log('[useEntityAnimation] 启动多组移动动画...')
+
+ const startTime = Cesium.JulianDate.now()
+ const stopTime = Cesium.JulianDate.addSeconds(startTime, config.duration, new Cesium.JulianDate())
+
+ viewer.clock.startTime = startTime.clone()
+ viewer.clock.stopTime = stopTime.clone()
+ viewer.clock.currentTime = startTime.clone()
+ viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP
+ viewer.clock.multiplier = 1
+ viewer.clock.shouldAnimate = true
+
+ // 清除之前的动画实体
+ animatedEntities.value.forEach(entity => {
+ if (entity) viewer.entities.remove(entity)
+ })
+ animatedEntities.value = []
+
+ // 创建设备组移动实体
+ const deviceEntity = createMovingEntity(viewer, DEVICE_PATH_COORDINATES, {
+ duration: config.duration,
+ type: 'device',
+ name: '应急设备车',
+ department: '应急装备队'
+ }, startTime, stopTime)
+ animatedEntities.value.push(deviceEntity)
+
+ // 创建人员组2移动实体
+ const personnel2Entity = createMovingEntity(viewer, PERSONNEL_PATH_COORDINATES_2, {
+ duration: config.duration,
+ type: 'soldier',
+ name: '应急救援队员',
+ department: '应急救援队'
+ }, startTime, stopTime)
+ animatedEntities.value.push(personnel2Entity)
+
+ isAnimating.value = true
+
+ const removeListener = viewer.clock.onStop.addEventListener(() => {
+ console.log('[useEntityAnimation] 多组动画已结束')
+ isAnimating.value = false
+ removeListener()
+ })
+
+ console.log('[useEntityAnimation] 已启动 2 组额外移动动画')
+ return animatedEntities.value
+ }
+
+ /**
+ * 停止所有移动动画
+ * @param {Cesium.Viewer} viewer
+ */
+ const stopAllMovements = (viewer) => {
+ if (!viewer) return
+
+ viewer.clock.shouldAnimate = false
+
+ if (animatedEntity.value) {
+ viewer.entities.remove(animatedEntity.value)
+ animatedEntity.value = null
+ }
+
+ animatedEntities.value.forEach(entity => {
+ if (entity) viewer.entities.remove(entity)
+ })
+ animatedEntities.value = []
+
+ isAnimating.value = false
+ console.log('[useEntityAnimation] 已停止所有移动动画')
+ }
+
return {
animatedEntity,
+ animatedEntities,
isAnimating,
startPersonnelMovement,
+ startMultipleMovements,
stopPersonnelMovement,
+ stopAllMovements,
pauseAnimation,
resumeAnimation,
getStartPosition,
cartesianToLonLat,
- PERSONNEL_PATH_COORDINATES
+ PERSONNEL_PATH_COORDINATES,
+ DEVICE_PATH_COORDINATES,
+ PERSONNEL_PATH_COORDINATES_2
}
}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
index e065d0d..595eb5d 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
@@ -54,7 +54,10 @@
v-show="!isLeftPanelCollapsed"
class="situational-awareness__panel-column situational-awareness__panel-column--left"
>
-
+
@@ -164,6 +167,29 @@
:center-data="selectedCenter"
@close="showCenterDetail = false"
/>
+
+
+
+
+
+
+
+
+
+
+
@@ -179,6 +205,9 @@ import PersonnelDetail from "./components/Popups/PersonnelDetail.vue";
import EmergencyCenterDetail from "./components/Popups/EmergencyCenterDetail.vue";
import MapTooltip from "./components/shared/MapTooltip.vue";
import SceneLabel from "./components/SceneLabel.vue";
+import StretchableModal from "./components/shared/StretchableModal.vue";
+import ActionButton from "./components/shared/ActionButton.vue";
+import EmergencyPlanContent from "./components/shared/EmergencyPlanContent.vue";
import { useDisasterData } from "./composables/useDisasterData";
import { useDualMapCompare } from "./composables/useDualMapCompare";
import { useMapMarkers } from "./composables/useMapMarkers";
@@ -247,7 +276,7 @@ const {
const { tooltipState: mapTooltip, showTooltip, hideTooltip, updateTooltipPosition } = useMapTooltip();
// 实体动画功能
-const { startPersonnelMovement, stopPersonnelMovement, isAnimating } = useEntityAnimation();
+const { startPersonnelMovement, startMultipleMovements, stopPersonnelMovement, isAnimating } = useEntityAnimation();
// 当前显示 tooltip 的实体（用于相机移动时更新位置）
const currentTooltipEntity = ref(null);
@@ -255,6 +284,16 @@ const currentTooltipEntity = ref(null);
// 加载动画状态
const showLoading = ref(false);
+// 默认相机配置
+const DEFAULT_CAMERA_VIEW = {
+ lon: 108.011506,
+ lat: 30.175827,
+ height: 5000,
+ heading: 0,
+ pitch: -45,
+ roll: 0,
+};
+
// 范围圈实体
const rangeCircleEntity = ref(null);
@@ -553,16 +592,6 @@ onMounted(() => {
console.log("3D态势感知地图已就绪");
- // 默认相机配置
- const DEFAULT_CAMERA_VIEW = {
- lon: 108.011506,
- lat: 30.175827,
- height: 5000,
- heading: 0,
- pitch: -45,
- roll: 0,
- };
-
// 默认点加上图标标记，使用图片图标，图标路径为 packages\screen\src\views\3DSituationalAwarenessRefactor\assets\images\应急基地.png
const defaultPoint = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(
@@ -628,6 +657,79 @@ onMounted(() => {
console.log(`[index.vue] 已添加 ${simulatedPoints.length} 个模拟点位`);
+ // 添加三组路径动画的起点标记（用于"一键启动"）
+ // 路径1起点（原有人员）
+ const path1Start = new Cesium.Cartesian3(-1706079.1327424292, 5247893.165552528, 3187993.9339800295);
+ const path1StartEntity = viewer.entities.add({
+ position: path1Start,
+ billboard: {
+ image: soldierIcon,
+ width: 36,
+ height: 40,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ },
+ properties: {
+ type: 'soldier',
+ name: '应急救援人员',
+ department: '应急救援队',
+ location: '待命中',
+ estimatedArrival: '待启动',
+ isPathStartMarker: true,
+ pathId: 'path1'
+ }
+ });
+
+ // 路径2起点（设备组）
+ const path2Start = new Cesium.Cartesian3(-1706935.1617290622, 5248501.604252841, 3186498.2137252213);
+ const path2StartEntity = viewer.entities.add({
+ position: path2Start,
+ billboard: {
+ image: deviceIcon,
+ width: 36,
+ height: 40,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ },
+ properties: {
+ type: 'device',
+ name: '应急设备车',
+ deviceType: '应急装备',
+ location: '待命中',
+ estimatedArrival: '待启动',
+ isPathStartMarker: true,
+ pathId: 'path2'
+ }
+ });
+
+ // 路径3起点（人员组2）
+ const path3Start = new Cesium.Cartesian3(-1707020.4106680197, 5248239.972166492, 3187000.301322692);
+ const path3StartEntity = viewer.entities.add({
+ position: path3Start,
+ billboard: {
+ image: soldierIcon,
+ width: 36,
+ height: 40,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ },
+ properties: {
+ type: 'soldier',
+ name: '应急救援队员',
+ department: '应急救援队',
+ location: '待命中',
+ estimatedArrival: '待启动',
+ isPathStartMarker: true,
+ pathId: 'path3'
+ }
+ });
+
+ console.log('[index.vue] 已添加 3 个路径起点标记');
+
+
// camera.setView({
// ...DEFAULT_CAMERA_VIEW,
// });
@@ -886,6 +988,7 @@ const handleMapToolChange = async ({ tool, active }) => {
// 弹窗状态
const showPersonnelDetail = ref(false);
const showCenterDetail = ref(false);
+const showStretchableModal = ref(false);
// 选中的数据
const selectedPersonnel = ref({
@@ -978,7 +1081,7 @@ const handleMapTooltipClose = () => {
};
// 路径线实体引用
-const pathLineEntity = ref(null);
+const pathLineEntities = ref([]);
/**
* 绘制红色路径线
@@ -991,13 +1094,13 @@ const drawRedPathLine = (viewer) => {
}
// 如果已存在路径线，先移除
- if (pathLineEntity.value) {
- viewer.entities.remove(pathLineEntity.value);
- pathLineEntity.value = null;
- }
+ pathLineEntities.value.forEach(entity => {
+ if (entity) viewer.entities.remove(entity);
+ });
+ pathLineEntities.value = [];
- // 路径坐标点
- const pathCoordinates = [
+ // 路径1坐标点（原有人员路径）
+ const pathCoordinates1 = [
{ 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 },
@@ -1011,27 +1114,70 @@ const drawRedPathLine = (viewer) => {
{ x: -1706343.1007708232, y: 5248165.925888667, z: 3187382.186124808 }
];
- // 将坐标点转换为 Cartesian3 数组
- const positions = pathCoordinates.map(coord =>
- new Cesium.Cartesian3(coord.x, coord.y, coord.z)
- );
+ // 路径2坐标点（设备组路径）
+ const pathCoordinates2 = [
+ { x: -1706935.1617290622, y: 5248501.604252841, z: 3186498.2137252213 },
+ { x: -1706870.4952433936, y: 5248490.611178698, z: 3186558.182971472 },
+ { x: -1706837.227189178, y: 5248420.334709732, z: 3186690.581380162 },
+ { x: -1706838.280444158, y: 5248431.37975438, z: 3186708.4743944216 },
+ { x: -1706773.0696515848, y: 5248373.01216906, z: 3186823.943446862 },
+ { x: -1706727.805384834, y: 5248323.242719114, z: 3186915.9148211516 },
+ { x: -1706710.854065587, y: 5248281.031240471, z: 3186987.549384787 },
+ { x: -1706660.1034110512, y: 5248266.553680115, z: 3187047.6342452955 },
+ { x: -1706604.7906532797, y: 5248253.292764083, z: 3187082.311741225 },
+ { x: -1706556.3289747096, y: 5248217.41920621, z: 3187155.538613598 },
+ { x: -1706516.2888762353, y: 5248217.691641104, z: 3187197.012414378 },
+ { x: -1706436.9808225571, y: 5248198.704904958, z: 3187267.311000274 },
+ { x: -1706345.7538517928, y: 5248165.481249246, z: 3187379.4674185305 }
+ ];
- // 创建红色路径线实体
- 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
- // })
- }
+ // 路径3坐标点（人员组2路径）
+ const pathCoordinates3 = [
+ { x: -1707020.4106680197, y: 5248239.972166492, z: 3187000.301322692 },
+ { x: -1706846.822522451, y: 5248275.0303560095, z: 3186986.011771928 },
+ { x: -1706851.3836389545, y: 5248300.681797178, z: 3186942.7035291386 },
+ { x: -1706844.580179418, y: 5248304.977808034, z: 3186932.891914393 },
+ { x: -1706818.9276717228, y: 5248278.222342581, z: 3186976.253684671 },
+ { x: -1706831.3209432173, y: 5248316.447298632, z: 3186957.2249293313 },
+ { x: -1706806.3169318594, y: 5248307.832821272, z: 3186919.6375066047 },
+ { x: -1706805.9829374112, y: 5248319.428155191, z: 3186900.13906115 },
+ { x: -1706795.069820001, y: 5248321.041829423, z: 3186896.925767256 },
+ { x: -1706797.8593846853, y: 5248325.909509062, z: 3186906.0008906457 },
+ { x: -1706806.3364665583, y: 5248330.644777029, z: 3186917.773814682 },
+ { x: -1706778.3135473165, y: 5248282.550132113, z: 3186963.408730601 },
+ { x: -1706750.0602398354, y: 5248252.482706784, z: 3187012.7495610164 },
+ { x: -1706738.0772460685, y: 5248263.416236532, z: 3187023.8067475185 },
+ { x: -1706691.7246759017, y: 5248270.110156667, z: 3187018.588901565 },
+ { x: -1706599.6318286993, y: 5248240.149769867, z: 3187087.254778178 },
+ { x: -1706564.1779400432, y: 5248218.9292086465, z: 3187146.335302665 },
+ { x: -1706486.5598449395, y: 5248207.86588749, z: 3187216.762631293 },
+ { x: -1706445.7375556522, y: 5248203.1875622, z: 3187252.8650745875 },
+ { x: -1706409.1757614242, y: 5248182.077526832, z: 3187307.1294440767 },
+ { x: -1706408.0269636167, y: 5248192.685664652, z: 3187323.2121423096 },
+ { x: -1706390.7352810341, y: 5248211.637499602, z: 3187344.1570185754 }
+ ];
+
+ // 绘制三条路径线
+ const allPaths = [pathCoordinates1, pathCoordinates2, pathCoordinates3];
+
+ allPaths.forEach((pathCoordinates, index) => {
+ const positions = pathCoordinates.map(coord =>
+ new Cesium.Cartesian3(coord.x, coord.y, coord.z)
+ );
+
+ const pathEntity = viewer.entities.add({
+ polyline: {
+ positions: positions,
+ width: 5,
+ material: Cesium.Color.RED,
+ clampToGround: true
+ }
+ });
+
+ pathLineEntities.value.push(pathEntity);
});
- console.log('[index.vue] 红色路径线已绘制');
+ console.log('[index.vue] 已绘制 3 条红色路径线');
};
/**
@@ -1053,8 +1199,20 @@ const handleStartDispatch = (payload) => {
setTimeout(() => {
showLoading.value = false;
- // 启动应急人员沿路径移动动画
if (mapStore.viewer) {
+ // 移除路径起点标记（因为动画实体会从起点开始显示）
+ const entitiesToRemove = [];
+ mapStore.viewer.entities.values.forEach(entity => {
+ if (entity.properties && entity.properties.isPathStartMarker) {
+ entitiesToRemove.push(entity);
+ }
+ });
+ entitiesToRemove.forEach(entity => {
+ mapStore.viewer.entities.remove(entity);
+ });
+ console.log(`[index.vue] 已移除 ${entitiesToRemove.length} 个路径起点标记`);
+
+ // 启动应急人员沿路径移动动画
console.log('[index.vue] 启动应急人员移动动画...');
startPersonnelMovement(mapStore.viewer, {
duration: 60, // 60秒完成整个路径，移动更清晰可见
@@ -1062,12 +1220,78 @@ const handleStartDispatch = (payload) => {
personnelName: '应急救援人员',
department: '应急救援队'
});
+
+ // 同时启动多组移动动画（设备组 + 人员组2）
+ startMultipleMovements(mapStore.viewer, {
+ duration: 60
+ });
+
+ // 缓慢拉近到能看到所有3组移动实体的全景位置
+ const { camera } = mapStore.services();
+
+ console.log('[index.vue] 相机缓慢飞向最佳全景位置...');
+
+ // 收集所有3组路径的关键点（起点和终点），用于计算最佳视角
+ const allPathPoints = [
+ // 路径1（原有人员）
+ new Cesium.Cartesian3(-1706079.1327424292, 5247893.165552528, 3187993.9339800295), // 起点
+ new Cesium.Cartesian3(-1706343.1007708232, 5248165.925888667, 3187382.186124808), // 终点
+ // 路径2（设备组）
+ new Cesium.Cartesian3(-1706935.1617290622, 5248501.604252841, 3186498.2137252213), // 起点
+ new Cesium.Cartesian3(-1706345.7538517928, 5248165.481249246, 3187379.4674185305), // 终点
+ // 路径3（人员组2）
+ new Cesium.Cartesian3(-1707020.4106680197, 5248239.972166492, 3187000.301322692), // 起点
+ new Cesium.Cartesian3(-1706390.7352810341, 5248211.637499602, 3187344.1570185754) // 终点
+ ];
+
+ // 转换为经纬度格式
+ const trajectoryPoints = allPathPoints.map(point => {
+ const cartographic = Cesium.Cartographic.fromCartesian(point);
+ return {
+ lon: Cesium.Math.toDegrees(cartographic.longitude),
+ lat: Cesium.Math.toDegrees(cartographic.latitude)
+ };
+ });
+
+ // 使用智能聚焦方法飞向能看到所有路径的最佳位置
+ camera.fitBoundsWithTrajectory(trajectoryPoints, {
+ duration: 5, // 5秒缓慢飞行
+ padding: 0.2 // 20% 边距，确保所有点都在视野内
+ });
} else {
console.warn('[index.vue] 地图viewer未就绪，无法启动动画');
}
}, 3000);
};
+/**
+ * 处理查看智能应急方案事件
+ * 打开智能应急方案弹窗
+ */
+const handleViewPlan = (plan) => {
+ console.log('[index.vue] 查看智能应急方案:', plan);
+ showStretchableModal.value = true;
+};
+
+/**
+ * 处理弹窗中的一键启动按钮点击事件
+ * 关闭弹窗并执行一键启动功能
+ */
+const handleModalStartDispatch = () => {
+ console.log('[index.vue] 弹窗中点击一键启动');
+
+ // 关闭弹窗
+ showStretchableModal.value = false;
+
+ // 执行一键启动逻辑（与handleStartDispatch相同）
+ handleStartDispatch({
+ planName: '智能应急方案',
+ plan: disasterData.forceDispatch.value.plan,
+ responseLevel: disasterData.forceDispatch.value.responseLevel,
+ estimatedClearTime: disasterData.forceDispatch.value.estimatedClearTime
+ });
+};
+
/**
* 创建或更新范围圈
* @param {Cesium.Viewer} viewer - Cesium viewer 实例