当前位置：首页 > news >正文

Cesium测量功能实战：从零封装距离、面积与高度测量工具

news 2026/5/12 1:23:51

1. 为什么需要封装Cesium测量工具

第一次用Cesium做项目时，我天真地以为这个强大的三维地球库会自带测量功能。结果在项目评审会上演示时，甲方突然问"能测下这两个建筑物的距离吗？"，我当场卡壳——原来Cesium的API只提供了基础的空间计算能力，并没有开箱即用的测量工具。这个尴尬经历让我意识到，封装可复用的测量模块是三维GIS开发的必备技能。

Cesium原生API的局限性主要体现在三个方面：首先，距离测量需要手动处理鼠标事件和坐标转换，没有封装好的链式调用方法；其次，面积计算完全依赖第三方库（比如Turf.js），因为Cesium本身没有平面面积算法；最后，高度测量要考虑地形起伏，需要特殊处理采样精度问题。实测发现，直接调用原生API开发测量功能，代码量会增加30%以上，而且难以保证交互一致性。

封装测量工具的核心价值在于统一交互体验。比如在地图上画线测距时，需要实时显示分段距离和总距离；测量面积时要动态显示多边形和计算结果；高度测量则需要可视化水平参考面。这些效果如果每个项目都从头实现，不仅效率低下，还容易出现鼠标事件冲突、内存泄漏等问题。我去年接手的一个老项目就遇到过这种情况：三个不同开发者写的测量工具竟然互相干扰右键菜单。

2. 测量工具架构设计

2.1 基础类结构

经过多个项目的迭代，我总结出测量工具的黄金法则：事件管理、可视化渲染、计算逻辑三者必须分离。下面这个类图是经过实战检验的设计方案：

class Diagram { +viewer: Cesium.Viewer +handler: ScreenSpaceEventHandler +positions: Cartesian3[] +entities: EntityCollection +activate(): void +deactivate(): void +clear(): void } class MeasureDistance { +tempPositions: Cartesian3[] +createLineEntity(): void +createVertex(): void } class MeasureHeight { +circleEntity: Entity +createCircleEntity(): void } class MeasureArea { +createPolygonEntity(): void }

关键点在于基类处理通用逻辑（事件注册/销毁、坐标采集），子类专注特定功能。比如MeasureDistance要处理折线动态绘制，MeasureHeight需要圆形参考面，MeasureArea则关注多边形填充。这种设计让代码复用率提升60%以上，我在最近的地产项目中，仅用2小时就接入了全套测量功能。

2.2 事件管理机制

测量工具最复杂的是事件处理，必须处理好这几个问题：

左键单击添加测量点
鼠标移动实时更新预览图形
右键结束测量
ESC键取消当前操作

这里分享一个容易踩坑的点：必须用单例模式管理事件。早期版本我曾为每个测量工具单独创建handler，结果导致鼠标事件叠加触发。现在统一使用viewer.scene.canvas作为事件目标：

registerEvents() { this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); this.setLeftClickAction(); this.setRightClickAction(); this.setMouseMoveAction(); // 监听ESC键 document.addEventListener('keydown', (e) => { if (e.key === 'Escape') this.clear(); }); }

3. 距离测量实现细节

3.1 坐标采集与转换

在三维场景中获取准确坐标需要特别注意：

优先使用scene.pickPosition获取地形表面坐标
水面或空白处回退到camera.pickEllipsoid
考虑地形夸张系数的影响

实测发现，直接使用pickPosition在倾斜摄影模型上会出现漂移。我的解决方案是混合采样：

function getPosition(viewer, position) { let cartesian = viewer.scene.pickPosition(position); if (!cartesian || allZero(cartesian)) { cartesian = viewer.camera.pickEllipsoid(position, viewer.scene.globe.ellipsoid); } return cartesian; } function allZero(cartesian) { return Math.abs(cartesian.x) < 0.1 && Math.abs(cartesian.y) < 0.1 && Math.abs(cartesian.z) < 0.1; }

3.2 动态折线绘制

实时显示测量路径需要用到CallbackProperty，这是Cesium的动态属性机制。这里有个性能优化技巧：在鼠标移动时更新临时坐标数组，而不是重建整个实体：

createLineEntity() { this.lineEntity = this.viewer.entities.add({ polyline: { positions: new Cesium.CallbackProperty(() => { return this.tempPositions; // 动态返回最新坐标 }, false), width: 3, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.CYAN }) } }); }

3.3 分段距离标注

好的用户体验应该显示每个线段的长度。我采用的方法是给每个顶点添加Label：

createVertex(position) { const label = this.viewer.entities.add({ position: position, label: { text: `${this.getSegmentDistance()}米`, font: '14px sans-serif', fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, style: Cesium.LabelStyle.FILL_AND_OUTLINE, pixelOffset: new Cesium.Cartesian2(0, -20) } }); this.vertexEntities.push(label); }

4. 面积测量特殊处理

4.1 Turf.js集成方案

Cesium只能计算曲面面积，而实际项目往往需要平面面积。经过对比测试，turf.area计算结果的误差在0.5%以内，完全满足业务需求。集成时要注意坐标转换：

function computeArea(positions) { const points = positions.map(p => { const cartographic = Cesium.Cartographic.fromCartesian(p); return [Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)]; }); const polygon = turf.polygon([[...points, points[0]]]); return (turf.area(polygon) / 1000000).toFixed(2); // 返回平方公里 }

4.2 多边形填充优化

当测量区域跨越国际日期变更线时，直接绘制多边形会出现撕裂现象。解决方案是使用Cesium.PolygonHierarchy自动处理坐标缠绕：

createPolygon() { this.entity = this.viewer.entities.add({ polygon: { hierarchy: new Cesium.CallbackProperty(() => { return new Cesium.PolygonHierarchy(this.positions); }, false), material: Cesium.Color.RED.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.WHITE } }); }

5. 高度测量技巧

5.1 地形采样策略

准确测量高度必须考虑地形数据加载状态。我的经验是：

优先使用sampleTerrainMostDetailed获取精确高程
添加加载完成前使用terrainProvider.getHeight
最后回退到椭球体高度

async getTerrainHeight(position) { try { const terrain = await Cesium.sampleTerrainMostDetailed( this.viewer.terrainProvider, [Cesium.Cartographic.fromCartesian(position)] ); return terrain[0].height; } catch (e) { console.warn('地形采样失败', e); return this.viewer.terrainProvider.getHeight( position.longitude, position.latitude ); } }

5.2 可视化参考面

高度测量最直观的方式是显示水平参考圆。这里有个细节：圆的半径应该随视角动态调整：

updateCircleRadius() { const cameraHeight = this.viewer.camera.positionCartographic.height; this.radius = cameraHeight * 0.05; // 相机高度的5% this.circleEntity.ellipse.semiMajorAxis = this.radius; this.circleEntity.ellipse.semiMinorAxis = this.radius; }

6. 性能优化实践

6.1 内存管理

测量工具最容易出现内存泄漏。必须注意：

清除时销毁所有Entity和EventHandler
使用统一的destroy方法
避免在CallbackProperty中闭包引用

destroy() { this.viewer.entities.remove(this.lineEntity); this.handler.destroy(); document.removeEventListener('keydown', this.keyHandler); }

6.2 渲染性能

当测量点数超过500时，会出现明显卡顿。优化方案：

使用Primitive替代Entity
合并顶点数据
启用WebWorker计算

createHighPerformanceLine() { const instance = new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGeometry({ positions: this.positions, width: 3 }) }); this.viewer.scene.primitives.add( new Cesium.Primitive({ geometryInstances: instance, appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType('Color') }) }) ); }

7. 实际项目中的应用

在智慧城市项目中，我们扩展了基础测量工具：

添加保存/加载测量结果功能
支持多单位切换（米/公里/亩/公顷）
集成到右键上下文菜单
添加截图导出能力

这些扩展只需要继承基础类即可实现。比如单位切换功能：

class AdvancedMeasureDistance extends MeasureDistance { constructor(viewer, options) { super(viewer); this.units = options.units || ['米', '公里']; } formatDistance(meters) { if (this.currentUnit === '公里') return `${(meters / 1000).toFixed(2)}公里`; return `${meters.toFixed(2)}米`; } }

查看全文

http://www.jsqmd.com/news/799254/