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的方法,我們可以很好的微調相關控件的細節,更好的滿足不同的需求,源碼面前了無秘密,這也是源碼帶給我們閱讀的樂趣。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM