欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-13 17:18:09
...

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

相关解释

① 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 GIS