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

多边形挖洞遮罩

一块深色遮罩盖住整片区域,中间挖了两个圆洞, 洞里的小柱子清晰可见。滑杆控制洞的半径,按钮可以整块去掉。

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

洞是一圈独立的坐标

new Cesium.PolygonHierarchy(outer, holes) 的第二个参数是数组, 每一项本身又是一个 PolygonHierarchy。 示例用三角函数算出 48 个点围成圆,作为洞的边界。

洞的环绕方向要与外环相反,Cesium 才能正确判定哪部分属于外部。 用 fromDegreesArray 按逆时针生成圆环即可, 方向和示例保持一致。

遮罩的用法

遮罩本质是一块高透明度深色面,盖住不需要强调的区域。 洞内的柱子带标签,因为遮罩有洞,所以从上方直接看到底, 形成「聚焦两处」的效果。

可调参数

位置改什么效果
洞半径滑杆300 到 2200 米洞口大小
「去掉洞」按钮点击遮罩变成完整一块
HOLE_CENTERS加第三个洞同时挖出三处
遮罩 alpha0.86 改成 0.6底图透出来一部分

洞不能超出外环。圆洞一旦越过遮罩边界,整个多边形可能被丢弃或 渲染成异常形状。调大半径时要顺带检查外框是否仍然完全包住圆。