记一次Cesium的property插值用法
发表于:2023-04-23 | 分类: 前端
字数统计: 566 | 阅读时长: 2分钟 | 阅读量:

cesium 中描述 entity 随时间动态变化时,必然要用到 property 插值,来对应时间和实体的状态,最近有用到这个属性,记录一下:

一般常用的插值有两种,一种是连续值插值SampleProperty,即给个时间段和一个状态区间,cesium会在区间内自己做平滑处理;
一种是枚举值插值TimeIntervalCollectionProperty,即一个时间段对应一个状态,不会做平滑插值。

假设现在有一个entity:

1
2
3
4
5
6
7
8
9
let myEntity = vie.entities.add({
id: options.id,
model: {
uri: `gltf/car.gltf`,
scale: 0.8,
minimumPixelSize: 32,
color: Cesium.Color.fromCssColorString('#ff0'),
},
});

以下的source都是若干个 {时间,对应值组成的对象} 组成的数组list

  1. SampleProperty用法:

首先是特殊的SampledProperty,使用SampledPositionProperty,方便设置entity的位置

1
2
3
4
5
6
7
8
let propertyPosition = new Cesium.SampledPositionProperty();
for (let item of source) {
let time = Cesium.JulianDate.fromDate(new Date(item.timeStamp));
let position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, -1);
// 为每个 timeStamp 添加 经纬度位置信息,以实现entity平滑移动
propertyPosition.addSample(time, position);
}
myEntity.position = propertyPosition

其次是普通的SampledProperty,可以随意设置自定义的number值,平滑线性处理

1
2
3
4
5
6
let customProperty = new Cesium.SampledProperty(Number);
for (let i = 0; i < source.length; i++) {
let time = Cesium.JulianDate.fromDate(new Date(source[i].timeStamp));
customProperty.addSample(time, source[i].speed)
}
myEntity.customProperty = customProperty
  1. TimeIntervalCollectionProperty用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
let property = new Cesium.TimeIntervalCollectionProperty(Number);
for (let i = 0; i < source.length - 1; i++) {
// 为每个时间段添加一个值属性 (timeInterval试了下用fromDate不生效,只能用Iso8601转,后续再研究下为啥到底可不可以)
property.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: `${new Date(source[i].timeStamp).toISOString()}/${new Date(source[i + 1].timeStamp).toISOString()}`,
isStartIncluded: true,
isStopIncluded: false,
data: source[i].courseAngle
})
)
}
myEntity.timeIntervalProperty = property

上述各种property赋值给entity后,监听clock时间变化取到对应的值,即可进行对应业务逻辑的实现

1
2
3
4
5
6
viewer.clock.onTick.addEventListener(() => {
// let getProperty = myEntity.customProperty.getValue(viewer.clock.currentTime)
// let getProperty = myEntity.timeIntervalProperty.getValue(viewer.clock.currentTime)
let getProperty = myEntity.position.getValue(viewer.clock.currentTime)
// todo
})

至于混合的property:CompositeProperty
,即把上述两种property混合到一个property的用法,实现部分时间段线性变化,部分时间段跳跃枚举变化,理论上提供了对应的api,是可以实现的,由于暂时没用到,不做记录,后续遇到再研究。。。

上一篇:
使用protobuf进行前后端数据交互
下一篇:
基于websocket使用mapbox结合threebox实现车辆实时轨迹展示