Cesium天体运行动画效果的实现思路

Cesium中的动画效果都是依据clock进行实现的，天体运行也相同，最基础的思路就是设置clock，设置SampledPositionProperty()，最后把SampledPositionProperty()加入entity的position中。

设置时钟

let start = new Cesium.JulianDate.fromDate(new Date());
// 开始时间
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
// 结束时间
const stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

// 设置时钟范围
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
// 循环结束时后续动作
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
// 时间变化来控制速度
// 时间速率，数字越大时间过的越快
viewer.clock.multiplier = 10;
//给下方时间线设置边界
viewer.timeline.zoomTo(start, stop);

使用SampledPositionProperty(referenceFrame，numberOfDerivatives)完成天体运行效果

是Cesium中与位置动态变化相关的动画效果的一个重要函数，当然实现这种动画的方式还有使用CZML，TimeIntervalCollectionPositionProperty()等等，在Cesium的sandcastle中大部分可以找到实现方法。这些动态变化的动画效果本质上就是将要改变的属性与clock的时间进行绑定，当时间走到指定点时，相关属性就会显示为绑定好的属性。

如以下代码

let property = new Cesium.SampledPositionProperty();
let start = new Cesium.JulianDate.fromDate(new Date());
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
let time = Cesium.JulianDate.addSeconds(start, source.time, new Cesium.JulianDate);
let position = Cesium.Cartesian3.fromDegrees(source.lon, source.lat, source.hei);
// 添加位置，和时间对应
property.addSample(time, position);

设置好时间后，将预定位置与时间绑定，再添加进SampledPositionProperty()中。
两个以上的position也同理

const start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
const stop = Cesium.JulianDate.addSeconds(
    start,
    15,
    new Cesium.JulianDate()
  );
const pos1 = Cesium.Cartesian3.fromDegrees(longitude1,
    latitude1,
    height1
  );
const pos2 = Cesium.Cartesian3.fromDegrees(longitude2,
    latitude2,
    height2
  );
const position = new Cesium.SampledPositionProperty();
position.addSample(start, pos1);
position.addSample(stop, pos2);

当然，position需要添加的属性和时间太多的话，可以写个循环函数进行添加

加入entity

天体运行中，运行轨迹十分重要，而Cesium的entity自带一个path属性，通过设置这个属性可以显示实体的运行轨迹。

const entity = viewer.entities.add({
    id: 'satellite',
    // 将实体availability设置为与模拟时间相同的时间间隔。
    availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
      start: start,
      stop: stop
    })]),
    position: position, // 计算实体位置属性
    // 基于位置移动自动计算方向.
    orientation: new Cesium.VelocityOrientationProperty(position),
    // 加载卫星模型
    model: {
      uri: 'satellite.gltf',
      minimumPixelSize: 32
    },
    // 路径
    path: {
      show: true,
      resolution: 1,
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.1,
        color: Cesium.Color.PINK
      }),
      width: 5
    }
  });