Cesium三维热力图实战：从数据准备到cesium-heatmap高效渲染

共计 1885 个字符，预计需要花费 5 分钟才能阅读完成。

为什么需要三维热力图？

在疫情监测中，我们常看到二维平面上的病例分布热力图。但当数据需要叠加地形或建筑物时（比如山区疫情分析），传统热力图像素点会因透视变形产生偏差。某市交通管理局曾反馈：他们的二维流量热力图在立交桥区域出现数据重叠，无法真实反映不同层级的车流密度。

这正是 cesium-heatmap 的价值所在——它通过 WebGL 将热力数据直接映射到三维空间坐标系，解决 Z 轴信息丢失问题。去年某地震救援中，救援队使用我们开发的三维热力图，成功在倾斜的废墟模型上标出了生命探测仪的热力峰值点。

技术选型对比

传统方案 heatmap.js 的三大局限：

1. 基于 Canvas 2D 渲染，无法与 Cesium 的 WebGL 上下文融合
2. 数据更新需要全量重绘，万级点位时帧率骤降至 10FPS 以下
3. 缺乏地理坐标转换能力，需要开发者手动处理 WGS84 墨卡托投影

cesium-heatmap 的核心优化：

• 着色器 (Shader) 层面改造：
• 顶点着色器 (Vertex Shader) 直接读取 Cesium 的 ENU（东北天）坐标系
• 片元着色器 (Fragment Shader) 采用高斯核卷积采样，避免 CPU 端计算
• 动态 LOD 系统：根据相机距离自动切换热力点聚合粒度

完整实现代码

数据预处理

interface HeatData {
  lon: number;
  lat: number;
  value: number;
}

// 归一化处理（Min-Max Scaling）function normalizeData(points: HeatData[]): Float32Array {const values = points.map(p => p.value);
  const min = Math.min(...values);
  const max = Math.max(...values);

  return new Float32Array(points.map(p => (p.value - min) / (max - min))
  );
}

与 Cesium 集成

const viewer = new Cesium.Viewer('cesiumContainer');
const heatmap = new CesiumHeatmap(viewer.scene, {points: new Float32Array([/* x,y,z,value */]),
  radius: 50, // 屏幕像素半径
  gradient: {
    '0.1': 'blue',
    '0.5': 'yellow',
    '1.0': 'red'
  }
});

// 动态更新
heatmap.update(new Float32Array(/* 新数据 */));

性能优化实战

数据量级测试（GTX1660 显卡）

WebWorker 离屏渲染

// 主线程
const worker = new Worker('heatmap-worker.js');
worker.postMessage({points: rawData});
worker.onmessage = (e) => {heatmap.update(e.data.buffer);
};

// Worker 线程（伪代码）importScripts('cesium-heatmap-worker.js');
onmessage = ({data}) => {const buffer = normalizeAndProject(data.points);
  postMessage({buffer}, [buffer]);
};

内存泄漏检测

在 Chrome DevTools 的 Memory 面板：
1. 拍摄堆快照(Heap Snapshot)
2. 筛选 CesiumHeatmap 实例
3. 检查 dispose()调用后是否仍有引用

避坑指南

1. 坐标系陷阱：
2. 错误：直接将 EPSG:4326 经纬度当作平面坐标使用

3. 正确：调用 Cesium.Cartesian3.fromDegrees 转换

4. 色带设计：

5. 避免使用纯红色系，在地形上会与默认高程色冲突

6. 推荐 HSL 色彩空间插值

7. 相机移动优化：

   viewer.scene.preRender.addEventListener(() => {if(viewer.camera.changed) {heatmap.setOptions({ lodLevel: calculateLOD() });
     }
   });

开放性问题

当前方案在千万级数据时仍有压力，是否可以通过：
– 将高斯卷积计算移植到 WebAssembly？
– 使用 SIMD 指令并行处理归一化运算？
– 基于 R -Tree 实现动态空间索引？

期待与各位开发者探讨更优解。