原文链接及内容

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

示例结果如下：

示例代码如下：

本文定义的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
133
134
135
const czml = [
  {
    id: "document",
    name: "CZML Geometries: Polygon",
    version: "1.0",
  },
  {
    id: "redPolygon",
    name: "Red polygon on surface",//红色五边形
    polygon: {
      positions: {
        cartographicDegrees: [
          -115.0, 37.0, 0, 
          -115.0, 32.0, 0, 
          -107.0, 33.0, 0, 
          -102.0, 31.0, 0,
          -102.0, 35.0, 0,
        ],
      },
      material: {
        solidColor: {
          color: {
            rgba: [255, 0, 0, 255],
          },
        },
      },
    },
  },
  {
    id: "checkerboardPolygon",//棋盘状图案的多边形
    name: "Checkerboard polygon on surface",
    polygon: {
      positions: {
        cartographicDegrees: [-94.0, 37.0, 0, -95.0, 32.0, 0, -87.0, 33.0, 0],
      },
      material: {
        checkerboard: {
          evenColor: {
            rgba: [255, 0, 0, 255],//偶数行为红色
          },
          oddColor: {
            rgba: [0, 128, 128, 255],//奇数行为青色
          },
        },
      },
    },
  },
  {
    id: "greenPolygon",
    name: "Green extruded polygon",//绿色等高拉伸多边形
    polygon: {
      positions: {
        cartographicDegrees: [-108.0, 42.0, 0, -100.0, 42.0, 0, -104.0, 40.0, 0],
      },
      material: {
        solidColor: {
          color: {
            rgba: [0, 255, 0, 255],
          },
        },
      },
      extrudedHeight: 500000.0,//垂直拉伸高度
      /**
       * 控制拉伸后的多边形顶部是否闭合。
       * 设为false时，顶部开口，可看到内部结构。
       */
      closeTop: false,
      /**
       * 控制拉伸后的多边形底部是否闭合。
       * 设为false时，底部开口。
       */
      closeBottom: false,
    },
  },
  {
    id: "orangePolygon",//橙色多边形，每个位置具有高度和轮廓
    name: "Orange polygon with per-position heights and outline",
    polygon: {
      positions: {
        cartographicDegrees: [
          -108.0, 25.0, 100000, 
          -100.0, 25.0, 100000, 
          -100.0, 30.0, 100000,
          -108.0, 30.0, 300000,
        ],
      },
      material: {
        solidColor: {
          color: {
            rgba: [255, 100, 0, 100],//填充色是透明橙色
          },
        },
      },
      extrudedHeight: 0,
      perPositionHeight: true,
      outline: true,
      outlineColor: {
        rgba: [0, 0, 0, 255],//边框是黑色
      },
    },
  },
  {
    id: "bluePolygonWithHoles",
    name: "Blue polygon with holes",//带孔洞的蓝色多边形
    polygon: {
      positions: {
        cartographicDegrees: [
          -82.0, 40.8, 0, 
          -83.0, 36.5, 0, 
          -76.0, 35.6, 0, 
          -73.5, 43.6, 0,
        ],
      },
      holes: {
        //两个孔洞，一个四边形，一个三角形
        cartographicDegrees: [
          [-81.0, 40.0, 0, -81.0, 38.2, 0, -79.0, 38.2, 0, -78.0, 40.8, 0],
          [-77.5, 36.7, 0, -78.5, 37.0, 0, -76.5, 39.6, 0],
        ],
      },
      material: {
        solidColor: {
          color: {
            rgba: [0, 0, 255, 255],
          },
        },
      },
    },
  },
];

const viewer = new Cesium.Viewer("cesiumContainer");
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);