问题热图算法？

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

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

谢谢。

12662

2018-02-26 17:57

起源

答案:

基本的想法是创建一个网格并将每个lat，lng coord投影到该网格。我会使用一个二维的int数组。

伪代码将是：

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个相邻单元格中的值。

2018-02-26 18:12

这是基本的想法;但是，不是做多次传递来“散布”热量，最好有一个类似圆形高斯蒙版的东西，你可以在每个数据点添加到网格中。此外，这个问题可能有用的答案： stackoverflow.com/questions/1117048/... - tzaman

答案:

基本的想法是创建一个网格并将每个lat，lng coord投影到该网格。我会使用一个二维的int数组。

伪代码将是：

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个相邻单元格中的值。

2018-02-26 18:12

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

http://gist.github.com/346165

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

2018-03-27 15:46

这是一件有趣的事情。我计划用DOM对象绘制热图（显然没有模糊）但是你的解决方案可以在外观和感觉方面提供一些类似服务器的结果。你的颜色问题是由 maximum 变量。 - naugtur

这看起来不错 - 快速且可重复使用： quasimondo.com/StackBlurForCanvas/StackBlurDemo.html - naugtur

我把你的代码保存为这里有一个jsFiddle 供大家试试。这是一种有趣的方法，但似乎没有产生明智的结果。我错过了什么？自从您编写此代码以来，浏览器可能已更改。 - Drew Noakes

如果您正在寻找更像“电视天气图”的内容，请查看此项目：

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

2017-07-09 08:56

请从链接中添加一些内容。 - Robert

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

伪代码：

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

这节省了大量的迭代！

2017-09-21 17:47

问题 热图算法？

答案:

答案:

热门问题

问题热图算法？