cesium new Cesium.Timeline

手动创建timeline clock,用于时间控制播放

• 具体代码

const startTime = Cesium.JulianDate.addHours(
  new Date('2023-12-01'),
  8,
  new Cesium.JulianDate()
);
const stopTime = Cesium.JulianDate.addHours(
  new Date('2023-12-02'),
  8,
  new Cesium.JulianDate()
);
const clock = new Cesium.Clock({
  startTime,
  currentTime: startTime.clone(),
  stopTime,
  canAnimate: true,
  multiplier: 1000,
  shouldAnimate: false,
  clockRange: Cesium.ClockRange.LOOP_STOP,
  clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
});

const timeline = new Cesium.Timeline(
  document.querySelector("#time"),
  clock
);
timeline.makeLabel = function (date) {
  let { hour, day, month } = Cesium.JulianDate.toGregorianDate(date);
  return `${day}日 ${hour}时`; //特定位置
};
timeline.zoomTo(startTime, stopTime);

timeline.addEventListener(
  "settime",
  (e) => {
    const clock = e.clock;
    clock.currentTime = e.timeJulian;
    clock.shouldAnimate = false;
  },
  false
);

clock.onTick.addEventListener((tick) => {
   let gregorianDate = Cesium.JulianDate.toGregorianDate(tick.currentTime);
   if (gregorianDate.minute !== this.currentTime) {
     this.currentTime = gregorianDate.minute;
     this.chartIns?.setOption({
       series: [{ name: "x", data: this.getData() }],
     });
   }
 });

clock.shouldAnimate = true;
const render = () => {
  clock.tick();
  requestAnimationFrame(render);
};

requestAnimationFrame(render);