360SDN.COM

首页/GIS/列表

Cesium应用篇:3控件(1)Clock

来源:  2018-08-06 20:21:15    评论:0点击:

来源:https://www.cnblogs.com/fuckgiser/p/5669920.html

创建

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

clip_image001

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

clip_image003

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

clip_image004

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

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

clip_image006

       并创建存放Animation的DIV

clip_image008

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

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

clip_image010

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

clip_image011

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

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

Animation

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

clip_image013

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

Timeline

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

clip_image015

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

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

好想被风刮走 刮遍整个地球的那种 在我爱的城市停 走 停 走
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权