Cesium 1.107 立体雷达扫描：Entity API 与 CallbackProperty 实现 90° 扇形旋转
在三维地理可视化领域，雷达扫描效果是一种常见且极具视觉冲击力的动态展示方式。本文将基于 Cesium 1.107 版本，深入探讨如何利用 Entity API 和 CallbackProperty 动态属性机制，实现一个精确绕球心旋转的 90° 立体扇形雷达扫描效果。
1. 技术选型与核心概念
1.1 Entity API 的优势
Cesium 的 Entity API 提供了一种面向对象的方式来管理场景中的可视化实体。相比 Primitive API，Entity 更适合处理需要频繁交互和动态更新的对象：
// 典型 Entity 创建示例 viewer.entities.add({ name: '雷达扫描', position: Cesium.Cartesian3.fromDegrees(113.92, 22.52), ellipsoid: { radii: new Cesium.Cartesian3(1000, 1000, 1000), material: Cesium.Color.YELLOW.withAlpha(0.3) } });关键特性对比表：
| 特性 | Entity API | Primitive API |
|---|---|---|
| 抽象层级 | 高层 | 底层 |
| 动态更新性能 | 中等 | 高 |
| 交互支持 | 完善 | 需手动实现 |
| 内存消耗 | 较高 | 较低 |
| 适合场景 | 动态可视化 | 静态大规模数据 |
1.2 CallbackProperty 机制
CallbackProperty 是实现动态效果的核心，它允许我们在每一帧渲染时动态计算属性值：
const dynamicPositions = new Cesium.CallbackProperty(() => { // 实时计算位置数据 return computeCurrentPositions(); }, false);注意：第二个参数
isConstant设为 false 表示该属性会随时间变化，需要持续计算
2. 立体雷达扫描实现方案
2.1 整体架构设计
我们采用面向对象的方式封装雷达扫描功能，主要包含以下组件：
- 椭球体基底：作为雷达的显示基础
- 扇形墙体：90° 扫描区域的可视化
- 动画控制器：处理旋转逻辑和性能优化
class RadarSolidScan { constructor(options) { this.viewer = options.viewer; this.position = options.position; // [经度, 纬度] this.radius = options.radius || 1000; this.speed = options.speed || 1.0; // 度/帧 this.color = options.color || Cesium.Color.YELLOW; this.heading = 0; this.initEntities(); } initEntities() { // 初始化实体 } }2.2 数学变换核心
实现绕球心旋转的关键在于Transforms.eastNorthUpToFixedFrame变换矩阵：
const computeSectorEdge = (center, radius, angle) => { const matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center); const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); const translation = Cesium.Cartesian3.fromElements(x, y, 0); return Cesium.Matrix4.multiplyByPoint(matrix, translation, new Cesium.Cartesian3()); };坐标系转换流程：
- 建立以球心为原点的本地东-北-上坐标系
- 在本地坐标系中计算扇形边缘点
- 将本地坐标转换回世界坐标系
3. 完整实现与优化
3.1 雷达扫描类实现
class RadarSolidScan { constructor(options) { // 初始化参数 this.viewer = options.viewer; this.center = Cesium.Cartesian3.fromDegrees(...options.position); this.radius = options.radius || 1000; this.speed = options.speed || 1.0; this.color = options.color || Cesium.Color.YELLOW.withAlpha(0.3); // 状态变量 this.heading = 0; this.positionCache = []; // 创建实体 this.createEllipsoid(); this.createSectorWall(); this.setupAnimation(); } createEllipsoid() { this.ellipsoidEntity = this.viewer.entities.add({ position: this.center, ellipsoid: { radii: new Cesium.Cartesian3(this.radius, this.radius, this.radius), material: this.color, outline: true, outlineColor: this.color.withAlpha(1.0) } }); } createSectorWall() { this.wallEntity = this.viewer.entities.add({ wall: { positions: new Cesium.CallbackProperty(() => this.positionCache, false), material: this.color } }); } setupAnimation() { this.tickHandler = this.viewer.clock.onTick.addEventListener(() => { this.heading = (this.heading + this.speed) % 360; this.updateSectorPositions(); }); } updateSectorPositions() { const rad = Cesium.Math.toRadians(this.heading); const edgePoint = computeSectorEdge(this.center, this.radius, rad); // 计算90度扇形的位置数组 this.positionCache = this.calculateSectorPositions( Cesium.Cartographic.fromCartesian(this.center), Cesium.Cartographic.fromCartesian(edgePoint), 0, 90 ); } destroy() { this.viewer.entities.remove(this.ellipsoidEntity); this.viewer.entities.remove(this.wallEntity); this.viewer.clock.onTick.removeEventListener(this.tickHandler); } }3.2 性能优化策略
- 节流渲染：对于不需要高精度的情况，可以降低更新频率
let frameCount = 0; this.tickHandler = this.viewer.clock.onTick.addEventListener(() => { frameCount++; if (frameCount % 2 === 0) { // 每2帧更新一次 this.updateSectorPositions(); } });- 内存复用：重用数组对象减少GC压力
this.positionCache = new Array(93); // 预分配数组空间 // 更新时直接修改数组元素而非创建新数组- 距离裁剪：超出可视范围时暂停计算
this.viewer.scene.postRender.addEventListener(() => { const cameraPosition = this.viewer.camera.position; const distance = Cesium.Cartesian3.distance(cameraPosition, this.center); this.wallEntity.show = distance < 5000; // 5公里内才显示 });4. 高级应用与扩展
4.1 多雷达协同扫描
通过创建多个 RadarSolidScan 实例并设置不同的相位差，可以实现更复杂的扫描模式：
const radars = []; for (let i = 0; i < 4; i++) { radars.push(new RadarSolidScan({ viewer: viewer, position: [113.92, 22.52], radius: 1000, speed: 1.0, color: Cesium.Color.fromRandom({alpha: 0.3}), initialHeading: i * 90 // 设置初始角度偏移 })); }4.2 动态属性进阶应用
结合其他动态属性实现更丰富的效果：
// 动态透明度 wallEntity.wall.material = new Cesium.ColorMaterialProperty( new Cesium.CallbackProperty(() => { return this.color.withAlpha(0.2 + Math.sin(Date.now()/1000) * 0.1); }, false) ); // 动态半径 ellipsoidEntity.ellipsoid.radii = new Cesium.CallbackProperty(() => { return new Cesium.Cartesian3( this.radius * (1 + Math.sin(Date.now()/500) * 0.05), this.radius * (1 + Math.sin(Date.now()/500) * 0.05), this.radius ); }, false);在实际项目中，这种动态雷达扫描效果可以广泛应用于安防监控、气象雷达、航空管制等三维可视化场景。通过调整参数和扩展功能，开发者可以创建出满足各种专业需求的定制化扫描效果。
