点击查看：最新Cesium可视化系统实战视频课程
在Cesium中，zIndex属性是用来控制二维屏幕上的实体渲染顺序的。这对于叠加多个平面几何图形（例如矩形、折线等）时的显示效果尤为重要。通过调整zIndex值，可以决定不同实体在显示时的覆盖关系。本文将结合示例代码详细讲解如何在Cesium中使用zIndex。
1. 什么是
zIndex是一个整数值，用于控制实体在屏幕上的堆叠顺序。zIndex值越大，该实体会显示在其他zIndex值较小的实体之上。
需要注意的是，zIndex仅适用于以下情况：
- 二维模式（2D）或哥伦布视图（Columbus View）。
- 适用于二维屏幕空间渲染的几何图形（如矩形和折线）。
- 在地球表面（terrain）上的渲染可能会有一定限制，具体取决于平台支持。
如果是在3D视图中，zIndex通常会被忽略，因为3D视图的实体显示优先级主要由相机角度和深度测试决定。
2.
以下是使用zIndex的几个典型场景：
- 重叠矩形的显示控制：当多个矩形区域重叠时，调整
zIndex可以决定哪个矩形显示在上面。 - 折线与图形的层次关系：在绘制折线与图形叠加时，可以通过
zIndex调整显示顺序。 - 纹理与颜色实体的叠加：当使用纹理或颜色填充实体时，通过
zIndex可以实现更细致的控制。
3. 示例代码详解
以下是代码中每一部分的详细说明，着重解释zIndex的作用。
（1）初始化Cesium Viewer
javascript
const viewer = new Cesium.Viewer("cesiumContainer");创建Cesium的Viewer对象，用于初始化3D地球场景，并将其挂载到HTML页面中指定的div容器（cesiumContainer）。
（2）添加不同的矩形实体并设置
在以下代码中，我们添加了几个矩形实体，分别设置了不同的zIndex值，以决定它们的显示顺序。
红色矩形（zIndex: 1）
javascript
viewer.entities.add({
id: "Red rectangle, zIndex 1",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-110.0, 20.0, -100.5, 30.0),
material: Cesium.Color.RED,
zIndex: 1,
},
});- 使用
Cesium.Rectangle.fromDegrees定义矩形的经纬度范围。 - 使用
Cesium.Color.RED设置矩形的填充颜色。 - 设置
zIndex: 1，表示该矩形的堆叠优先级较低。
蓝色矩形（zIndex: 3）
javascript
viewer.entities.add({
id: "Blue rectangle, zIndex 3",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-110.0, 31.0, -100.5, 41.0),
material: Cesium.Color.BLUE,
zIndex: 3,
},
});- 该矩形的
zIndex为3，因此在屏幕渲染时，它会显示在zIndex: 1和zIndex: 2的实体之上。
绿色矩形（zIndex: 2）
javascript
viewer.entities.add({
id: "Green rectangle, zIndex 2",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-97.5, 25.0, -88.0, 35.0),
material: Cesium.Color.GREEN,
zIndex: 2,
},
});- 该矩形的
zIndex介于1和3之间，因此它会显示在红色矩形上方，但位于蓝色矩形下方。
（3）添加纹理矩形并设置
除了颜色填充矩形外，Cesium支持使用图像纹理填充矩形。以下代码展示了如何为矩形设置纹理，并使用zIndex控制它的显示优先级。
javascript
viewer.entities.add({
id: "Textured rectangle, zIndex 2",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-112.0, 25.0, -102.5, 35.0),
material: "../images/Cesium_Logo_Color.jpg",
zIndex: 2,
},
});material属性设置为纹理图像路径。zIndex: 2，该纹理矩形会与绿色矩形处于同一优先级。
（4）添加折线并设置
以下代码展示了如何添加折线，并通过zIndex调整其显示优先级。
javascript
viewer.entities.add({
id: "Polyline, 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,
},
});
javascript- 使用
Cesium.Cartesian3.fromDegreesArray定义折线的坐标点。 zIndex: 2，表示该折线的优先级与绿色矩形和纹理矩形相同。clampToGround: true，确保折线贴合地形。
（5）视图缩放到所有实体
javascript
viewer.zoomTo(viewer.entities);将相机视角调整到所有实体的范围内，使用户可以直接看到所有矩形和折线。
4.
- 仅适用于2D模式和哥伦布视图：在3D模式下，
zIndex通常不起作用。 - 平台支持限制：在某些平台或显卡上，如果不支持贴地材质或折线，
zIndex可能会被忽略。 - Terrain渲染的限制：当启用地形渲染时，纹理或多边形实体可能无法正确使用
zIndex，需要根据场景调整。
为了提醒用户，代码中加入了以下检查：
javascript
if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
window.alert("Polylines on terrain are not supported on this platform, Z-index will be ignored");
}
if (!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(viewer.scene)) {
window.alert("Textured materials on terrain polygons are not supported on this platform, Z-index will be ignored");
}5. 总结
zIndex是Cesium中一个非常重要的属性，特别是在2D和哥伦布视图中进行实体叠加显示时，可以通过调整其值来轻松控制显示顺序。在使用zIndex时，请注意以下几点：
- 在2D或哥伦布视图中使用
zIndex效果最佳。 - 在启用地形或3D模式时，
zIndex的效果可能受到限制。 - 合理设置
zIndex值可以帮助我们实现更清晰、分层的图形显示。
通过调整zIndex，你可以创建更加复杂的可视化效果，使Cesium的地图显示更具层次感和可读性。
