cesium 添加挖空面

### 在 Cesium 中实现带有挖空效果的多边形面 在 Cesium 中，可以通过 `PolygonGraphics` 和 `PolygonHierarchy` 来定义带有挖空效果的多边形面。以下内容详细说明了如何实现这一功能。 #### 核心概念 - **PolygonHierarchy**: 用于定义多边形及其孔的线性环层次[^1]。这些孔本身也可能有嵌套内部多边形的孔。 - **PolygonGraphics**: 描述由组成外部形状和任何嵌套孔的线性环层次定义的多边形[^1]。 #### 示例代码 以下代码展示了如何在 Cesium 中创建一个带有挖空效果的多边形面： ```javascript function addPolygonWithHoles(viewer, outerRing, holes) { const entities = viewer.entities; const polygonEntity = entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray(outerRing) ), material: Cesium.Color.BLUE.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.BLACK } }); if (holes && holes.length > 0) { polygonEntity.polygon.hierarchy.holes = new Cesium.PropertyBag(); holes.forEach((hole, index) => { polygonEntity.polygon.hierarchy.holes.addProperty( `hole${index}`, Cesium.Cartesian3.fromDegreesArray(hole) ); }); } viewer.zoomTo(entities); } // 示例调用 const viewer = new Cesium.Viewer("cesiumContainer"); // 外部多边形顶点（顺时针或逆时针顺序） const outerRing = [ -107.0, 40.0, -102.0, 40.0, -102.0, 36.0, -107.0, 36.0 ]; // 挖空部分的顶点（顺时针或逆时针顺序） const holes = [ [-106.0, 39.0, -103.0, 39.0, -103.0, 37.0, -106.0, 37.0], [-105.0, 38.0, -104.0, 38.0, -104.0, 36.5, -105.0, 36.5] ]; addPolygonWithHoles(viewer, outerRing, holes); ``` #### 注意事项 - **顶点顺序**: 确保外部多边形和孔的顶点顺序一致（顺时针或逆时针）。Cesium 不会自动调整顶点顺序[^2]。 - **复杂几何类型**: 如果输入的是 `MULTIPOLYGON` 类型数据，则需要先将其拆分为多个 `POLYGON` 数据再逐一添加[^2]。 - **性能优化**: 对于包含大量顶点或多边形的场景，建议使用 `Cesium3DTileset` 或其他高性能渲染方式替代实体集合[^3]。 #### 解析 WKT 字符串 如果输入为 WKT（Well-Known Text）格式字符串，例如 `POLYGON ((...))`，则需要先解析字符串为坐标数组。以下是一个简单的解析函数： ```javascript function wktToPolygonArray(wktString) { const regex = /\(([^)]+)\)/g; const matches = []; let match; while ((match = regex.exec(wktString)) !== null) { matches.push( match[1] .split(",") .map(coord => coord.trim().split(" ").map(Number)) .flat() ); } return matches; } ``` ####