cesium控制时间轴显示与隐藏

在 Cesium 三维地球应用中,时间轴(Timeline)是一个强大的组件,它允许用户在时间维度上浏览和控制数据。然而,在某些场景下,我们可能希望根据应用需求动态控制时间轴的显示或隐藏。本文将详细介绍如何实现这一功能,并提供完整的代码示例和最佳实践。
根据按钮的选中状态,设置时间轴容器的 CSS display 属性
当按钮选中时,设置为 block,使时间轴显示
当按钮未选中时,设置为 none,使时间轴隐藏
注意需要修改 DOM 后可能不生效 需要强制触发 Cesium 时间轴的布局更新
Viewer.timeline.resize()
使用 setTimeout 异步调用 resize()方法,强制时间轴重新计算自身布局

1
2
3
4
5
6
7
8
9
10
timeLine(btn) {
btn.checked = !btn.checked;
Viewer.timeline.container.style.display = btn.checked ? "block" : "none";
if (btn.checked) {
Viewer.timeline.container.style.bottom = "40px";
setTimeout(() => {
Viewer.timeline.resize(); // 强制触发 Cesium 时间轴的布局更新
}, 0);
}
},
作者

wangyawei

发布于

2025-03-16

更新于

2025-03-21

许可协议