PolygonGeometryPrimitivePerInstanceColorAppearance专门渲染MULTIPOLYGON Z 带逐点高程三维空间面当前项目当前使用 区分PolygonGeometry三维空间面支持perPositionHeight:true每个顶点独立 Z 高程 ✅GroundPolygonGeometry贴地面丢弃顶点高程强制贴地形不能用在 MultiPolygon‑Z 数据❌一、核心 API 说明PolygonGeometry 参数const fillGeo new Cesium.PolygonGeometry({ polygonHierarchy: hierarchy, // 多边形层级外环 内环(洞) perPositionHeight: true, // ✅开启逐点高程MULTIPOLYGON‑Z必须打开 vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT });polygonHierarchyPolygonHierarchy(外环Cartesian3[], 内环洞数组)支持挖洞perPositionHeight:true每个顶点使用自身 Cartesian3 的高度形成起伏三维面vertexFormat使用PerInstanceColorAppearance必须配套这个顶点格式GeometryInstance实现每个面不同颜色new Cesium.GeometryInstance({ geometry: fillGeo, id: item.id, //拾取ID attributes: { // 每个实例独立颜色 color: Cesium.ColorGeometryInstanceAttribute.fromColor(fillColor) } })Primitive PerInstanceColorAppearanceconst prim new Cesium.Primitive({ geometryInstances: instances, appearance: new Cesium.PerInstanceColorAppearance({ translucent: true, //支持透明度 closed: true //几何体闭合 }), asynchronous: true });⚠️重要限制PerInstanceColorAppearance不支持 depthFailAppearance面被地形埋住直接看不见不能切换地下材质如果需要被遮挡也可见prim.depthTestEnabled false;关闭深度测试会浮在最上层牺牲三维真实感依靠attributes.color实现同一个 Primitive 里面多个面各自不同颜色。属性说明geometryInstancesGeometryInstance 数组一个面 一个实例appearancePerInstanceColorAppearance支持实例独立颜色asynchronoustrue 异步构建几何体大数据不阻塞页面prim.depthTestEnabledtrue 开启深度测试false 关闭永远显示在顶层二、基础完整示例单一个三维面带洞// 1.外环顶点带高程Z const outerRing [ Cesium.Cartesian3.fromDegrees(102.48, 24.70, 1600), Cesium.Cartesian3.fromDegrees(102.49, 24.71, 1620), Cesium.Cartesian3.fromDegrees(102.50, 24.70, 1580), Cesium.Cartesian3.fromDegrees(102.48, 24.70, 1600), // 闭合首尾相同 ]; // 2.内环挖洞可选 const holeRing [ Cesium.Cartesian3.fromDegrees(102.485, 24.703, 1605), Cesium.Cartesian3.fromDegrees(102.488, 24.706, 1610), Cesium.Cartesian3.fromDegrees(102.486, 24.702, 1602), Cesium.Cartesian3.fromDegrees(102.485, 24.703, 1605), ]; // 3.构建层级外环 多个内环洞 const hierarchy new Cesium.PolygonHierarchy(outerRing, [ new Cesium.PolygonHierarchy(holeRing) ]); // 4.生成几何体开启逐点高程 const polygonGeo new Cesium.PolygonGeometry({ polygonHierarchy: hierarchy, perPositionHeight: true, vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT }); // 5.包装实例设置本面颜色 const instance new Cesium.GeometryInstance({ geometry: polygonGeo, id: poly_001, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE.withAlpha(0.35)) } }); // 6.创建Primitive const prim new Cesium.Primitive({ geometryInstances: instance, appearance: new Cesium.PerInstanceColorAppearance({ translucent: true, closed: true }), asynchronous: true }); // 如果需要被地形遮挡也可见打开下面 // prim.depthTestEnabled false; this.viewer.scene.primitives.add(prim);三、批量渲染多面你项目 MULTIPOLYGON Z 逻辑const tempFillInstances: Cesium.GeometryInstance[] []; // wktGeo.coordinates MULTIPOLYGON‑Z结构 wktGeo.coordinates.forEach((polygonParts: number[][][]) { if (!Array.isArray(polygonParts) || polygonParts.length 0) return; // polygonParts[0] 外环polygonParts[1...] 内环洞 const outerRingCoord polygonParts[0]; if (!Array.isArray(outerRingCoord) || outerRingCoord.length 3) return; //外环转Cartesian3 const outerPositions outerRingCoord.map(([lon, lat, h]) Cesium.Cartesian3.fromDegrees(lon, lat, h ?? 0) ); //处理挖洞内环 const holes: Cesium.PolygonHierarchy[] []; for (let i 1; i polygonParts.length; i) { const innerCoord polygonParts[i]; if (!Array.isArray(innerCoord) || innerCoord.length 3) continue; const innerPositions innerCoord.map(([lon, lat, h]) Cesium.Cartesian3.fromDegrees(lon, lat, h ?? 0) ); holes.push(new Cesium.PolygonHierarchy(innerPositions)); } const hierarchy new Cesium.PolygonHierarchy(outerPositions, holes); const fillGeo new Cesium.PolygonGeometry({ polygonHierarchy: hierarchy, perPositionHeight: true, vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT }); const fillColor Cesium.Color.fromCssColorString(colorStr).withAlpha(0.35); tempFillInstances.push(new Cesium.GeometryInstance({ geometry: fillGeo, id: item.id, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(fillColor) } })); }); // 渲染Primitive if(tempFillInstances.length 0){ const prim new Cesium.Primitive({ geometryInstances: tempFillInstances, appearance: new Cesium.PerInstanceColorAppearance({ translucent: true, closed: true }), asynchronous: true }); // prim.depthTestEnabled false; //需要强制可见打开 this.viewer.scene.primitives.add(prim); this.polygonPrimitiveMap.set(fill_${Math.random()}, prim); }四、拾取点击const handler new Cesium.ScreenSpaceEventHandler(this.viewer.canvas); handler.setInputAction((click) { const pick this.viewer.scene.pick(click.position); if (Cesium.defined(pick)) { console.log(面要素ID, pick.id); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);五、销毁清除内存泄漏private polygonPrimitiveMap new Mapstring, Cesium.Primitive(); public clearPolygonPrimitive(){ this.polygonPrimitiveMap.forEach(prim{ this.viewer.scene.primitives.remove(prim); }) this.polygonPrimitiveMap.clear(); }六、重要坑清单perPositionHeight:true只对 PolygonGeometry 生效GroundPolygonGeometry 不支持会丢失 Z 高程。PerInstanceColorAppearance没有 depthFailAppearance三维面埋进山体直接看不见没有地下半透明方案。兜底prim.depthTestEnabledfalse。多边形顶点最少 3 个WKT 解析要校验少于 3 个直接跳过否则渲染崩溃。外环 / 内环建议首尾闭合即使不闭合 Cesium 内部会自动闭合。Primitive 一旦创建不能修改顶点坐标、不能修改单一面颜色更新数据必须全部销毁重新构建。想要每个面不同颜色必须给每个GeometryInstance设置attributes.color不能改 appearance 材质。透明度依靠withAlpha()PerInstanceColorAppearance构造参数translucent:true必须打开否则透明度失效。七、对比总表线 / 点 / 面要素几何体Appearance地下遮挡变色支持独立高程 Z三维折线PolylineGeometryPolylineMaterialAppearance✅ depthFailAppearance✅节点点PointPrimitiveCollection-✅ depthFailColor✅三维空间面PolygonGeometryPerInstanceColorAppearance❌无 API只能关闭 depthTestEnabled✅贴地面GroundPolygonGeometryPerInstanceColorAppearance❌❌丢弃高程业务选型总结MultiLineString‑Z 三维线PolylineGeometry Primitive depthFailAppearance折线上节点PointPrimitiveCollection depthFailColorMultiPolygon‑Z 带高程面PolygonGeometry PerInstanceColorAppearance地下看不见只能depthTestEnabledfalse兜底