創建
跟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屬性,用戶可以根據自己的需要來設置,默認為: UNBOUNDED
- CLAMPED
達到終止時間后停止 - LOOP_STOP
達到終止時間后重新循環 - UNBOUNDED
達到終止時間后繼續讀秒
JulianDate
Clock內部以儒略日(JulianDate)維護時間。其起始日期為公元前4713年1月1日中午12時,這和我們常用的格林威治時間略有不同,主要是天文學家使用。
JulianDate類提供了非常豐富的接口,時間的對比,運算,和格林威治時間的轉換等,簡單易用,完全滿足各類需求。同時內部還可以采用國際原子時(TAI)的方式來記錄。下面是Clock的一個簡單用法:
最后要強調的是tick方法,Cesium內部每一幀都會調用該方法,實現時間狀態的更新和檢測。
涉及到時間的細節很多,比如TimeInterval,TimeConstants,后續如果有涉及,我們在詳細介紹。
Animation
Animation默認顯示的是格林威治時間,而多數情況下,我們希望能夠顯示當前系統時間,這就需要重寫timeFormatter方法,代碼如下,詳見Animation2.html。
這樣,內部繼續以格林威治時間為標准,保證光照等效果的正確,同時在時間顯示時,調整為系統所在時區時間顯示。
Timeline
Timeline控件默認以當前時間為起點,長度是24小時,而如果Clock采用UNBOUNDED,則存在超出該時間軸的范圍的可能,下面,我們設計讓Timeline能夠動態的根據時間的變化動態更新:
原理也很簡單,每一幀檢測當前時間是否在可視時間軸范圍內,如果不是,則調用zoomTo更新時間軸的范圍。
可見,只要熟練運用Clock的方法,我們可以很好的微調相關控件的細節,更好的滿足不同的需求,源碼面前了無秘密,這也是源碼帶給我們閱讀的樂趣。