Cesium应用篇：Clock控件

推荐：将 NSDT场景编辑器 加入你的3D开发工具链创建跟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属性，用户可以根据自己的需要来设置，默认为: UNBOUNDEDCLAMPED达到终止时间后停止LOOP_STOP达到终止时间后重新循环UNBOUNDED达到终止时间后继续读秒JulianDateClock内部以儒略日（JulianDate）维护时间。其起始日期为公元前4713年1月1日中午12时，这和我们常用的格林威治时间略有不同，主要是天文学家使用。JulianDate类提供了非常丰富的接口，时间的对比，运算，和格林威治时间的转换等，简单易用，完全满足各类需求。同时内部还可以采用国际原子时(TAI)的方式来记录。下面是Clock的一个简单用法：

最后要强调的是tick方法，Cesium内部每一帧都会调用该方法，实现时间状态的更新和检测。涉及到时间的细节很多，比如TimeInterval，TimeConstants，后续如果有涉及，我们在详细介绍。AnimationAnimation默认显示的是格林威治时间，而多数情况下，我们希望能够显示当前系统时间，这就需要重写timeFormatter方法，代码如下，详见Animation2.html。

这样，内部继续以格林威治时间为标准，保证光照等效果的正确，同时在时间显示时，调整为系统所在时区时间显示。TimelineTimeline控件默认以当前时间为起点，长度是24小时，而如果Clock采用UNBOUNDED，则存在超出该时间轴的范围的可能，下面，我们设计让Timeline能够动态的根据时间的变化动态更新：

原理也很简单，每一帧检测当前时间是否在可视时间轴范围内，如果不是，则调用zoomTo更新时间轴的范围。可见，只要熟练运用Clock的方法，我们可以很好的微调相关控件的细节，更好的满足不同的需求，源码面前了无秘密，这也是源码带给我们阅读的乐趣。