algorithm - 热图算法？

Question

我有一个值列表，每个值都有纬度和经度。我正在寻找一个半透明的热图图像以覆盖在谷歌地图上。我知道已经有服务器端和基于闪存的解决方案，但我想使用 canvas 标签在 javascript 中构建它。

但是，我似乎找不到用于将坐标和值转换为热图的算法的简明描述。任何人都可以提供或链接到一个吗？

谢谢。

Answer 1

基本思想是创建一个网格并将每个 lat,lng 坐标投影到该网格。我会使用整数的二维数组。

伪代码将是：

for each coord
  cell = coord projected to grid
  increment cell value
end

for 0 to # of passes
  for each row
   for each col
     if grid[row,col] > 0 then
       grid[row,col] += 1
       increment_adjacent_cells(row, col)
     end
   end
  end
end

所以，这个想法是 int 值越高，单元格越热。increment_adjacent_cells 应该增加所有 8 个相邻单元格中的值。

Answer 2

我尝试使用 canvas 元素在 javascript 中解决这个问题，这是我当前的结果：

http://gist.github.com/346165

我必须修复高斯过滤器和颜色映射，因为它目前没有给出好的结果。

Answer 3

构建热图的更快方法是使用队列：

伪代码：

Add an element to queue (first in heatmap(x,y, val))
While (!queue.isEmpty())
{
    elem = queue.pop()
    queue.push(elem.x + 1, elem.y, val-1)
    queue.push(elem.x - 1, elem.y, val-1)
    queue.push(elem.x, elem.y + 1, val-1)
    queue.push(elem.x, elem.y - 1, val-1)
}

这节省了大量的迭代！

Answer 4

如果您正在寻找看起来更像“电视天气图”的东西，请查看这个项目：

https://github.com/optimisme/javascript-temperatureMap