手动创建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);