效果如下:
轨迹回放原生
实现绘制轨迹比较简单,主要就是拿到经纬度数据绘制点线,比较重要的是回放功能。
基于Cesium:
- 使用
SampledPositionProperty
定义路径点的插值。 - 使用
Entity
承载路径点实体(如模型或图标)。 - 使用
PolylineGraphics
绘制动态路径线条。 - 使用
Cesium.Clock
和CallbackProperty
实现路径随时间动态更新。
核心代码:
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 控制实体开始和停止的机制
- 核心原理:时间驱动 + 插值计算
- Cesium 中的动态属性(如
position
)与时间关联。通过给SampledPositionProperty
添加时间点(JulianDate
)和对应的位置(Cartesian3
),Cesium 可以在这些时间点之间进行插值,计算实体在任意时间的位置。- 实体的运动并不是实时计算,而是 Cesium 根据时间轴(
Clock
)的进度自动更新位置。
核心:由于每个点就和cesium中的clock中的时间绑定 ,所以也就可以得到某一时间这个点的位置,从而实现上述效果。
均为本人实现案例,需要请联系,备注来意