常用实例
CallbackProperty
CallbackProperty
是一种用于动态计算实体(Entity)属性的机制。它允许你通过回调函数在每一帧中动态计算属性的值,从而实现动画、随时间变化的属性等效果。
语法
js
new Cesium.CallbackProperty(callback, isConstant);
- callback: 计算属性值的函数,接收 (time, result) 参数
- isConstant: 如果为 true,只计算一次(静态);为 false 则每帧计算(动态)
示例一:动态圆周运动
点击查看代码
js
// 创建沿圆周运动的点
const startTime = Cesium.JulianDate.now();
const position = new Cesium.CallbackProperty((time, result) => {
// 计算经过的时间(秒)
const elapsed = Cesium.JulianDate.secondsDifference(time, startTime);
// 计算位置(圆周运动)
const radius = 100000; // 半径100公里
const angle = (elapsed * Math.PI) / 10; // 每10秒转180度
return Cesium.Cartesian3.fromDegrees(
116.39 + (radius * Math.cos(angle)) / 111000, // 经度
39.9 + (radius * Math.sin(angle)) / 111000, // 纬度
5000 // 高度
);
}, false); // false 表示动态变化
const point = viewer.entities.add({
position: position,
point: {
pixelSize: 20,
color: Cesium.Color.RED,
},
});
viewer.clock.shouldAnimate = true; // 确保时钟动画开启
viewer.trackedEntity = point; // 使相机跟随点移动
示例二:动态闪烁点
点击查看代码
js
const pointEntity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(116.3975, 39.9075, 50),
point: {
color: Cesium.Color.RED.withAlpha(0.8), // 80% 不透明的红色
pixelSize: 20, // 直径20像素
outlineColor: Cesium.Color.WHITE, // 白色轮廓
outlineWidth: 3, // 轮廓宽度3像素
show: true, // 默认显示
// heightReference:Cesium.HeightReference.CLAMP_TO_GROUND, // 不能设置为 CLAMP_TO_GROUND 贴地显示
},
});
// 使用时间动态颜色实现闪烁
pointEntity.point.color = new Cesium.CallbackProperty((time) => {
const alpha = 0.5 + 0.5 * Math.sin(Date.now() / 500);
return Cesium.Color.RED.withAlpha(alpha);
}, false);
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.3975, 39.9075, 500),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: Cesium.Math.toRadians(0),
},
});
SampledPositionProperty
SampledPositionProperty
是 Cesium 中用于描述随时间变化的位置的核心类,特别适合创建精确控制的运动轨迹。
语法
js
new Cesium.SampledPositionProperty(referenceFrame, numberOfDerivatives);
- referenceFrame: 参考系,默认为
Cesium.ReferenceFrame.FIXED
- numberOfDerivatives: 可选,表示采样点的导数数量,默认为 0
常用 API
getValue()
js
// 获取特定时间的位置
const currentTime = Cesium.JulianDate.fromIso8601("2025-01-01T00:00:15Z");
const position = positionProperty.getValue(currentTime);
addSample()
js
// 添加带速度的样本
const time = Cesium.JulianDate.fromIso8601("2025-01-01T00:00:30Z");
const position = Cesium.Cartesian3.fromDegrees(118.78, 32.04, 10000); // 南京
const velocity = new Cesium.Cartesian3(0, 0, -500); // 下降速度 (m/s)
positionProperty.addSample(time, position, velocity);