经纬志
首页 / Cesium / 使用示例

三维原生矢量面

矢量数据也能有体积:给多边形加一个挤出高度,平面地块立刻变成有厚度的体块,边界依旧清楚。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

这个示例在做什么

矢量面转成三维有两种常见做法:给 polygon 设 extrudedHeight, 或者用 wall 沿边界拉起墙面。示例用前者,把三块不规则地块从地面挤出到不同高度, 地面多边形与侧壁由 Cesium 自动生成。

半透明材质加白色描边是关键:半透明能看清背后的地块,描边则保证边界在重叠时依然清楚。 真实矢量数据只要把经纬度数组换成要素坐标,其余参数可以直接照搬。

关键接口

接口作用
polygon.extrudedHeight把平面多边形挤出成立体,单位米
PolygonHierarchy支持带洞的多边形,洞同样会被挤出
material.withAlpha半透明填充,叠加时能看清后排
outline / outlineColor描边让相邻地块的边界保持锐利

可以直接改的地方

位置改什么效果
extrudedHeight: 42改成 5 或 120地块高度
withAlpha(0.75)改成 1不透明实心面
poly(...) 的坐标数组换成真实要素坐标渲染任意矢量面
height: 0改成负数地块沉入地表以下,做地下空间示意

替代说明:官方示例读取 ion 上带三维矢量面属性的 3D Tiles 数据集。 这里用地块多边形直接挤出,得到同样的立体面观感;真实数据只需把坐标来源换成要素集合。