Viewer界面介绍和组件显影

在这里插入图片描述

1、查找位置工具，查找到之后会将镜头对准找到的地址，默认使用微软的Bing地图

2、首页位置，点击之后将视图跳转到默认全球视角

3、选择视角的模式，3D，2D，哥伦布视图(CV)

4、图层选择器，选择要显示的地图服务和地形服务

5、导航帮助按钮，显示默认的地图控制帮助

6、动画器件，控制视图动画的播放速度

7、展示商标版权和数据归属

8、时间轴，指示当前时间，并允许用户跳到特定的时间

9、VR视角部件

10、全屏按钮

在初始化地图时可以选择是否显示组件

 			new Cesium.Viewer('cesiumContainer', {
                animation: true, //是否显示动画控件
                baseLayerPicker: true, //是否显示图层选择控件
                fullscreenButton: true, //是否显示全屏按钮
                vrButton: true, // vr部件
                geocoder: true, // 位置搜索部件
                homeButton: true, //是否显示Home按钮
                infoBox: true, //是否显示点击要素之后显示的信息
                sceneModePicker: true, // 二三维切换部件
                timeline: true, //是否显示时间线控件
                navigationHelpButton: true, //是否显示帮助信息控件
                //> 设置地图
                imageryProvider: new Cesium.UrlTemplateImageryProvider({ url }),
            });

通过Cesium api 方法控制

在官网中的部件方法里面，只有删除和查看是否存在部件的方法，并没有动态显示隐藏的方法。如果控制永久删除可以使用改方法。如果要动态的显示，就要使用css来进行动态的display：none。在这里插入图片描述

通过css加js的方法来控制显示隐藏

css (找到每个组件的demo的class类名)

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

js

这里就是通过js的原生获取demo元素的方法，然后动态修改display 在Vue2中可以通过动态设置class类名来修改在Vue3中可以在css通过v-bind来动态设置display的变量（详细设置请看Vue官网介绍点击进入）

【Cesium学习（三）】Viewer界面基础介绍及组件显影