热图算法?

发布于 2024-08-23 06:40:03 字数 185 浏览 2 评论 0原文

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

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

谢谢。

I have a list of values each with latitude and longitude. I'm looking to create a translucent heatmap image to overlay on Google Maps. I know there are server side and flash based solutions already, but I want to build this in javascript using the canvas tag.

However, I can't seem to find a concise description of the algorithm used to turn coordinates and values into a heatmap. Can anyone provide or link to one?

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

苍景流年 2024-08-30 06:40:03

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

伪代码是:

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

The basic idea would be to create a grid and project every lat,lng coord to that grid. I would use a 2D array of ints.

The psuedo-code would be:

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

So, the idea is that the higher the int value, the hotter that cell is. increment_adjacent_cells should increment the values in all 8 adjacent cells.

树深时见影 2024-08-30 06:40:03

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

http://gist.github .com/346165

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

I have tried to solve this in javascript using the canvas element, here is my current result:

http://gist.github.com/346165

I have to fix the gaussian filter and the color mapping, because it doesn't give good results currently.

站稳脚跟 2024-08-30 06:40:03

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

伪代码:

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

这可以节省大量迭代!

A faster way of building a heatmap could be to use a queue:

Pseudocode:

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

This saves on tons of iterations!

与酒说心事 2024-08-30 06:40:03

如果您正在寻找看起来更像“电视天气地图”的内容,请查看此项目:

https://github .com/optimismme/javascript-temporalMap

Look at this project if you are looking for something that looks more like 'tv weather maps':

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文