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


    创建

    跟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的方法,我们可以很好的微调相关控件的细节,更好的满足不同的需求,源码面前了无秘密,这也是源码带给我们阅读的乐趣。

  • 相关阅读:
    300万PV的ASP.NET网站使用阿里云的配置建议团队
    上周热点回顾(11.4-11.10)团队
    寻人启事:写得一手好代码的你在哪里?团队
    上周热点回顾(10.28-11.3)团队
    上周热点回顾(10.21-10.27)团队
    上周热点回顾(10.14-10.20)团队
    上周热点回顾(10.7-10.13)团队
    Elasticsearch之sense插件的安装(图文详解)
    Kibana里No Marvel Data Found问题解决(图文详解)
    Squirrel的安装(windows上Phoneix可视化工具)
  • 原文地址:https://www.cnblogs.com/fuckgiser/p/5669920.html
Copyright © 2020-2023  润新知