举荐:退出你的3D开发工具链孪生场景编辑器(NSDT)
https://ted.sinoccdc.cn/

创立跟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的办法,咱们能够很好的微调相干控件的细节,更好的满足不同的需要,源码背后了无机密,这也是源码带给咱们浏览的乐趣。