原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Web%20Map%20Tile%20Service%20with%20Time.html&label=All

示例介绍：场景中加载 NASA GIBS 的 MODIS Terra 真彩色影像图层，覆盖 2015-07-30 至 2017-06-16 的时间范围，每天切换一帧影像。图层透明度设置为 0.5，以便显示底层的地理信息。Cesium 的时钟和时间轴配置为播放时间动画，时间跨度约两年，播放速度为 7200 倍，适合快速查看天气变化。

效果如下图所示：

注：下面的动图采用了clock.multiplier = 7200 * 12进行了录制。

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: true,
  fullscreenButton: false,
  skyBox: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  shouldAnimate: true,//启用时间动画，支持动态 WMTS 图层切换
});
viewer.cesiumWidget.creditContainer.style.display = "none";

/**
 * 为每个时间间隔返回对应的 ISO 8601 时间字符串，用于 WMTS 请求中的 {Time} 占位符
 */
function dataCallback(interval, index) {
  let time;
  if (index === 0) {
    time = Cesium.JulianDate.toIso8601(interval.stop);
  } else {
    time = Cesium.JulianDate.toIso8601(interval.start);
  }

  return {
    Time: time,
  };
}

const times = Cesium.TimeIntervalCollection.fromIso8601({
  iso8601: "2015-07-30/2017-06-16/P1D",//时间范围：2015-07-30 至 2017-06-16
  leadingInterval: true,//包含前导间隔（早于 2015-07-30 的时间）
  trailingInterval: true,//包含后导间隔（晚于 2017-06-16 的时间）
  isStopIncluded: false, // 结束时间（2017-06-16）属于后导间隔，不包含在主时间段。
  dataCallback: dataCallback,//为每个间隔提供时间参数（Time）
});

// 创建 WMTS 影像提供者，加载 NASA GIBS 的 MODIS Terra 真彩色影像
// See https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+API+for+Developers#GIBSAPIforDevelopers-OGCWebMapService(WMS)
const provider = new Cesium.WebMapTileServiceImageryProvider({
  url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/MODIS_Terra_CorrectedReflectance_TrueColor/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpg",
  // layer：指定图层为 MODIS_Terra_CorrectedReflectance_TrueColor（MODIS 卫星的真彩色影像）
  layer: "MODIS_Terra_CorrectedReflectance_TrueColor",
  style: "default",
  tileMatrixSetID: "250m",//瓦片分辨率为 250 米
  maximumLevel: 5,//最大缩放级别为 5，限制分辨率以优化性能
  format: "image/jpeg",
  clock: viewer.clock,//绑定 Cesium 时钟，驱动时间动态影像
  times: times,//时间间隔集合，指定每日影像的切换
  credit: "NASA Global Imagery Browse Services for EOSDIS",//版权信息，归属 NASA GIBS。
});
const layer = new Cesium.ImageryLayer(provider);

// 将天气图层设为半透明，以便查看其下方的地理信息。
layer.alpha = 0.5;

viewer.imageryLayers.add(layer);

const start = Cesium.JulianDate.fromIso8601("2015-07-30");
const stop = Cesium.JulianDate.fromIso8601("2017-06-17");

viewer.timeline.zoomTo(start, stop);

const clock = viewer.clock;
clock.startTime = start;
clock.stopTime = stop;
clock.currentTime = start;
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
clock.multiplier = 7200;//倍速，1秒代表2小时。