原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Z-Indexing%20Geometry.html&label=Geometries

示例代码如下：

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
const viewer = new Cesium.Viewer("cesiumContainer");

viewer.entities.add({
  id: "红色矩形, zIndex 1",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-110.0, 20.0, -100.5, 30.0),
    material: Cesium.Color.RED,
    zIndex: 1,
  },
});

viewer.entities.add({
  id: "纹理矩形, zIndex 2",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-112.0, 25.0, -102.5, 35.0),
    material: "../images/Cesium_Logo_Color.jpg",
    zIndex: 2,
  },
});

viewer.entities.add({
  id: "蓝色矩形, zIndex 3",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-110.0, 31.0, -100.5, 41.0),
    material: Cesium.Color.BLUE,
    zIndex: 3,
  },
});

viewer.entities.add({
  id: "纹理矩形, zIndex 3",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-99.5, 20.0, -90.0, 30.0),
    material: "../images/Cesium_Logo_Color.jpg",
    zIndex: 3,
  },
});

viewer.entities.add({
  id: "绿色矩形, zIndex 2",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-97.5, 25.0, -88.0, 35.0),
    material: Cesium.Color.GREEN,
    zIndex: 2,
  },
});

viewer.entities.add({
  id: "蓝色矩形, zIndex 1",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-99.5, 31.0, -90.0, 41.0),
    material: Cesium.Color.BLUE,
    zIndex: 1,
  },
});

if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
  window.alert(
    // "Polylines on terrain are not supported on this platform, Z-index will be ignored",
    "此平台不支持地形上的多段线，Z 索引将被忽略",
  );
}

if (!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(viewer.scene)) {
  window.alert(
    // "Textured materials on terrain polygons are not supported on this platform, Z-index will be ignored",
    "此平台不支持地形多边形上的纹理材质，Z 索引将被忽略",
  );
}

viewer.entities.add({
  id: "多线段, zIndex 2",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-120.0, 22.0, -80.0, 22.0]),
    width: 8.0,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.2,
      color: Cesium.Color.BLUE,
    }),
    zIndex: 2,
    clampToGround: true,
  },
});

viewer.zoomTo(viewer.entities);

运行结果如下：