cesium编程入门(四)界面介绍及小控件隐藏
2018-01-05 00:00
609 查看
感性认识
Geocoder : 查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图
Home Button :视角返回初始位置.
Scene Mode Picker : 选择视角的模式,有三种:3D,2D,哥伦布视图(CV)
Base Layer Picker : 图层选择器,选择要显示的地图服务和地形服务.
Navigation Help Button :导航帮助按钮,显示默认的地图控制帮助.
Animation : 动画器件,控制视图动画的播放速度.
Timeline :时间线,指示当前时间,并允许用户跳到特定的时间.
Credits Display :版权显示,显示数据归属,必选
9.Fullscreen Button :全屏按钮.
首先创建一个空的工程来测试,源码在https://gitee.com/HQCode/Cesium-test
帮助文档
相关代码lesson01-index.html
注:全屏按钮不能通过display:none的方式来达到隐藏的目的,这是因为生成的按钮控件的行内样式设置了display属性,会覆盖引入的css属性
相关代码lesson01-index02.html
Cesium学习交流群:593764057
界面介绍,viewer
Geocoder : 查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图
Home Button :视角返回初始位置.
Scene Mode Picker : 选择视角的模式,有三种:3D,2D,哥伦布视图(CV)
Base Layer Picker : 图层选择器,选择要显示的地图服务和地形服务.
Navigation Help Button :导航帮助按钮,显示默认的地图控制帮助.
Animation : 动画器件,控制视图动画的播放速度.
Timeline :时间线,指示当前时间,并允许用户跳到特定的时间.
Credits Display :版权显示,显示数据归属,必选
9.Fullscreen Button :全屏按钮.
隐藏界面中的元素
在开发自己的项目时,有时候需要对界面做一定的定制,这就需要隐藏一部分界面中的元素,下面我们来看看各个元素的描述首先创建一个空的工程来测试,源码在https://gitee.com/HQCode/Cesium-test
方法一 通过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
方法二 通过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
Cesium学习交流群:593764057
相关文章推荐
- VS2010/MFC编程入门之五十三(Ribbon界面开发:为Ribbon Bar添加控件)[转]
- VS2010/MFC编程入门之五十四(Ribbon界面开发:使用更多控件并为控件添加消息处理函数)
- (转载)VS2010/MFC编程入门之五十三(Ribbon界面开发:为Ribbon Bar添加控件)
- VS2010/MFC编程入门之二(Ribbon界面开发:为Ribbon Bar添加控件)
- (转载)VS2010/MFC编程入门之五十四(Ribbon界面开发:使用更多控件并为控件添加消息处理函数)
- VS2010/MFC编程入门之三(Ribbon界面开发:使用更多控件并为控件添加消息处理函数)
- VS2010/MFC编程入门之五十三(Ribbon界面开发:为Ribbon Bar添加控件)
- VS2010/MFC编程入门之五十三(Ribbon界面开发:为Ribbon Bar添加控件)
- VS2010/MFC编程入门之五十四(Ribbon界面开发:使用更多控件并为控件添加消息处理函数)
- 2013 duilib入门简明教程 -- 简单控件介绍 (12)
- ABAP--关于SAP Control Framework(入门GUI编程的不错的基础介绍)
- .NET 4 并行(多核)编程系列之一入门介绍
- lae界面开发工具入门之介绍七--<组件篇-文本篇>
- VS2010/MFC编程入门之二十一(常用控件:编辑框Edit Control)
- VS2010/MFC编程入门之二十(常用控件:静态文本框)
- VS2010/MFC编程入门之三十(常用控件:树形控件Tree Control 上)
- Windows界面编程第五篇 静态控件背景透明化
- VS2010/MFC编程入门之二十五(常用控件:滚动条控件Scroll Bar)
- cesium编程入门(八)设置材质