前言

前面已經寫了兩篇博客介紹Cesium，一篇整體上簡單介紹了Cesium如何上手，還有一篇介紹了如何將Cesium與分布式地理信息處理框架Geotrellis相結合。Cesium的強大之處也在于其可以將時間運用到3維地球上，可以根據此時間進行動畫、軌跡記錄、地球的光照等等所有與時間相關的可視化效果。本文介紹Cesium中的Clock控件以及如何動態加載時間序列瓦片。

一、 Clock控件

1.1 控件顯示和隱藏

這里說的Clock控件包含兩部分，Animation控件和Timeline控件，這二者基本是同時出現或隱藏的。如下圖所示：

在Cesium中Viewer默認開啟這兩個控件，如果你想要不顯示這兩個控件，可以在Viewer初始化中設置其為false，代碼如下：

var viewer = new Cesium.Viewer('cesiumContainer', {animation:false, timeline:false });

但這種方式只能在初始化時設置，無法動態的切換顯示狀態，靈活度上稍顯不足。如下方式可以動態控制顯示和隱藏，會動態調整布局。

viewer.animation.container.style.visibility = 'visible'; viewer.animation.container.style.visibility = 'hidden'; viewer.timeline.container.style.visibility = 'visible'; viewer.timeline.container.style.visibility = 'hidden';

1.2 設置Clock范圍

Clock中默認開始時間（startTime）為當前時間，終止時間（stopTime）為24小時后，并能獲取當前時間（currentTime）。當然我們也可以通過如下代碼手動設置時間軸上的時間范圍：

var start = Cesium.JulianDate.fromIso8601('2015-07-30'); var end = Cesium.JulianDate.fromIso8601('2017-06-17');viewer.timeline.zoomTo(start, end);var clock = viewer.clock; clock.startTime = start; clock.endTime = end; clock.currentTime = start; clock.clockRange = Cesium.ClockRange.LOOP_STOP; clock.multiplier = 86400;

其中start和end分別代表起始和結束時間。multiplier表示時間軸進行速度，就是說此值表示真實世界時間進度與Cesium中的關系，值越大時間軸就走的越快，86400表示真實世界走過1s在Cesium中刻度走過1天，怎么有點南柯一夢的感覺。clockRange屬性表示時間軸達到終點之后的行為，用戶可以根據自己的需要來設置，默認為: UNBOUNDED

• CLAMPED：達到終止時間后停止
• LOOP_STOP：達到終止時間后重新循環
• UNBOUNDED：達到終止時間后繼續讀秒

二、 動態加載時間序列瓦片

2.1 時間序列瓦片

所謂時間序列瓦片是指存在多套瓦片，每套瓦片不是單獨的，與時間有關。比如我們每天拍攝一遍地球影像，然后把每天的影像都做成一套瓦片，那么一年下來就會有365套瓦片，采用傳統方案我們只能寫365個頁面每個頁面加載一天的瓦片。這樣非常麻煩，并且沒有一個動態變化的效果也無法進行對比。我前面介紹過如何使用Geotrellis生成時間序列瓦片（見geotrellis使用（二十三）動態加載時間序列數據），當然也不一定非要使用此種方式，簡單的方式也可以是直接生成多套瓦片，每套瓦片的請求方式與其時間對應即可。

2.2 Cesium動態加載時間序列瓦片

在前面已經介紹了如何使用Cesium加載我們自己的瓦片，大致如下：

var imageryLayers = viewer.imageryLayers; imageryLayers.addImageryProvider(provider);

其中provider為我們自己創建的圖層對象，時間序列瓦片與普通瓦片的區別正在此處。其創建時需要多指定與時間有關的參數。如下：

var provider = new Cesium.WebMapTileServiceImageryProvider({url : 'https://gibs.earthdata.nasa.gov/wmts/epsg4326/{best}/{Layer}/{Style}/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png',layer : 'AMSR2_Snow_Water_Equivalent',style : 'default',tileMatrixSetID : '2km',maximumLevel : 5,format : 'image/png',clock: viewer.clock,times: times,credit : new Cesium.Credit({text: 'NASA Global Imagery Browse Services for EOSDIS'}),dimensions: { Layer : 'AMSR2_Snow_Water_Equivalent',best: 'best'} });

style參數會替換掉url中的{Style}字符串；tileMatrixSetID會替換掉{TileMatrixSet}字符串；{TileMatrix}/{TileRow}/{TileCol}表示z、x、y，無需手動設置；clock表示所使用的時鐘，直接設置為系統時鐘；cedit表示版權信息；dimensions里面的參數只要出現在url中全部會被其value替換掉。

重點就是其中的times，需要傳入一個TimeIntervalCollection對象。其創建方式如下：

var times = Cesium.TimeIntervalCollection.fromIso8601({iso8601: '2015-07-30/2017-06-16/P20D', leadingInterval: true,trailingInterval: true,isStopIncluded: false, dataCallback: dataCallback });

iso8601參數為時間范圍及間隔，用'/'分割，第一個表示開始時間，第二個表示結束時間，P20D表示間隔20天，還可以是P1M、P1Y、P1Y3M5DT6H7M30S等，代表不同的時間間隔。

dataCallback表示在每個時間段內如何取值，比如時間間隔為20天，那么我們可以取第一天為請求瓦片的時間，也可以是最后一天，乃至范圍內甚至是范圍外的任意一天，這個就由dataCallback函數進行設置。示例如下：

function dataCallback(interval, index) {console.log(index);var time;if (index === 0) {time = Cesium.JulianDate.toIso8601(interval.stop);} else {time = Cesium.JulianDate.toIso8601(interval.start);}return {Time: time}; }

interval表示傳入的時間區間，index表示是第幾個區間，這兩個參數也就分割了times中的完整時間段，所以我們可以給time賦值為任意想要設置的值。最后返回的是key、value形式，此處Time為key，而其必須與創建圖層時候的{Time}字符串一致，否則請求的時候無法替換時間信息。

三、 總結

本文簡單介紹了Clock控件以及如何動態加載時間序列瓦片。合理運用Cesium中的Clock控件能夠做出很多漂亮的可視化效果，甚至如同Flash一樣只需要指定幾個時間點對象的位置，Cesium就會自動插值成動畫，這些我們在后面介紹。

最后希望大家能在2017年度全網原創IT博主評選活動投票：http://www.itbang.me/goVote/215投上寶貴的一票（最勤奮博主：wsf），謝謝！

轉載于:https://www.cnblogs.com/shoufengwei/p/8046529.html

總結

以上是生活随笔為你收集整理的Cesium中Clock控件及时间序列瓦片动态加载的全部內容，希望文章能夠幫你解決所遇到的問題。

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