Cesium应用（八）：物体运动的实现思路

物体运动

在 Cesium 三维GIS项目中，物体运动在仿真模拟，城镇/海洋数字孪生，无人机全景模拟，应急救援等业务场景中比较常见的项目需求。

业务场景

在cesium实际开发中，根据业务需求，一般分为两种情况，以无人机为例：一种是根据无人机的实时飞行同步在cesium场景中，通常还有无人机视频回传，关键帧识别等功能；一种是历史轨迹回放，即无人机飞过的路径再次在cesium场景中显示。

实时点位驱动

这里需要拿到无人机飞行时的接口，或者通过无人机回传时视频进行识别来获取无人机的飞行姿态和位置信息。实现步骤如下：

需要通过长链接websocket实时获取到无人机的飞行姿态，位置信息，监控视频等；
通过pinia/vuex建立一个飞行姿态数据缓冲区，用来实时存储websocket回传的数据，根据回传的数据计算出无人机的位置和控制模型朝向的四元数，
使用requestAnimationFrame动画帧来驱动无人机不断地更新位置和四元数，以达到无人机实时点位驱动。伪代码如下：

js 复制代码

// 1、模拟websocket飞行姿态，位置信息，提交到pinia中
const submitFlightAttitude = (dt) => {
    const temp = flightParams.speed / 60 / 60 / 60 / 110
    flightParams.longitude += temp * Math.cos(flightParams.heading)
    flightParams.latitude -= temp * Math.sin(flightParams.heading)
    const { longitude, latitude, height, heading, pitch, roll } = flightParams
    if (height <= 120 && height >= 5) {
        flightParams.height += temp * Math.sin(pitch) * 110 * 1000 * 10
    } else {
        if (height > 120) flightParams.height = 120
        if (height < 5) flightParams.height = 5
    }
    const position = cesium.Cartesian3.fromDegrees(longitude, latitude, height)
    const hpr = new cesium.HeadingPitchRoll(heading, pitch, roll)
    const orientation = cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
    )
    droneStore.setDroneFilghtParams({ position, orientation })
}
// 2、这里未做缓冲区处理，直接存储当前的无人机信息
import { reactive } from 'vue'
const droneFlight = reactive({
    position: null,
    orientation: null
})

export const useDroneFilght = () => {
    const setDroneFilghtParams = (val) => {        
        droneFlight.position = val.position
        droneFlight.orientation = val.orientation
    }
    
    return {
        droneFlight,
        setDroneFilghtParams
    };
}

export const droneFilghtStoreHook = () => {
    return useDroneFilght();
}
// 3、动画帧驱动无人机位置和姿态更新
const render = () => {
    model.position = droneStore.droneFlight.position
    model.orientation = droneStore.droneFlight.orientation
    requestAnimationFrameId = requestAnimationFrame(render)
}

时序轨迹回放

首先轨迹回放意味着飞行的数据已经存储在数据库中了，包括具体的飞行时间，飞行路径的关键点等，在cesium中有很多方式可以实现，包括callbackProperty，SampledPositionProperty、requestAnimationFrame等来实现。这里使用SampledPositionProperty以时间进行插值来实现。实现步骤如下：

打开cesium初始时timeline部件，并使用css样式进行隐藏，以免影响到整体页面的美观。
以飞行时间来初始化开始时刻和结束时刻，并将该时间段赋值给时钟，或者以实际开始时刻和结束时刻进行赋值，设置时间倍率，来控制演示时间，最后将时钟聚焦到该飞行时间。
通过SampledPositionProperty使用时间进行计算出无人机飞行的路径。
时间计算出的路径，使用VelocityOrientationProperty自动计算出飞行姿态伪代码如下：