Cesium中Clock控件及时间序列瓦片动态加载

作者：kiki百乐门_867 | 来源：互联网 | 2023-05-17 20:11

前言前面已经写了两篇博客介绍Cesium，一篇整体上简单介绍了Cesium如何上手，还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合。Cesium的强大之处也在于其

前言
前面已经写了两篇博客介绍Cesium，一篇整体上简单介绍了Cesium如何上手，还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合。Cesium的强大之处也在于其可以将时间运用到3维地球上，可以根据此时间进行动画、轨迹记录、地球的光照等等所有与时间相关的可视化效果。本文介绍Cesium中的Clock控件以及如何动态加载时间序列瓦片。

一、 Clock控件

1.1 控件显示和隐藏

这里说的Clock控件包含两部分，Animation控件和Timeline控件，这二者基本是同时出现或隐藏的。如下图所示：

,
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
    };
}