乐趣区

关于编辑器:Cesium应用篇Clock控件

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

退出移动版