Cesium开发入门篇 | 04Viewer界面介绍及组件显隐

Viewer界面介绍

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

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

默认地，场景支持鼠标（电脑端）和手指触摸（移动端）交互，并且支持以下相机漫游方式：

按住鼠标左键拖拽 - 让相机在数字地球平面平移
按住鼠标右键拖拽 - 放缩相机
鼠标滚轮滑动 - 放缩相机
按住鼠标中键拖拽 - 在当前地球的屏幕中间点，旋转相机
同时初始化界面也默认自带了一些组件，其初始化场景及组件数字标号如下图所示：

初始化场景

每一个组件的描述如下：
Geocoder：查找位置工具，查找到之后会将镜头对准找到的地址，默认使用微软的Bing地图
HomeButton：首页位置，点击之后将视图跳转到默认全球视角
SceneModePicker：选择视角的模式，3D，2D，哥伦布视图(CV)
BaseLayerPicker：图层选择器，选择要显示的地图服务和地形服务
NavigationHelpButton：导航帮助按钮，显示默认的地图控制帮助
Animation：动画器件，控制视图动画的播放速度
CreditsDisplay：展示商标版权和数据归属
Timeline：时间轴，指示当前时间，并允许用户跳到特定的时间
FullscreenButton：全屏按钮

组件显隐

初始化界面比较怪，领导不喜欢，看着不爽，怎么办？先别急，下面我们可采用两种方式，让这些组件立刻消失在我们眼前。
通过js代码控制

    var viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false, // 动画小组件
      baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
      fullscreenButton: false, // 全屏组件
      vrButton: false, // VR模式
      geocoder: false, // 地理编码（搜索）组件
      homeButton: false, // 首页，点击之后将视图跳转到默认视角
      infoBox: false, // 信息框
      sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: true, // 时间轴
      navigationHelpButton: false, // 帮助提示，如何操作数字地球。
      // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
      navigationInstructionsInitiallyVisible: false,
    });

    // 隐藏logo
    viewer._cesiumWidget._creditContainer.style.display = "none";

通过css代码控制

   /* 通过CSS控制组件显隐及位置 */
    .cesium-viewer-toolbar,             /* 右上角按钮组 */
    .cesium-viewer-animationContainer,  /* 左下角动画控件 */
    .cesium-viewer-timelineContainer,   /* 时间线 */
    .cesium-viewer-bottom               /* logo信息 */ {
      display: none !important;
    }

    .cesium-widget-credits  /* 隐藏logo图片 */ {
      display: none !important;
    }

    .cesium-viewer-fullscreenContainer  /* 全屏按钮 */ {
      display: none !important;
      position: absolute;
      top: 0;
    }

通过以上两种方式中任何一种，组件都会消失，如下图所示。这下看着就比较顺眼了，剩下的工作就交给UI人员了，高大上的页面全部指望他们了。

去掉组件的场景

最后编辑于：2020.12.08 14:15:37