Cesium中让模型动起来，丝滑又顺畅

创作时间:

作者:

@小白创作中心

Cesium中让模型动起来，丝滑又顺畅

引用

来源

https://juejin.cn/post/7458962056131805194

Cesium 是一个用于创建 3D 地球和地图的开源 JavaScript 库，广泛应用于数字孪生、智慧城市等领域。本文将详细介绍如何在 Cesium 中实现模型插值运动，包括视角切换、实时跟踪、漫游数据获取等功能。

前言

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

应用场景

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

工业设备：在工厂中展示机器人臂、生产线设备的运行状态和路径，通过模型运动直观展示设备的实时状态，便于监控和诊断；
物流运输：跟踪和模拟运输车辆（如无人驾驶车辆、物流车队）的实时位置和运行轨迹，优化调度路径，提升物流效率；
应急救援：模拟救援人员或设备在灾害现场的运动轨迹，制定最佳救援路径。
人流管理：在智慧城市中，模拟和分析人员聚集区域的动态分布（如地铁站、商场），通过模拟发现人员或设备在特定场景下的潜在风险；
安防巡逻：模拟巡逻机器人或无人机在复杂环境中的运动行为，帮助培训人员快速熟悉复杂环境，提升应对能力。
智能园区导航：为用户提供车辆或人员在园区内的实时导航指引，提供动态、清晰、直观的导航体验；
虚拟博物馆/展览：结合路径漫游功能展示文物或展品的动态故事。
自然灾害模拟：预测台风、洪水等灾害中应急设备和人员的部署路径，辅助政府或企业在应急场景中做出快速决策。
城市数字孪生：通过路径运动展示城市建设动态，例如公共交通系统的运行，通过视角跟踪和动态交互提升用户体验。

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

代码解析

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

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

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

_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 相机，并启用动画。

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

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

_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方法支持将模型沿着插值路径移动，并提供额外选项（如贴地、轨迹显示等）。

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

核心设置：

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

实时数据获取

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

_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);
        });
}