原文链接及内容

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

效果如下图所示：

示例代码如下：

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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
  shadows: true,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const redPolygon = viewer.entities.add({
  name: "位于地表的红色多边形",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -115.0, 37.0, -115.0, 32.0, -107.0, 33.0, -102.0, 31.0, -102.0, 35.0,
    ]),
    material: Cesium.Color.RED,
  },
});

const greenPolygon = viewer.entities.add({
  name: "拉伸过的绿色多边形",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -108.0, 42.0, -100.0, 42.0, -104.0, 40.0,
    ]),
    extrudedHeight: 500000.0,
    material: Cesium.Color.GREEN,
    closeTop: false,
    closeBottom: false,
  },
});

const texturedPolygon = viewer.entities.add({
  name: "拉伸过的纹理多边形，具有逐位置高度(per-position)和自定义纹理坐标",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
      -118.4, 40.4, 50000, -118.4, 37, 30000, -114.2, 38.0, 35000, -108.0, 37,
      30000, -108.0, 40.4, 50000,
    ]),
    textureCoordinates: {
      positions: [
        new Cesium.Cartesian2(0, 1),
        new Cesium.Cartesian2(0, 0),
        new Cesium.Cartesian2(0.5, 0),
        new Cesium.Cartesian2(1, 0),
        new Cesium.Cartesian2(1, 1),
      ],
    },
    perPositionHeight: true,
    extrudedHeight: 0,
    material: "../images/Cesium_Logo_Color.jpg",
  },
});

const texturedPolygonWithHoles = viewer.entities.add({
  name: "具有逐位置高度(per-position)、孔洞和自定义纹理坐标的纹理多边形",
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        -130, 40.0, 50000, -130, 36.0, 30000, -125, 37, 35000, -120, 36.0,
        30000, -120, 40.0, 50000,
      ]),
      holes: [
        {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            -128, 39.2, 46000, -128, 38.6, 42000, -127, 38.6, 42000, -127, 39.2,
            46000,
          ]),
        },
      ],
    },
    textureCoordinates: {
      positions: [
        new Cesium.Cartesian2(0, 1),
        new Cesium.Cartesian2(0, 0),
        new Cesium.Cartesian2(0.5, 0),
        new Cesium.Cartesian2(1, 0),
        new Cesium.Cartesian2(1, 1),
      ],
      holes: [
        {
          positions: [
            new Cesium.Cartesian2(0.2, 0.8),
            new Cesium.Cartesian2(0.2, 0.6),
            new Cesium.Cartesian2(0.4, 0.6),
            new Cesium.Cartesian2(0.4, 0.8),
          ],
        },
      ],
    },
    perPositionHeight: true,
    material: "../images/Cesium_Logo_Color.jpg",
  },
});

const orangePolygon = viewer.entities.add({
  name: "带有逐位置高度(per-position)和轮廓的橙色多边形",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
      -108.0, 25.0, 100000, -100.0, 25.0, 100000, -100.0, 30.0, 100000, -108.0,
      30.0, 300000,
    ]),
    extrudedHeight: 0,
    perPositionHeight: true,
    material: Cesium.Color.ORANGE.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

const bluePolygon = viewer.entities.add({
  name: "带孔的蓝色多边形",
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        -99.0, 30.0, -85.0, 30.0, -85.0, 40.0, -99.0, 40.0,
      ]),
      holes: [
        {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -97.0, 31.0, -97.0, 39.0, -87.0, 39.0, -87.0, 31.0,
          ]),
          holes: [
            {
              positions: Cesium.Cartesian3.fromDegreesArray([
                -95.0, 33.0, -89.0, 33.0, -89.0, 37.0, -95.0, 37.0,
              ]),
              holes: [
                {
                  positions: Cesium.Cartesian3.fromDegreesArray([
                    -93.0, 34.0, -91.0, 34.0, -91.0, 36.0, -93.0, 36.0,
                  ]),
                },
              ],
            },
          ],
        },
      ],
    },
    material: Cesium.Color.BLUE.withAlpha(0.5),
    height: 0,
    outline: true, // 高度是必要的一遍能看到轮廓
  },
});

const cyanPolygon = viewer.entities.add({
  name: "带有逐位置高度(per-position)和轮廓的青色垂直多边形",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
      -90.0, 41.0, 0.0, -85.0, 41.0, 500000.0, -80.0, 41.0, 0.0,
    ]),
    perPositionHeight: true,
    material: Cesium.Color.CYAN.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

const purplePolygonUsingRhumbLines = viewer.entities.add({
  //参考：https://cesium.com/learn/cesiumjs/ref-doc/global.html?classFilter=ArcType#ArcType
  name: "(折点)用沿着rhumb或loxodrome路径绘制的带轮廓的紫色多边形",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -120.0, 45.0, -80.0, 45.0, -80.0, 55.0, -120.0, 55.0,
    ]),
    extrudedHeight: 50000,
    material: Cesium.Color.PURPLE,
    outline: true,
    outlineColor: Cesium.Color.MAGENTA,
    arcType: Cesium.ArcType.RHUMB,
  },
});

viewer.zoomTo(viewer.entities);