算法热图？

Question

我有纬度和经度各自的值的列表。我希望创建一个半透明的热图图像重叠在谷歌地图。我知道有服务器端和已经基于Flash的解决方案，但我想用canvas标签在JavaScript中建立这个。

然而，我似乎无法找到用于转动坐标和值到热图的算法的一个简要说明。任何人都可以提供或连结一个？

感谢。

Answer 1

在基本的想法是创建一个网格和项目的每个纬度，经度坐标到电网。我会使用整数的2D阵列。

在伪代码将是：

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

我曾尝试使用画布元件来解决这个在JavaScript，这是我的当前结果：

http://gist.github.com/346165

我必须修复高斯滤波器和颜色映射，因为它不给出良好的结果目前

Answer 3

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

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

Answer 4

构建热图的更快的方法可以是使用一个队列：

伪代码：

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

这节省了吨迭代！