从2D地图到3D地球：用Cesium Entities API 快速构建你的第一个三维地理围栏（附完整代码）
从2D地图到3D地球：用Cesium Entities API快速构建三维地理围栏实战指南
当传统二维地图的矩形围栏无法满足无人机航线规划、智慧园区管理的三维空间管控需求时，Cesium的Entities API提供了将平面几何体升维为立体空间对象的完整解决方案。本文将带您从零实现一个带高度检测的禁飞区系统，通过可交互的代码示例掌握三维围栏的核心构建技巧。
1. 三维地理围栏的基础架构设计
地理围栏在三维场景中需要同时处理水平边界与垂直空间约束。以无人机禁飞区为例，我们不仅需要划定平面范围，还需设置高度上限。Cesium Entities通过组合polygon与extrudedHeight属性即可实现这种立体约束：
// 创建高度为500米的三维禁飞区 const noFlyZone = viewer.entities.add({ name: '北京CBD禁飞区', polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ 116.46,39.91, 116.47,39.92, 116.49,39.90, 116.48,39.89 ]), extrudedHeight: 500, // 围栏拉伸高度(米) material: new Cesium.ColorMaterialProperty( Cesium.Color.RED.withAlpha(0.3) ), outline: true, outlineColor: Cesium.Color.RED } });关键参数解析表：
| 参数 | 类型 | 说明 | 典型值 |
|---|---|---|---|
| hierarchy | Cartesian3[] | 围栏顶点坐标集合 | 经纬度数组 |
| extrudedHeight | Number | 从地表拉伸的高度 | 500(米) |
| height | Number | 基准面海拔高度 | 100(米) |
| material | MaterialProperty | 围栏填充样式 | 颜色/贴图 |
提示：使用
extrudedHeight而非height可以创建从地面到指定高度的立体空间，更适合围栏场景
2. 动态围栏的交互增强实现
静态围栏难以适应实时地理围栏需求，通过Cesium的事件系统可以实现围栏的动态更新与状态反馈：
// 动态更新围栏范围 function updateFence(newCoordinates) { noFlyZone.polygon.hierarchy = new Cesium.CallbackProperty(() => { return Cesium.Cartesian3.fromDegreesArray(newCoordinates); }, false); } // 添加围栏鼠标交互 viewer.screenSpaceEventHandler.setInputAction( (movement) => { const picked = viewer.scene.pick(movement.endPosition); if (picked && picked.id === noFlyZone) { noFlyZone.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5); } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE );交互功能矩阵：
| 功能 | 实现方案 | 适用场景 |
|---|---|---|
| 围栏高亮 | ScreenSpaceEventType.MOUSE_MOVE | 可视化反馈 |
| 范围调整 | CallbackProperty动态属性 | 应急区域变更 |
| 状态提示 | Entity.description属性 | 显示管制信息 |
3. 复合围栏的高级构建技巧
复杂业务场景往往需要组合多种几何图形。以下代码演示了包含圆柱形核心区与多边形缓冲区的复合围栏：
// 核心圆柱形区域 const coreZone = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.48, 39.90), cylinder: { length: 800, topRadius: 0, bottomRadius: 300, material: Cesium.Color.RED.withAlpha(0.6) } }); // 外围多边形缓冲区 const bufferZone = viewer.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ 116.45,39.89, 116.45,39.92, 116.50,39.92, 116.50,39.89 ]), extrudedHeight: 300, material: Cesium.Color.ORANGE.withAlpha(0.3) } });性能优化建议：
- 对静态围栏设置
show: false而非移除Entity - 使用
ClassificationType.TERRAIN实现围栏与地形的完美贴合 - 超过100个顶点时考虑使用
GeometryInstance替代Entity
4. 实战：机场净空保护区系统
整合前述技术构建完整的净空保护系统，包含以下组件：
- 跑道核心区- 长方体禁飞区：
const runwayZone = viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees( 116.58,39.78, 116.62,39.80 ), extrudedHeight: 900, material: new Cesium.StripeMaterialProperty({ evenColor: Cesium.Color.RED.withAlpha(0.7), oddColor: Cesium.Color.WHITE.withAlpha(0.7), repeat: 10 }) } });- 起降航道- 带旋转角度的梯形柱体：
const approachPath = viewer.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ 116.55,39.77, 116.57,39.82, 116.65,39.80, 116.63,39.75 ]) ), extrudedHeight: 1200, rotation: Cesium.Math.toRadians(-15), material: Cesium.Color.BLUE.withAlpha(0.4) } });- 动态检测系统：
function checkViolation(position) { const inRunwayZone = Cesium.Rectangle.contains( runwayZone.rectangle.coordinates.getValue(), position ); const inApproachPath = // 多边形碰撞检测逻辑 return inRunwayZone || inApproachPath; }