創建

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

總結

以上是生活随笔為你收集整理的cesium 设置时间_Cesium应用篇：3控件（1）Clock的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。