Bootstrap

【Cesium】轨迹回放 带进度条更新、暂停/继续、站点信息

  效果如下:

轨迹回放原生

实现绘制轨迹比较简单,主要就是拿到经纬度数据绘制点线,比较重要的是回放功能。

基于Cesium:

  • 使用 SampledPositionProperty 定义路径点的插值。
  • 使用 Entity 承载路径点实体(如模型或图标)。
  • 使用 PolylineGraphics 绘制动态路径线条。
  • 使用 Cesium.ClockCallbackProperty 实现路径随时间动态更新。

核心代码:

const positionProperty = new Cesium.SampledPositionProperty();
positionProperty.addSample(Cesium.JulianDate.now(), Cesium.Cartesian3.fromDegrees(lon, lat, height));

这样每个点就和cesium中的clock中的时间绑定起来 

viewer.clock.shouldAnimate = false; // 停止动画
viewer.clock.shouldAnimate = true; // 开始动画

如此就是回放进度条的开始/暂停实现,实际是控制 图标的开始和停止,从而实现轨迹播放和停止

底层 Cesium 控制实体开始和停止的机制

  1. 核心原理:时间驱动 + 插值计算
    • Cesium 中的动态属性(如 position)与时间关联。通过给 SampledPositionProperty 添加时间点(JulianDate)和对应的位置(Cartesian3),Cesium 可以在这些时间点之间进行插值,计算实体在任意时间的位置。
    • 实体的运动并不是实时计算,而是 Cesium 根据时间轴(Clock)的进度自动更新位置。

核心:由于每个点就和cesium中的clock中的时间绑定 ,所以也就可以得到某一时间这个点的位置,从而实现上述效果。

均为本人实现案例,需要请联系,备注来意

;