原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=CZML%20Polygon%20-%20Interpolating%20References.html&label=All

效果如下视频所示：这里对官方示例作了修改，增加了240倍播放。

示例代码如下：

  • 动态多边形：
    一个三角形，由 v1、v2 和 v3 组成。
    v1 和 v3 移动，v2 固定，形状随时间变化。
    颜色从紫色 (16:00-16:25) 过渡到青色 (16:30-17:00)。
  • 带动态孔洞的多边形：
    一个橙色四边形，内部有一个三角形孔洞。
    孔洞由 target4、target5 和 target6 定义，位置随时间移动。

本文定义的CZML数据的语法请参考：

  1. https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Structure
  2. https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/Packet
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
const czml = [
  {
    id: "document",
    name: "CZML Polygon - Interpolating References",
    version: "1.0",
    clock: {
      interval: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
      currentTime: "2012-08-04T16:00:00Z",
      multiplier: 240,
    },
  },
  {
    id: "dynamicPolygon",
    name: "Dynamic Polygon with Reference Properties",
    availability: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
    polygon: {
      positions: {
        references: ["v1#position", "v2#position", "v3#position"],// 动态顶点引用
      },
      perPositionHeight: true,//表示多边形的高度会根据每个顶点的高度自动调整。
      material: {
        solidColor: {
          color: [
            {
              interval: "2012-08-04T16:00:00Z/2012-08-04T16:25:00Z",
              rgbaf: [1, 0, 1, 1],// 紫红色
            },
            {
              interval: "2012-08-04T16:30:00Z/2012-08-04T17:00:00Z",
              rgbaf: [0, 1, 1, 1],// 青色
            },
          ],
        },
      },
    },
  },
  {
    id: "v1",
    position: {
      interpolationAlgorithm: "LINEAR", // 线性插值
      interpolationDegree: 1,
      interval: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
      epoch: "2012-08-04T16:00:00Z",
      cartographicDegrees: [
        0, -60, 35, 30000, // 时间(秒), 经度,纬度,高程
        160, -65, 35, 5000000, 
        400, -70, 40, 20000, 
        800, -62, 45, 200000, 
        1800, -65, 40, 650000, 
        3600, -60, 35, 3000,
      ],
    },
  },
  {
    id: "v2",
    position: {
      interval: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
      cartographicDegrees: [-45.0, 20, 4000000],
    },
  },
  {
    id: "v3",
    position: {
      interpolationAlgorithm: "LINEAR",
      interpolationDegree: 1,
      interval: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
      epoch: "2012-08-04T16:00:00Z",
      cartographicDegrees: [
        0, -45, 60, 4000, 
        400, -40, 70, 2000000, 
        1000, -35, 75, 100000, 
        3600, -45, 65, 3000,
      ],
    },
  },
  {
    id: "Polygon with Dynamic Holes",
    polygon: {
      positions: {
        cartographicDegrees: [-110, 43, 0, -90, 43, 0, -90, 30, 0, -110, 30, 0],
      },
      holes: {
        references: [
          ["target4#position", "target5#position", "target6#position"],
        ],
      },
      material: {
        solidColor: {
          color: {
            rgba: [255, 150, 0, 255],
          },
        },
      },
    },
  },
  {
    id: "target4",
    position: {
      interpolationAlgorithm: "LINEAR",
      interpolationDegree: 1,
      interval: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
      epoch: "2012-08-04T16:00:00Z",
      cartographicDegrees: [0, -100, 41, 0, 3600, -95, 41, 0],
    },
  },
  {
    id: "target5",
    position: {
      interpolationAlgorithm: "LINEAR",
      interpolationDegree: 1,
      interval: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
      epoch: "2012-08-04T16:00:00Z",
      cartographicDegrees: [0, -92, 42, 0, 3600, -92, 36, 0],
    },
  },
  {
    id: "target6",
    position: {
      interpolationAlgorithm: "LINEAR",
      interpolationDegree: 1,
      interval: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
      epoch: "2012-08-04T16:00:00Z",
      cartographicDegrees: [0, -95, 37, 0, 3600, -108, 38, 0],
    },
  },
];

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));