diff --git a/src/components/Common/Cesium/index.js b/src/components/Common/Cesium/index.js index 682ada2..dc2a8c0 100644 --- a/src/components/Common/Cesium/index.js +++ b/src/components/Common/Cesium/index.js @@ -47,7 +47,9 @@ export default class MyCesium { operations = [] // 已添加的军标 plots = [] - + // 已添加的路线 + routes = [] + constructor(dom, options = {}) { const imageryProvider = new Cesium.UrlTemplateImageryProvider({ url: window._CONFIG.ImageryProviderUrl || MyCesium.ImageryProviderUrl, @@ -269,4 +271,86 @@ export default class MyCesium { this.viewer.entities.add(plot) this.plots.push(plot) } + + /** + * 连续坐标绘制路线 + * @param coordinates [[longitude, latitude], ...] + */ + drawRouteByCoordinates(coordinates) { + const route = { + id: Cesium.createGuid(), + polyline: { + positions: Cesium.Cartesian3.fromDegreesArray(coordinates.flat()), + width: 2, + material: Cesium.Color.fromCssColorString('red'), + show: true, + clampToGround: true, + }, + properties: {}, + } + this.viewer.entities.add(route) + this.routes.push(route) + } + + /** + * 连续坐标指定军标移动 + * @param plotId 军标id + * @param coordinates [[longitude, latitude], ...] + */ + initPlotMoving(plot, coordinates) { + // viewer.clock 控制了场景中时间的变化，从而驱动动画。 + const startTime = Cesium.JulianDate.now() + const stopTime = Cesium.JulianDate.addSeconds(startTime, 1, new Cesium.JulianDate()) // 动画持续1秒 + this.viewer.clock.startTime = startTime.clone() + this.viewer.clock.stopTime = stopTime.clone() + this.viewer.clock.currentTime = startTime.clone() + this.viewer.clock.clockRange = Cesium.ClockRange.CLAMPED // 动画播放一次后停止:cite[2] + this.viewer.clock.multiplier = 1 // 时间流逝速度，默认为1 + const positionProperty = new Cesium.SampledPositionProperty() + // 假设你获取到的路线坐标点数组是 positions（Cartesian3数组） + // 并且这些点应该在1秒内完成移动 + const positions = Cesium.Cartesian3.fromDegreesArray(coordinates.flat()) // 你的坐标路线 + const sampleTimeStep = 1 / (positions.length - 1) // 计算每个样本点之间的时间间隔（总时间为1秒） + for (let i = 0; i < positions.length; i++) { + const time = Cesium.JulianDate.addSeconds(startTime, i * sampleTimeStep, new Cesium.JulianDate()) + positionProperty.addSample(time, positions[i]) + } + // 将实体的位置关联到 SampledPositionProperty + plot.position = positionProperty + // 可选：让图标朝向运动方向 + // plot.orientation = new Cesium.VelocityOrientationProperty(positionProperty) // cite[8] + + plot._isMoving = true + } + movePlotByCoordinates(plotId, coordinates) { + // 实体 + const targetPlot = this.viewer.entities.getById(plotId) + if (targetPlot._isMoving === true) { + // 1. 获取新的路线坐标点（假设是同步获取的，或者是在回调中） + const positions = Cesium.Cartesian3.fromDegreesArray(coordinates.flat()) // 你的坐标路线 + + // 2. 清除旧的位置样本 + targetPlot.position._property._values = [] + targetPlot.position._property._times = [] + + // 3. 计算新的开始时间和结束时间 + const newStartTime = Cesium.JulianDate.now() + const newStopTime = Cesium.JulianDate.addSeconds(newStartTime, 1, new Cesium.JulianDate()) + + // 4. 添加新的位置样本 + const newSampleTimeStep = 1 / (positions.length - 1) + for (let i = 0; i < positions.length; i++) { + const time = Cesium.JulianDate.addSeconds(newStartTime, i * newSampleTimeStep, new Cesium.JulianDate()) + targetPlot.position.addSample(time, positions[i]) + } + + // 5. 重置时钟以立即开始新的动画 + this.viewer.clock.startTime = newStartTime.clone() + this.viewer.clock.stopTime = newStopTime.clone() + this.viewer.clock.currentTime = newStartTime.clone() + this.viewer.clock.shouldAnimate = true // 确保动画开始播放:cite[2] + } else { + this.initPlotMoving(targetPlot, coordinates) + } + } } diff --git a/src/views/subsystem/display/index.vue b/src/views/subsystem/display/index.vue index af9a810..4d07f48 100644 --- a/src/views/subsystem/display/index.vue +++ b/src/views/subsystem/display/index.vue @@ -41,15 +41,14 @@ export default { this.roomName = this.$route.params.roomName this.scenarioId = this.$route.params.scenarioId this.scenarioName = this.$route.params.scenarioName + }, + mounted() { + this.cesium = new window.MyCesium('display-cesium-container') this.initWebsocket() - window.addEventListener('beforeunload', (e) => { this.closeWebsocket() return true }) - }, - mounted() { - this.cesium = new window.MyCesium('display-cesium-container') this.getZzbzllTreeData(true) }, beforeDestroy() { @@ -65,6 +64,12 @@ export default { this.roomInfo.remainTime = response.data.remain_time this.roomInfo.duringTime = response.data.during_time break + case 'path_init': + this.cesium.drawRouteByCoordinates(response.data.coordinates) + break + case 'path_update': + this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.coordinates) + break default: break } diff --git a/src/views/subsystem/model/index.vue b/src/views/subsystem/model/index.vue index 6de93d2..181fc95 100644 --- a/src/views/subsystem/model/index.vue +++ b/src/views/subsystem/model/index.vue @@ -304,15 +304,14 @@ export default { this.roomName = this.$route.params.roomName this.scenarioId = this.$route.params.scenarioId this.scenarioName = this.$route.params.scenarioName + }, + mounted() { + this.cesium = new window.MyCesium('model-cesium-container') this.initWebsocket() - window.addEventListener('beforeunload', (e) => { this.closeWebsocket() return true }) - }, - mounted() { - this.cesium = new window.MyCesium('model-cesium-container') this.getZzbzllTreeData(true) }, beforeDestroy() { @@ -328,6 +327,12 @@ export default { this.roomInfo.remainTime = response.data.remain_time this.roomInfo.duringTime = response.data.during_time break + case 'path_init': + this.cesium.drawRouteByCoordinates(response.data.coordinates) + break + case 'path_update': + this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.coordinates) + break default: break } diff --git a/src/views/subsystem/scene/index.vue b/src/views/subsystem/scene/index.vue index a83953c..30a9c73 100644 --- a/src/views/subsystem/scene/index.vue +++ b/src/views/subsystem/scene/index.vue @@ -285,15 +285,14 @@ export default { this.roomName = this.$route.params.roomName this.scenarioId = this.$route.params.scenarioId this.scenarioName = this.$route.params.scenarioName + }, + mounted() { + this.cesium = new window.MyCesium('scene-cesium-container') this.initWebsocket() - window.addEventListener('beforeunload', (e) => { this.closeWebsocket() return true }) - }, - mounted() { - this.cesium = new window.MyCesium('scene-cesium-container') this.getZzbzllTreeData(true) this.getModelListData() }, @@ -310,6 +309,12 @@ export default { this.roomInfo.remainTime = response.data.remain_time this.roomInfo.duringTime = response.data.during_time break + case 'path_init': + this.cesium.drawRouteByCoordinates(response.data.coordinates) + break + case 'path_update': + this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.coordinates) + break default: break }