深度解析Cesium球面几何：如何用PolygonGeometry实现精准行政区挖孔

当你在Cesium中尝试创建一个覆盖全球的半透明蒙版，然后挖空特定行政区时，可能会遇到一个令人困惑的现象——明明按照经纬度范围设置了多边形顶点，却看不到任何渲染效果。这不是代码写错了，而是Cesium处理球面几何的特殊方式在"作怪"。

1. 全球蒙版失效的根源：经度连续性陷阱

很多开发者第一次尝试创建全球蒙版时，会自然地想到用[-180, 90, 180, 90, 180, -90, -180, -90]这样的顶点坐标来定义一个覆盖整个地球的矩形。理论上，这组坐标确实描述了一个从南极到北极、环绕整个经度范围的巨大多边形。但在Cesium中实际运行时，却什么也看不到。

核心问题在于经度的连续性处理。在Cesium的WGS84椭球体模型中：

• 经度-180°和+180°实际上是同一条经线
• 当多边形顶点跨越这条线时，Cesium会优先选择最短路径
• 结果就是整个多边形被"压缩"成了一条宽度为零的线

javascript复制// 错误示范：这种定义方式会导致渲染失败
const positions = Cesium.Cartesian3.fromDegreesArray([
  -180, 90,
  180, 90,
  180, -90,
  -180, -90
]);

1.1 解决方案：东西半球分治法

解决这个问题的关键在于避免多边形顶点直接跨越-180°到+180°。我们可以将全球蒙版拆分为两个半球：

• 西半球：从-180°到0°
• 东半球：从0°到+180°

javascript复制// 正确的半球分割方案
const wPositions = Cesium.Cartesian3.fromDegreesArray([
  -0.00001, 60,
  -0.00001, -60,
  -180, -60,
  -180, 60,
  -0.00001, 60
]);

const ePositions = Cesium.Cartesian3.fromDegreesArray([
  0.00001, 60,
  0.00001, -60,
  180, -60,
  180, 60,
  0.00001, 60
]);

这里有几个关键细节：

1. 使用-0.00001和+0.00001作为分割点，避免直接在0°经线上产生接缝
2. 纬度范围控制在-60°到60°，而非-90°到90°（原因后文会解释）
3. 每个半球都是独立闭合的多边形

2. PolygonGeometry的球面特性解析

为什么使用-60°到60°的纬度范围就能覆盖全球？这涉及到Cesium处理球面几何的核心机制。

2.1 GEODESIC弧线类型的作用

当创建PolygonGeometry时，arcType参数设置为GEODESIC（测地线）会产生特殊效果：

在GEODESIC模式下，即使你定义的纬度范围没有到达极地，Cesium也会自动补全多边形，使其看起来覆盖整个地球。这是因为：

1. 球面三角剖分算法会自动填补极区缺口
2. 跨越足够大经度范围的多边形被视为"全球包裹"
3. 椭球体表面的法线计算确保了视觉连续性

javascript复制// 验证GEODESIC的自动补全特性
const testGeometry = new Cesium.PolygonGeometry({
  polygonHierarchy: new Cesium.PolygonHierarchy(
    Cesium.Cartesian3.fromDegreesArray([
      -0.00001, 30,
      -0.00001, -30,
      -180, -30,
      -180, 30
    ])
  ),
  arcType: Cesium.ArcType.GEODESIC
});
// 仍然会显示为全球覆盖效果

2.2 为什么不用RHUMB弧线类型

Cesium还提供了RHUMB（恒向线）弧线类型，但它在全球蒙版场景中并不适用：

• RHUMB在墨卡托投影下表现为直线
• 无法正确处理极区几何
• 跨180°经线时可能出现计算错误

GEODESIC与RHUMB对比表

3. 精准挖孔：PolygonHierarchy高级用法

真正的挑战在于如何在全球蒙版上精确"挖出"行政区的形状。这需要深入理解PolygonHierarchy的工作机制。

3.1 多边形层级结构原理

PolygonHierarchy不仅定义多边形轮廓，还能定义孔洞：

javascript复制// 带孔洞的多边形结构
const hierarchy = new Cesium.PolygonHierarchy(
  outerPositions, // 外轮廓
  [holePositions1, holePositions2] // 孔洞数组
);

行政区挖孔的关键步骤：

1. 获取行政区的边界坐标（GeoJSON或其它格式）
2. 将坐标转换为Cesium.Cartesian3数组
3. 作为holePositions传入PolygonHierarchy
4. 确保孔洞多边形方向与外轮廓相反（顺时针vs逆时针）

3.2 跨半球孔洞处理技巧

当行政区跨越东西半球时，需要特殊处理：

1. 将行政区多边形在180°经线处分割
2. 分别创建东西半球的孔洞
3. 确保分割后的多边形仍然闭合

javascript复制// 处理跨越180°经线的行政区
function splitPolygonAt180(positions) {
  const westHole = [];
  const eastHole = [];
  
  positions.forEach((position, i) => {
    const lon = Cesium.Math.toDegrees(position.longitude);
    if (lon < 0) {
      westHole.push(position);
    } else {
      eastHole.push(position);
    }
  });
  
  // 添加连接点确保多边形闭合
  westHole.push(/* 连接点1 */);
  eastHole.push(/* 连接点2 */);
  
  return [westHole, eastHole];
}

4. 性能优化与高级技巧

全球蒙版加行政区挖孔是一个计算密集型操作，需要特别注意性能优化。

4.1 实例化渲染的优势

使用GeometryInstance组合多个多边形：

javascript复制const instances = [
  new Cesium.GeometryInstance({
    geometry: new Cesium.PolygonGeometry({
      polygonHierarchy: new Cesium.PolygonHierarchy(westPositions),
      arcType: Cesium.ArcType.GEODESIC
    })
  }),
  new Cesium.GeometryInstance({
    geometry: new Cesium.PolygonGeometry({
      polygonHierarchy: new Cesium.PolygonHierarchy(eastPositions),
      arcType: Cesium.ArcType.GEODESIC
    })
  })
];

const primitive = new Cesium.GroundPrimitive({
  geometryInstances: instances,
  appearance: new Cesium.MaterialAppearance({
    material: Cesium.Material.fromType('Color', {
      color: Cesium.Color.RED.withAlpha(0.5)
    })
  })
});

4.2 动态更新策略

如果需要动态更新蒙版或孔洞：

1. 避免频繁创建新的GeometryInstance
2. 使用Primitive的modify方法更新现有几何
3. 考虑使用CustomShader实现动态效果

javascript复制// 动态更新孔洞示例
function updateHoles(newHoles) {
  const newGeometry = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(outerPositions, newHoles),
    arcType: Cesium.ArcType.GEODESIC
  });
  
  primitive.modify(function() {
    this.geometry = newGeometry;
  });
}

4.3 常见问题排查指南

在实际项目中，我曾遇到一个棘手的问题：当行政区包含多个岛屿时，直接作为单个孔洞会导致渲染错误。解决方案是将每个岛屿作为独立的孔洞处理，并确保每个孔洞的多边形方向正确。