Cesium中Viewer界面介绍及组件显隐

发布时间 2023-04-19 15:13:17作者: 中亿丰数字科技

Cesium中Viewer界面介绍及组件显隐

任何Cesium应用程序的基础都是Viewer,Viewer是一个带有多种功能的可交互的三位数字地球的容器。在搭建第一个示例后,我们已经通过以下代码初始化了一个视图窗口,看到了一个基本的数字地球。

let viewer = new Cesium.Viewer("cesiumContainer");

默认地,场景支持鼠标交互,并且支持以下相机漫游方式:

  • 按住鼠标左键拖拽 - 让相机在数字地球平面平移

  • 按住鼠标右键拖拽 - 放缩相机

  • 鼠标滚轮滑动 - 放缩相机

  • 按住鼠标中键拖拽 - 在当前地球的屏幕中间点,旋转相机

初始化界面也默认自带了一些组件,每一个组件的描述如下:

  • geocoder:查找位置工具,查找到之后会将镜头对准找到的地址(但实际效果体验较差),默认使用微软的Bing地图
  • homeButton:首页位置,点击之后将视图跳转到默认视角
  • dceneModePicker:选择视角的模式,3D,2D,哥伦布视图(CV)
  • baseLayerPicker:图层选择器,选择要显示的地图服务和地形服务
  • navigationHelpButton:导航帮助按钮,显示默认的地图控制帮助
  • animation:动画器件,控制视图动画的播放速度
  • creditsDisplay:展示商标版权和数据归属
  • timeline:时间轴,指示当前时间,并允许用户跳到特定的时间
  • fullscreenButton:全屏按钮

可以通过调整Viewer中的属性来控制组件的显隐:

let viewer = new Cesium.Viewer("container", {
         animation: false, // 隐藏动画控件
         baseLayerPicker: false, // 隐藏图层选择控件
         fullscreenButton: false, // 隐藏全屏按钮
         vrButton: false, // 隐藏VR按钮,默认false
         geocoder: true, // 隐藏地名查找控件
         homeButton: false, // 隐藏Home按钮
         infoBox: true, // 隐藏点击要素之后显示的信息窗口
         sceneModePicker: false, // 隐藏场景模式选择控件
         selectionIndicator: false, // 显示实体对象选择框,默认true
         timeline: false, // 隐藏时间线控件
         navigationHelpButton: false, // 隐藏帮助按钮
		// terrainProvider:new Cesium.createWorldTerrain(), //地形开启
});
viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息