Cesium 1.107 立体雷达扫描：Entity API 与 CallbackProperty 实现 90° 扇形旋转

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) } });

关键特性对比表：

1.2 CallbackProperty 机制

CallbackProperty 是实现动态效果的核心，它允许我们在每一帧渲染时动态计算属性值：

const dynamicPositions = new Cesium.CallbackProperty(() => { // 实时计算位置数据 return computeCurrentPositions(); }, false);

注意：第二个参数isConstant设为 false 表示该属性会随时间变化，需要持续计算

2. 立体雷达扫描实现方案

2.1 整体架构设计

我们采用面向对象的方式封装雷达扫描功能，主要包含以下组件：

1. 椭球体基底：作为雷达的显示基础
2. 扇形墙体：90° 扫描区域的可视化
3. 动画控制器：处理旋转逻辑和性能优化

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()); };

坐标系转换流程：

1. 建立以球心为原点的本地东-北-上坐标系
2. 在本地坐标系中计算扇形边缘点
3. 将本地坐标转换回世界坐标系

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 性能优化策略

1. 节流渲染：对于不需要高精度的情况，可以降低更新频率

let frameCount = 0; this.tickHandler = this.viewer.clock.onTick.addEventListener(() => { frameCount++; if (frameCount % 2 === 0) { // 每2帧更新一次 this.updateSectorPositions(); } });

2. 内存复用：重用数组对象减少GC压力

this.positionCache = new Array(93); // 预分配数组空间 // 更新时直接修改数组元素而非创建新数组

3. 距离裁剪：超出可视范围时暂停计算

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);

在实际项目中，这种动态雷达扫描效果可以广泛应用于安防监控、气象雷达、航空管制等三维可视化场景。通过调整参数和扩展功能，开发者可以创建出满足各种专业需求的定制化扫描效果。