Cesium PolygonGeometry 添加面完整知识点 TS 代码

发布时间：2026/8/27 5:00:35

Cesium PolygonGeometry 添加面完整知识点 TS 代码
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兜底

相关新闻

深蓝词库转换：30+输入法格式互转终极解决方案

深蓝词库转换：30+输入法格式互转终极解决方案

深蓝词库转换：30输入法格式互转终极解决方案 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 深蓝词库转换是一款功能强大且完全免费的开源输入法词库转换…

2026/8/20 7:28:49 阅读更多 →
毕设开局不翻车[特殊字符]专业AI论文软件PaperXie，一键生成合规高分开题报告

毕设开局不翻车[特殊字符]专业AI论文软件PaperXie，一键生成合规高分开题报告

很多同学毕设开局就踩坑！开题报告作为毕业论文的第一道核心关卡，看似简单，实则格式严、逻辑密、内容要求高，是无数学生的毕业第一道难题。 市面上多数AI论文工具侧重论文中后期的降重、查重工作，开题创作能力薄弱&…

2026/8/22 5:37:59 阅读更多 →
问卷如何设计？

问卷如何设计？

问卷设计，远非简单的问题罗列。一份糟糕的问卷，不仅会浪费你的时间和预算，更可能因错误的数据导向，让你的决策南辕北辙。根据《哈佛商业评论》的研究，高达90%的市场调研失败，根源在于糟糕的问卷设计。如何设…

2026/8/23 9:02:42 阅读更多 →

最新新闻

C++核心编程：从类型系统到面向对象与异常处理的完整实践指南

C++核心编程：从类型系统到面向对象与异常处理的完整实践指南

1. 项目概述：为什么C依然是开发者绕不开的基石？如果你刚接触编程，可能会被Python的简洁或JavaScript的灵活所吸引。但当你真正想深入理解计算机如何工作，想构建高性能、资源可控的系统级应用时，C总会出现在你的学习路径…

2026/8/27 4:59:43 阅读更多 →
C++编程核心：从类型变量到OOP与异常处理的实战指南

C++编程核心：从类型变量到OOP与异常处理的实战指南

1. 项目概述：为什么C依然是开发者手中的“瑞士军刀”？每次看到有人争论“C是否过时了”，我都觉得这问题本身有点外行。在游戏引擎、高频交易、操作系统、嵌入式设备这些对性能和控制力有极致要求的领域，C依然是无可争议的王者。它…

2026/8/27 4:59:43 阅读更多 →
Windows下反射内存与光纤实时网络搭建实战指南

Windows下反射内存与光纤实时网络搭建实战指南

简介：在工业实时控制、硬件在环仿真与多节点数据采集场景中，数据交互的确定性与低延迟是系统稳定运行的关键。传统以太网受协议栈调度、丢包重传等因素影响，难以满足微秒级同步需求，而共享内存映射与光纤通信技术的结合&#xff0…

2026/8/27 4:59:43 阅读更多 →
FDMA数字PMR芯片组全解析：从架构到调优的工程实践

FDMA数字PMR芯片组全解析：从架构到调优的工程实践

说实话，我第一次拿到FDMA数字PMR芯片组的评估板时，心里还带着做模拟对讲机的老思路：给它接上麦克风、喇叭、天线，写完驱动应该就能通了。结果把数据手册翻完、参考设计过了一遍、再上频谱仪实测一轮之后才明白，数字PMR…

2026/8/27 4:59:43 阅读更多 →
大数据技术与应用 vs 数据科学与大数据技术：核心差异与职业选择指南

大数据技术与应用 vs 数据科学与大数据技术：核心差异与职业选择指南

1. 专业分野的深度解析：从“应用”到“科学”的本质跃迁最近在后台和线下交流时，发现很多同学，甚至是一些刚入行的朋友，对“大数据技术与应用”和“数据科学与大数据技术”这两个专业名称感到困惑。它们看起来都带着“大数据”这个…

2026/8/27 4:59:43 阅读更多 →
大模型落地必备：效率与可靠性优化全指南

大模型落地必备：效率与可靠性优化全指南

如果你负责过大模型在企业里的落地，大概率遇到过下面几类问题：线上调用量一上来，推理延迟就从 300ms 变成了 3s；同一个 prompt，昨天输出正常，今天突然多了一段 Markdown，下游解析脚本直接告警&a…

2026/8/27 4:58:43 阅读更多 →

日新闻

Go语言构建企业级AI服务网关：统一管理英伟达等AI接口调用

Go语言构建企业级AI服务网关：统一管理英伟达等AI接口调用

1. 项目概述：从零构建一个企业级的AI服务网关 最近在帮一个做内容审核的团队做技术架构升级，他们原来的业务里，每天有几十万张图片和短视频需要过审，最初是接了几个开源的AI模型自己部署，但效果和性能一直不太稳定。后…

2026/8/27 0:00:51 阅读更多 →
网盘直链下载助手5分钟解析八大网盘真实地址

网盘直链下载助手5分钟解析八大网盘真实地址

网盘直链下载助手5分钟解析八大网盘真实地址 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘 / 迅雷云盘 / 夸…

2026/8/27 1:06:27 阅读更多 →
从零点亮 ESP32：Arduino ESP32 开发环境搭建与首次烧录完整指南

从零点亮 ESP32：Arduino ESP32 开发环境搭建与首次烧录完整指南

从零点亮 ESP32：Arduino ESP32 开发环境搭建与首次烧录完整指南 【免费下载链接】arduino-esp32 Arduino core for the ESP32 family of SoCs 项目地址: https://gitcode.com/GitHub_Trending/ar/arduino-esp32 Arduino ESP32 是乐鑫官方的 ESP32 系列 Ardui…

2026/8/27 1:06:27 阅读更多 →

周新闻

[光学原理与应用-521]：对光的错误理解与纠偏

[光学原理与应用-521]：对光的错误理解与纠偏

首先光是一种能量的载体和形态，宏观上观察到的光是由无数个微观的光量子组成的，每个光子在产生的瞬间，其在真空的空间中以确定不变的速度沿着一个初始的方向一直向前，在微观层面，每个光量子的运动轨迹是以波函数所展现…

2026/8/26 14:45:33 阅读更多 →
SIP通话转接原理与REFER方法实战解析

SIP通话转接原理与REFER方法实战解析

1. 通话转接不是“挂断再拨号”，而是SIP会话的动态重定向你有没有遇到过这样的场景：客服坐席A正在和客户通电话，突然需要把这通对话无缝转给专家坐席B，客户完全感知不到中间的断连——既没听到忙音，也没被要求重新拨号…

2026/8/26 17:46:43 阅读更多 →
Kolla-ansible单节点OpenStack部署实战：从环境准备到排坑指南

Kolla-ansible单节点OpenStack部署实战：从环境准备到排坑指南

1. 为什么选择Kolla-ansible来部署单节点OpenStack？如果你正在寻找一种能把OpenStack从“概念”快速变成“可用的实验环境”的方法，那么Kolla-ansible几乎是当前最主流、最省心的选择。我见过太多人卡在手动编译依赖、配置服务、处理版本冲突的泥潭里&am…

2026/8/26 14:46:37 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/26 3:50:20 阅读更多 →
终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗？ncmdump解密工具帮你轻松解决这个困…

2026/8/26 17:46:39 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片：为英语学习 App 打造桌面级学习助手适用平台：HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0（API 26 Beta）新增了 AgentCard 智能体卡片能力，这是继 HMAF（鸿蒙智能体框架&#x…

2026/8/26 1:24:05 阅读更多 →