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

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官网介绍 点击进入

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龟中的程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值