huqi-code

感性认识

界面介绍,viewer

Jietu20171222-225252.jpg

  1. Geocoder : 查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图
  2. Home Button :视角返回初始位置.
  3. Scene Mode Picker : 选择视角的模式,有三种:3D,2D,哥伦布视图(CV)
  4. Base Layer Picker : 图层选择器,选择要显示的地图服务和地形服务.
  5. Navigation Help Button :导航帮助按钮,显示默认的地图控制帮助.
  6. Animation : 动画器件,控制视图动画的播放速度.
  7. Timeline :时间线,指示当前时间,并允许用户跳到特定的时间.
  8. Credits Display :版权显示,显示数据归属,必选
    9.Fullscreen Button :全屏按钮.

隐藏界面中的元素

在开发自己的项目时,有时候需要对界面做一定的定制,这就需要隐藏一部分界面中的元素,下面我们来看看各个元素的描述

首先创建一个空的工程来测试,源码在https://gitee.com/HQCode/Cesium-test

cesium_widget.png

方法一 通过js代码控制

界面上默认的小控件可以通过在初始化Viewer的时候设置相应的属性来关闭,一下列出了界面默认的小控件的关闭方法,还有很多额外的属性,可以查看
帮助文档

<div id="credit"></div>
var viewer = new Cesium.Viewer(\'cesiumContainer\',{
geocoder:false,
homeButton:false,
sceneModePicker:false,
baseLayerPicker:false,
navigationHelpButton:false,
animation:false,
creditContainer:"credit",
timeline:false,
fullscreenButton:false,
vrButton:false,
// skyBox : new Cesium.SkyBox({
// sources : {
// positiveX : \'stars/TychoSkymapII.t3_08192x04096_80_px.jpg\',
// negativeX : \'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg\',
// positiveY : \'stars/TychoSkymapII.t3_08192x04096_80_py.jpg\',
// negativeY : \'stars/TychoSkymapII.t3_08192x04096_80_my.jpg\',
// positiveZ : \'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg\',
// negativeZ : \'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg\'
// }
// })
});

相关代码lesson01-index.html

如果控件已经创建了,也可以这样:

var viewer = new Cesium.Viewer(\'cesiumContainer\');
viewer.animation.container.style.display = "none";
viewer.baseLayerPicker.container.style.display = "none";

//版权清理
viewer.cesiumWidget.creditContainer.style.display = "none";
viewer.bottomContainer.style.display = "none";

方法二 通过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属性

<div class="cesium-viewer-fullscreenContainer" style="display: block;">...</div>

相关代码lesson01-index02.html

显示帧速(FPS)

viewer.scene.debugShowFramesPerSecond = true;

分类:

技术点:

相关文章:

  • 2021-11-26
  • 2021-09-17
  • 2021-11-05
  • 2021-11-05
  • 2021-12-22
  • 2021-10-15
  • 2021-11-17
  • 2021-11-05
猜你喜欢
  • 2021-11-15
  • 2021-11-15
  • 2021-11-05
  • 2021-12-22
  • 2018-08-26
  • 2021-08-30
  • 2021-11-17
相关资源
相似解决方案