Skip to content

常用实例

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

实例一:飞机飞行

详见示例