cesium 隐藏时间轴的方法

CesiumJs yekong

cesium 隐藏时间轴的方法

在Cesium中隐藏底部的播放按钮、时间轴和全屏按钮可以通过在创建Viewer对象时设置相应的选项来实现。具体方法如下:

方法一:在构造Viewer对象时隐藏

在创建Viewer对象时,可以通过设置构造函数的选项来隐藏不需要的UI组件。例如,要隐藏时间轴(包括播放按钮)和全屏按钮,可以这样做:

var viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, // 隐藏底部播放按钮和时间轴
    timeline: false, // 隐藏底部时间轴
    fullscreenButton: false // 隐藏全屏按钮
});

方法二:通过修改CSS隐藏

另一种方法是通过CSS来隐藏这些UI组件。首先,你需要找到这些组件的CSS类名。通常,Cesium的播放按钮、时间轴和全屏按钮有特定的类名,例如.cesium-viewer-animationContainer.cesium-viewer-timelineContainer.cesium-viewer-fullscreenContainer。然后,你可以在你的CSS文件中添加如下规则来隐藏它们:

.cesium-viewer-animationContainer,
  .cesium-viewer-timelineContainer,
  .cesium-viewer-fullscreenContainer {
    display: none !important;
  }

这种方法的优点是即使在Viewer对象创建之后,也可以通过修改CSS来控制这些UI组件的显示和隐藏。

cesium版本

"cesium": "^1.114.0",

运行效果

cesium 隐藏时间轴

实例代码下载

代码运行环境vue3 vite js nodejs 16

相关文件下载地址
此资源需支付 ¥1 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
cesium 隐藏时间轴的方法