【开源】Cesium中让模型动起来，丝滑又顺畅

大家好，我是日拱一卒的攻城师不浪，致力于技术与艺术的融合。这是2025年输出的第3/100篇文章。

前言

之前我们讲过Cesium中的模型运动，使用加载czml文件格式的技术方案，今天我们来说一下如何在Cesium中做模型插值运动，包含视角切换、视角实时跟踪、漫游数据获取以及控制运动暂停继续等功能。开源地址在文末自取。

应用场景

在数字孪生领域，模型运动和视角跟踪技术有着广泛的应用：

工业设备：在工厂中展示机器人臂、生产线设备的运行状态和路径，通过模型运动直观展示设备的实时状态，便于监控和诊断；

物流运输：跟踪和模拟运输车辆（如无人驾驶车辆、物流车队）的实时位置和运行轨迹，优化调度路径，提升物流效率；
应急救援：模拟救援人员或设备在灾害现场的运动轨迹，制定最佳救援路径。

人流管理：在智慧城市中，模拟和分析人员聚集区域的动态分布（如地铁站、商场），通过模拟发现人员或设备在特定场景下的潜在风险；
安防巡逻：模拟巡逻机器人或无人机在复杂环境中的运动行为，帮助培训人员快速熟悉复杂环境，提升应对能力。
智能园区导航：为用户提供车辆或人员在园区内的实时导航指引，提供动态、清晰、直观的导航体验；
虚拟博物馆/展览：结合路径漫游功能展示文物或展品的动态故事。
自然灾害模拟：预测台风、洪水等灾害中应急设备和人员的部署路径，辅助政府或企业在应急场景中做出快速决策。

城市数字孪生：通过路径运动展示城市建设动态，例如公共交通系统的运行，通过视角跟踪和动态交互提升用户体验。

所以说，模型实时运动模拟与跟踪，在数字孪生中实现了对复杂系统的多方面掌控和优化。不仅提升了决策效率，还创造了更多创新性的应用场景，为智慧城市、工业4.0等领域提供了重要支撑。

代码解析

接下来我们基于Cesium来封装插值运动类 Roaming

插值计算（漫游路径的构建）

通过 _ComputeRoamingLineProperty 方法使用 Cesium.SampledPositionProperty 创建插值路径。

javascript 复制代码

_ComputeRoamingLineProperty(Lines, time) {
    let property = new Cesium.SampledPositionProperty();
    let start = Cesium.JulianDate.now();
    let stop = Cesium.JulianDate.addSeconds(start, time, new Cesium.JulianDate());
    for (let i = 0; i < Lines.length; i++) {
        let position = Lines[i];
        let sampleTime = Cesium.JulianDate.addSeconds(start, (i * time) / Lines.length, new Cesium.JulianDate());
        property.addSample(sampleTime, position);
    }
    return property;
}

关键点：

通过 Cesium.JulianDate 计算时间节点。
对点集合 Lines 每个点插值计算，将位置与时间绑定。
返回包含插值路径的 SampledPositionProperty。

相机漫游

调用 cameraRoaming 方法将插值路径绑定到 Cesium 相机，并启用动画。

javascript 复制代码

cameraRoaming(Lines) {
    let property = this._ComputeRoamingLineProperty(Lines, this.time);
    this._InitRoaming(property, this.start, this.stop);
}

核心实现 ：通过 _InitRoaming 设置相机的漫游路径，并利用 VelocityOrientationProperty 计算朝向。

javascript 复制代码

_InitRoaming(position, start, stop) {
    this.entity = this.viewer.entities.add({
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start, stop })]),
        position,
        orientation: new Cesium.VelocityOrientationProperty(position),
    });
    this.viewer.trackedEntity = this.entity;
}

模型漫游

modelRoaming 方法支持将模型沿着插值路径移动，并提供额外选项（如贴地、轨迹显示等）。

javascript 复制代码

modelRoaming(options) {
    let property = this._ComputeRoamingLineProperty(options.Lines, this.time);
    this._modelInitRoaming(property, this.start, this.stop, options.model, options.path);
}

核心设置：

结合模型配置 (Cesium.ModelGraphics) 和插值路径绑定。
支持设置轨迹、多段线、圆柱等附加特效。

实时数据获取

实时更新漫游进度、位置和高度等信息。

javascript 复制代码

_realTimeData(center) {
    let geoPt1 = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(center);
    this.data.longitude = Cesium.Math.toDegrees(geoPt1.longitude).toFixed(6);
    this.data.latitude = Cesium.Math.toDegrees(geoPt1.latitude).toFixed(6);
    Cesium.sampleTerrainMostDetailed(this.viewer.terrainProvider, [geoPt1])
        .then(updatedPositions => {
            this.data.terrainHeight = updatedPositions[0].height.toFixed(2);
        });
}

辅助功能

暂停与继续 ：通过 PauseOrContinue 控制 viewer.clock.shouldAnimate 实现。
速度调节 ：通过修改 viewer.clock.multiplier 动态调整。
取消漫游 ：EndRoaming 方法清理已绑定的实体和事件。

最后

【源码地址】：github.com/jiawanlong/...

【不浪的cesium开源地址】：github.com/tingyuxuan2...

如果开源对您有帮助，希望可以给一个star，鼓励我们开源更多！

有想学习Cesium的朋友，可以了解下不浪的教程《Cesium从入门到实战》，将Cesium的知识点进行串联，让不了解Cesium的小伙伴拥有一个完整的学习路线，并最终完成一个智慧城市的完整项目，课程也在不断更新迭代中，想了解+作者：brown_7778（备注来意）。
有需要进可视化&Webgis交流群可以加我：brown_7778（备注来意）。