Cesium应用篇:3控件(1)Clock
来源:互联网 发布:java set用法 编辑:程序博客网 时间:2024/06/05 20:11
原文:http://www.cnblogs.com/fuckgiser/p/5706842.html
Cesium应用篇:3控件(1)Clock
创建
跟Clock相关的主要有Animation控件和Timeline控件,通常两者会放在一起使用。
在Cesium中,Viewer默认开启这两个控件,如果你想要不显示控件,可以在Viewer初始化中设置其为false,代码如下:
但这种方式只能在初始化时设置,无法动态的切换显示状态,灵活度上稍显不足。如果你有这方面的需要,可以使用如下这种方式,同时Widget是自适应,也会动态调整布局。
基于Viewer来创建这两个控件并不复杂,但某些时候(尽管我想不出这样的场景),用户希望在自己的div上创建控件,也就是脱离和Viewer的关联,虽然非常麻烦,但Cesium还是支持了这种方式。
首先,需要加载对应的css文件,
并创建存放Animation的DIV
目前需要指定对应的id和class,并指定z-index属性,否则会被球体压盖。当然,也可以自己实现css,不过比较繁琐,而且你只能修改风格,Animation的形状是内部用SVG绘制的,并绑定了对应的事件,要想DIY,工作量更大。
然后,创建对应的clock和Animation控件,绑定id为animationContainer即可。
这样,我们就独立于Viewer创建了Animation控件。
这种属于高端用法,适合一些个性化的效果,你要关闭Viewer自带的Animation和Timeline,同时如果你需要和球体在时间上同步,需要引用cesiumWidget的clock而不是自己单独创建的,保证时钟同步。当然,Cesium也提供了一个lighter的css风格,可供切换,具体代码请参考Animation.html。
Clock
上一节主要涉及界面部分。但无论是Animation还是Timeline,都紧密的和Clock关联在一起。
首先,Viewer在初始化时,内部会创建一个Clock,所以建议用户使用viewer.cesiumWidget.clock而不是自己创建Clock,毕竟在一个应用内,时间通常都是标准的,创建多个Clock反而混淆了。
Clock中默认开始时间(startTime)为当前时间,终止时间(stopTime)为24小时后,并能获取当前时间(currentTime)。
另外可以设置ClockRange属性,用户可以根据自己的需要来设置,默认为: UNBOUNDED
- CLAMPED
达到终止时间后停止 - LOOP_STOP
达到终止时间后重新循环 - UNBOUNDED
达到终止时间后继续读秒
JulianDate
Clock内部以儒略日(JulianDate)维护时间。其起始日期为公元前4713年1月1日中午12时,这和我们常用的格林威治时间略有不同,主要是天文学家使用。
JulianDate类提供了非常丰富的接口,时间的对比,运算,和格林威治时间的转换等,简单易用,完全满足各类需求。同时内部还可以采用国际原子时(TAI)的方式来记录。下面是Clock的一个简单用法:
最后要强调的是tick方法,Cesium内部每一帧都会调用该方法,实现时间状态的更新和检测。
涉及到时间的细节很多,比如TimeInterval,TimeConstants,后续如果有涉及,我们在详细介绍。
Animation
Animation默认显示的是格林威治时间,而多数情况下,我们希望能够显示当前系统时间,这就需要重写timeFormatter方法,代码如下,详见Animation2.html。
这样,内部继续以格林威治时间为标准,保证光照等效果的正确,同时在时间显示时,调整为系统所在时区时间显示。
Timeline
Timeline控件默认以当前时间为起点,长度是24小时,而如果Clock采用UNBOUNDED,则存在超出该时间轴的范围的可能,下面,我们设计让Timeline能够动态的根据时间的变化动态更新:
原理也很简单,每一帧检测当前时间是否在可视时间轴范围内,如果不是,则调用zoomTo更新时间轴的范围。
可见,只要熟练运用Clock的方法,我们可以很好的微调相关控件的细节,更好的满足不同的需求,源码面前了无秘密,这也是源码带给我们阅读的乐趣。
- Cesium应用篇:3控件(1)Clock
- Cesium应用篇:3控件(3)SelectionIndicator& InfoBox
- Cesium应用篇:3控件(5)CesiumInspector
- Cesium应用篇:3控件(4)Geocoder
- Cesium应用篇:3控件(2)BaseLayerPicker
- Cesium应用篇:3控件(4)Geocoder
- Cesium应用篇:3控件(5)CesiumInspector
- Cesium应用篇:3控件(6) FullScreen/ VR / Home
- Cesium应用篇:1快速搭建
- Cesium应用篇:快速搭建
- Cesium原理篇:3D Tiles(1)渲染调度
- Cesium原理篇:3D Tiles(1)渲染调度
- Cesium原理篇:3D Tiles(1)渲染调度
- Cesium原理篇:3D Tiles(1)渲染调度
- Cesium应用篇:2影像服务(上)
- Cesium应用篇:2影像服务(下)
- Cesium 学习记录(1) 搭建Cesium开发环境
- Cesium学习笔记(3)
- 403. Frog Jump
- 2017中国架构师大会即将于10月召开!
- 设计中的故事思维
- 欢迎使用CSDN-markdown编辑器
- Android 带你彻底理解 Window 和 WindowManager
- Cesium应用篇:3控件(1)Clock
- 开启大页详解
- linux下NAT模式和桥接模式网络配置
- Windows安装 Zabbix agent
- jmeter运行报错:org.apache.http.NoHttpResponseException: The target server failed to respond
- 类方法(静态方法)与实例方法(对象方法)
- 01_note_Hadoop集群2.8.1的安装配置, JDK安装, 免密码登录 (CentOS7)
- 你不必知道UX设计的一切
- NS_REFINED_FOR_SWIFT