如何在Cesium中通过CZML实现矩形的随时间移动效果？

核心原因 #

你之前配置不生效是因为直接写死的wsenDegrees数组是静态属性，Cesium不会对静态值做时间维度的更新。要实现动态位置变化，需要将矩形坐标配置为时间采样插值属性。

配置步骤 #

1. 首先需要在CZML的根节点配置全局时钟参数，用于驱动时间动画
2. 将rectangle.coordinates的wsenDegrees改为时间采样格式，按时间点传入不同的矩形边界值
3. 可选配置插值算法，让矩形移动过程更平滑

完整可运行的CZML示例 #

[
  // CZML文档全局配置
  {
    "id": "document",
    "version": "1.0",
    "clock": {
      "interval": "2024-01-01T00:00:00Z/2024-01-01T00:01:00Z",
      "currentTime": "2024-01-01T00:00:00Z",
      "multiplier": 1
    }
  },
  // 动态矩形配置
  {
    "id": "rectangle",
    "rectangle": {
      "coordinates": {
        "epoch": "2024-01-01T00:00:00Z",
        // 插值算法可选LINEAR/LAGRANGE/HERMITE，线性插值移动更平滑
        "interpolationAlgorithm": "LINEAR",
        "interpolationDegree": 1,
        "wsenDegrees": [
          // 数组格式：[相对于epoch的秒数, west, south, east, north]
          0, 118.99, 24.99, 119.01, 25.01,
          30, 119.02, 25.02, 119.04, 25.04,
          60, 119.05, 25.05, 119.07, 25.07
        ]
      },
      "height": 1000,
      "fill": true
    }
  }
]

配置说明 #

• epoch：时间基准值，后面采样数组里的第一个数字都是相对于该基准的偏移秒数
• 采样数组每5个值为一组：第一个是时间偏移秒数，后四个依次对应矩形的西、南、东、北经纬度
• 如果你习惯用cartographicDegrees配置，只需要把wsenDegrees字段换成cartographicDegrees，采样值换成对应时间点的矩形坐标数组即可，配置逻辑完全一致
• 如果你需要矩形大小也随时间变化，直接修改对应时间点的后四个边界值即可
• 除了坐标，height、material等其他矩形属性也可以用同样的时间采样格式实现动态变化

内容的提问来源于stack exchange，提问作者tyjtxby