Cesium应用篇:Clock控件

时间:2022-02-12 00:59:50

Cesium应用篇:Clock控件

推荐:将 NSDT场景编辑器 加入你的3D开发工具链

创建

跟Clock相关的主要有Animation控件和Timeline控件,通常两者会放在一起使用。

Cesium应用篇:Clock控件

在Cesium中,Viewer默认开启这两个控件,如果你想要不显示控件,可以在Viewer初始化中设置其为false,代码如下:

Cesium应用篇:Clock控件

但这种方式只能在初始化时设置,无法动态的切换显示状态,灵活度上稍显不足。如果你有这方面的需要,可以使用如下这种方式,同时Widget是自适应,也会动态调整布局。

Cesium应用篇:Clock控件

基于Viewer来创建这两个控件并不复杂,但某些时候(尽管我想不出这样的场景),用户希望在自己的div上创建控件,也就是脱离和Viewer的关联,虽然非常麻烦,但Cesium还是支持了这种方式。

首先,需要加载对应的css文件,

Cesium应用篇:Clock控件

并创建存放Animation的DIV

Cesium应用篇:Clock控件

目前需要指定对应的id和class,并指定z-index属性,否则会被球体压盖。当然,也可以自己实现css,不过比较繁琐,而且你只能修改风格,Animation的形状是内部用SVG绘制的,并绑定了对应的事件,要想DIY,工作量更大。

然后,创建对应的clock和Animation控件,绑定id为animationContainer即可。

Cesium应用篇:Clock控件

这样,我们就独立于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的一个简单用法:

Cesium应用篇:Clock控件

最后要强调的是tick方法,Cesium内部每一帧都会调用该方法,实现时间状态的更新和检测。

涉及到时间的细节很多,比如TimeInterval,TimeConstants,后续如果有涉及,我们在详细介绍。

Animation

Animation默认显示的是格林威治时间,而多数情况下,我们希望能够显示当前系统时间,这就需要重写timeFormatter方法,代码如下,详见Animation2.html。

Cesium应用篇:Clock控件

这样,内部继续以格林威治时间为标准,保证光照等效果的正确,同时在时间显示时,调整为系统所在时区时间显示。

Timeline

Timeline控件默认以当前时间为起点,长度是24小时,而如果Clock采用UNBOUNDED,则存在超出该时间轴的范围的可能,下面,我们设计让Timeline能够动态的根据时间的变化动态更新:

Cesium应用篇:Clock控件

原理也很简单,每一帧检测当前时间是否在可视时间轴范围内,如果不是,则调用zoomTo更新时间轴的范围。

可见,只要熟练运用Clock的方法,我们可以很好的微调相关控件的细节,更好的满足不同的需求,源码面前了无秘密,这也是源码带给我们阅读的乐趣。​