Cesium（一）界面上的相关控件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baidu_36065997/article/details/81228705

相关解释

① Geocoder
查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图

②Home Button
视角返回初始位置

③Scene Mode Picker
选择视角的模式，有三种：3D，2D，哥伦布视图（2.5D)

④Base Layer Picker
图层选择器，选择要显示的地图服务和地形服务

⑤Navigation Help Button
导航帮助按钮，显示默认的地图控制帮助

⑥Fullscreen Button
全屏按钮

⑦Timeline
时间线,指示当前时间，并允许用户跳到特定的时间

⑧Animation
动画器件，控制视图动画的播放速度

其他

• Timeline上面的文字是版权显示，显示的是数据归属
• 画布上显示的星空是Cesium的默认图片
• 画布上的地球是加载进来的服务

控件的显示和隐藏

法一：利用JS

//新建一个Cesium服务，将画布嵌入到id是cesiumContainer的DOM元素中
var viewer = new Cesium.Viewer('cesiumContainer',{ 
    geocoder:false,   
    homeButton:false,
    sceneModePicker:false,
    baseLayerPicker:false,
    navigationHelpButton:false,
    animation:false,    //左下角的动画控件的显示
    shouldAnimate :false,   //控制模型动画
    timeline:false,
    fullscreenButton:false,
})

法二：利用CSS

/* 不占据空间，无法点击 */
.cesium-viewer-toolbar, /* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */
{
display: none;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */
{ position: absolute; top: -999em; }

//注：全屏按钮不能通过display:none的方式来达到隐藏的目的，这是因为生成的按钮控件的行内样式设置了display属性，会覆盖引入的css属性