一、用css隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../js/Cesium-1.63.1/Build/Cesium/Widgets/widgets.css">
<script src="../js/Cesium-1.63.1/Build/Cesium/Cesium.js"></script>
<title>css隐藏控件</title>
<style>
/* 不占据空间,无法点击 */
.cesium-viewer-toolbar, /* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */
{
display: none;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */
{ position: absolute; top: -999em; }
</style>
</head>
<body>
<div id="content">
</div>
<script>
var viewer = new Cesium.Viewer('content');
</script>
</body>
</html>
注:全屏按钮不能用display:none来隐藏,因为生成按钮的行内样式设置了display属性,会覆盖引入的css样式
二、JS隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../js/Cesium-1.63.1/Build/Cesium/Widgets/widgets.css">
<script src="../js/Cesium-1.63.1/Build/Cesium/Cesium.js"></script>
<title>js构造隐藏控件</title>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer',{
geocoder:false, //右上角 搜索
homeButton:false, //右上角 Home
sceneModePicker:false, //右上角 2D/3D切换
baseLayerPicker:false, //右上角 地形
navigationHelpButton:false, //右上角 Help
animation:false, // 左下角 圆盘动画控件
timeline:false, //时间轴
fullscreenButton:false, //右下角 全屏控件
vrButton:false, // 如果设置为true,将创建VRButton小部件。
scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
infoBox: false, //隐藏点击要素后的提示信息
});
viewer._cesiumWidget._creditContainer.style.display="none"; //隐藏版本信息
</script>
</body>
</html>
三、显示帧数(FPS)
viewer.scene.debugShowFramesPerSecond = true;