Cesium(一)界面上的相关控件

Cesium(一)界面上的相关控件_第1张图片

相关解释

① 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属性

你可能感兴趣的:(Cesium)