原文链接及内容

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

效果如下图：

示例代码如下：

availability: 指定了对象在何时可以出现在场景中。只有在这个时间范围内，对象才会可见或生效。

  • 16:00-16:10：
    动态多边形：四边形带三角形孔洞，紫色。
  • 16:10-16:20：
    动态多边形：同上。
    加利福尼亚：出现（半透明红色，静态）。
  • 16:20-16:30：
    动态多边形：变为三角形，无孔洞，紫色。
    加利福尼亚：仍可见。
    宾夕法尼亚：出现（半透明绿色，拉伸）。
  • 16:30-16:40：
    动态多边形：三角形，16:30 变为青色。
    加利福尼亚：16:30 消失。
    宾夕法尼亚：仍可见。
  • 16:40-17:00：
    动态多边形：变为四边形，无孔洞，青色。
    宾夕法尼亚：16:40 消失。

本文定义的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 - Intervals and Availability",
    version: "1.0",
    clock: {
      interval: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
      currentTime: "2012-08-04T16:00:00Z",
      multiplier: 900,
    },
  },
  {
    id: "dynamicPolygon",//动态多边形
    name: "Dynamic Polygon with Intervals",
    availability: "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",
    polygon: {
      positions: [
        {
          interval: "2012-08-04T16:00:00Z/2012-08-04T16:20:00Z",
          cartographicDegrees: 
          [
            -50, 20, 0,        
            -50, 40, 0,          
            -40, 40, 0,                     
            -40, 20, 0
          ],
        },
        {
          interval: "2012-08-04T16:20:00Z/2012-08-04T16:40:00Z",
          cartographicDegrees: [-35, 50, 0, 
                                -35, 10, 0, 
                                -45, 30, 0],
        },
        {
          interval: "2012-08-04T16:40:00Z/2012-08-04T17:00:00Z",
          cartographicDegrees: [-35, 50, 0, 
                                -40, 50, 0, 
                                -40, 20, 0, 
                                -35, 20, 0],
        },
      ],
      holes: [
        {
          interval: "2012-08-04T16:00:00Z/2012-08-04T16:20:00Z",
          cartographicDegrees: [[-47, 35, 0, 
                                 -46, 25, 0, 
                                 -42, 30, 0]],
        },
      ],
      material: {
        solidColor: {
          color: [
            {
              interval: "2012-08-04T16:00:00Z/2012-08-04T16:30:00Z",
              rgbaf: [1, 0, 1, 1],
            },
            {
              interval: "2012-08-04T16:30:00Z/2012-08-04T17:00:00Z",
              rgbaf: [0, 1, 1, 1],
            },
          ],
        },
      },
    },
  },
  {
    id: "california",//加利福尼亚
    name: "static california with set availability",
    availability: "2012-08-04T16:10:00Z/2012-08-04T16:30:00Z",
    polygon: {
      positions: {
        cartographicDegrees: [
          -120, 42, 50000, 
          -124, 42, 30500, 
          -124.5, 40, 3000, 
          -123, 38, 0, 
          -122, 36, 0, 
          -120.8, 34.2, 0, 
          -118, 34, 0, 
          -117, 32.2, 6000, 
          -115.5, 32.5, 1530, 
          -115, 35, 1530, 
          -120, 39, 30500,
        ],
      },
      material: {
        solidColor: {
          color: {
            rgba: [255, 0, 0, 150],
          },
        },
      },
      perPositionHeight: true,
      extrudedHeight: 0,
    },
  },
  {
    id: "pennsylvania",//宾夕法尼亚
    name: "static pennsylvania with set availability",
    availability: "2012-08-04T16:20:00Z/2012-08-04T16:40:00Z",
    polygon: {
      positions: {
        cartographicDegrees: [
          -75.5, 42, 0, 
          -79.8, 42, 0, 
          -79.9, 42.3, 0, 
          -80.5, 42, 0, 
          -80.5, 39.8, 0, 
          -75.7, 39.8, 0, 
          -74.5, 40.2, 0, 
          -75.2, 40.8, 0, 
          -74.7, 41.3, 0,
        ],
      },
      material: {
        solidColor: {
          color: {
            rgba: [0, 255, 0, 150],
          },
        },
      },
      height: 50000,
      extrudedHeight: 200000,
    },
  },
];

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

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