爽翻了！Cesium手撸一个动态视锥体工具用于开发调试，效率翻倍（附完整源码）

大家好，我是日拱一卒的攻城师不浪，致力于前沿科技探索，摸索小而美工作室，这是2025年输出的第19/100篇文章。

效果预览

前言

视锥体这个功能，在Cesium项目开发过程中是一个高频出现的功能场景。

今天我们来详细解析一下如何构建一个视锥体工具，并附加GUI控制工具，能够更方便直观的改变视锥体的各个参数。

该场景开源，请文末领取开源地址！

什么是视锥体？

视锥体是指相机可见的三维空间区域，呈现为一个底部被截断的金字塔形状。

它由六个平面组成：近平面、远平面，以及上、下、左、右四个侧面。例如在Cesium中，Camera对象的视锥体定义了用户可以看到的所有内容的边界。

视锥体应用场景

主要应用于视域分析：用于确定从特定观察点可以看到哪些区域；

军事：武器系统或雷达覆盖范围分析
通信：信号塔覆盖区域规划
城市规划：景观视线分析和景观保护
安防系统规划：摄像头布局优化
智慧城市：公共区域监控覆盖分析

视锥体实现原理

通过Cesium.PerspectiveFrustum定义视锥体的几何参数（如视野角、近远平面），结合相机的位置和姿态（HeadingPitchRoll），生成对应的几何体。

然后再通过dat.GUI动态调整参数并实时更新视锥体渲染，实现交互式调试。

核心流程：

参数初始化：设置相机位置、姿态、视锥体尺寸
几何生成：根据参数创建视锥体网格和轮廓线
动态更新：通过GUI控件修改参数并触发视锥体重绘

关键代码解析

3.1 视锥体参数定义

javascript 复制代码

const obj = {
  x: 120,       // 经度
  y: 30,        // 纬度
  z: 2000,      // 高度
  fov: 30,      // 视野角度（Field of View）
  near: 10,     // 近平面距离
  far: 3000,    // 远平面距离
  aspectRatio: 1.4 // 宽高比
};

通过dat.GUI绑定这些参数，实现滑动条交互（详细见onMounted中的控件初始化）。

3.2 视锥体几何生成

javascript 复制代码

function addFrustum(position, orientation, fov, near, far, aspectRatio) {
  const frustum = new Cesium.PerspectiveFrustum({
    fov: Cesium.Math.toRadians(fov),
    aspectRatio,
    near,
    far
  });

  const instanceGeo = new Cesium.GeometryInstance({
    geometry: new Cesium.FrustumGeometry({
      frustum,
      origin: position,
      orientation
    }),
    attributes: { color: Cesium.Color.AQUA.withAlpha(0.3) }
  });

  // 添加到Primitive渲染
  viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: [instanceGeo],
    appearance: new Cesium.PerInstanceColorAppearance()
  }));
}

关键点：

PerspectiveFrustum定义视锥体形状
FrustumGeometry将参数转化为几何数据
PerInstanceColorAppearance设置半透明填充效果

3.3 坐标转换与顶点输出

javascript 复制代码

const positions = zb.attributes.position.values;
const result = positions.map(chunk => 
  latlng.formatPositon(new Cesium.Cartesian3(...chunk))
);
console.log("视锥体顶点坐标：", result);

通过latlng.formatPositon将笛卡尔坐标转为经纬度，便于我们调试的时候直观理解视锥体范围。

最后

【源码】：github.com/jiawanlong/...

【不浪的Cesium案例集合 】：github.com/tingyuxuan2...

如果开源对您有帮助，也欢迎帮我们点一个免费的star，以鼓励和支持我们开源更多案例！

如有任何问题或需要进一步探讨，欢迎在评论区留言交流！

想系统学习Cesium的小伙伴儿，可以了解下不浪的教程《Cesium从入门到实战》，将Cesium的知识点进行串联，让不了解Cesium的小伙伴拥有一个完整的学习路线，并最终完成一个智慧城市的完整项目，课程最近也更新了不少新内容，想了解+作者：brown_7778（备注来意）。
有需要进可视化&Webgis交流群可以加我：brown_7778（备注来意）。