drawRoute，movePlot
This commit is contained in:
liaoboping
parent
8232878faf
commit
83ee5d7891
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user