在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",
运行效果
实例代码下载
代码运行环境vue3 vite js nodejs 16