Cesium与cesium-heatmap实战：高性能三维热力图的生成与优化

1次阅读

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

传统二维热力图在三维 GIS 场景中面临三个核心问题：

深度感知缺失：二维屏幕空间投射无法体现地形高程对热力分布的影响，例如山体对信号强度的遮挡
性能悬崖：当数据点超过 10 万时，Canvas2D 渲染平均帧率从 60FPS 骤降至 12FPS（基于 Chrome 112 基准测试）
动态更新延迟：全量重绘导致数据更新时出现 300-800ms 的界面卡顿（测试数据集：50,000 个移动设备信号点）

技术方案	内存占用(100K 点)	静态渲染 FPS	动态更新延迟
Cesium Entity API	420MB	18	650ms
cesium-heatmap	110MB	58	90ms

测试环境：Intel i7-11800H/RTX 3060/Chrome 112

/**
 * 高斯归一化算法
 * @param {Float32Array} rawData - 原始数据数组
 * @param {number} sigma - 标准差系数(建议 1.5-2.5)
 * @returns {Float32Array} 归一化后的数据
 */
function gaussianNormalize(rawData, sigma = 2.0) {const maxVal = Math.max(...rawData);
  const normalized = new Float32Array(rawData.length);

  // 计算高斯权重
  const gauss = (x, sigma) => Math.exp(-(x ** 2) / (2 * sigma ** 2));

  rawData.forEach((val, i) => {normalized[i] = gauss(val / maxVal, sigma);
  });

  return normalized;
}

// worker.js
self.onmessage = ({data}) => {const {points, bounds, cellSize} = data;
  const densityMap = new Float32Array(Math.ceil((bounds.east - bounds.west) / cellSize) *
    Math.ceil((bounds.north - bounds.south) / cellSize)
  );

  // 核密度估计算法
  points.forEach(point => {const gridX = Math.floor((point.lon - bounds.west) / cellSize);
    const gridY = Math.floor((point.lat - bounds.south) / cellSize);
    const index = gridY * gridCols + gridX;
    densityMap[index] += point.value;
  });

  self.postMessage({densityMap}, [densityMap.buffer]);
};

// heatmap.glsl
float computeDensity(vec2 uv) {float radius = 0.05;  // 热力半径(占纹理坐标比例)
  float falloff = 0.6;  // 衰减系数

  vec2 delta = uv - v_textureCoordinates;
  float dist = length(delta) / radius;

  // 三次多项式平滑衰减
  if (dist > 1.0) return 0.0;
  float w = 1.0 - dist * dist * (3.0 - 2.0 * dist);
  return pow(w, falloff);
}