热图算法?
我有一个值列表,每个值都有纬度和经度。我正在寻找创建一个半透明的热图图像以叠加在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
基本思想是创建一个网格并将每个经纬度坐标投影到该网格。我会使用二维整数数组。
伪代码是:
所以,这个想法是 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:
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.
我尝试使用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.
构建热图的更快方法可能是使用队列:
伪代码:
这可以节省大量迭代!
A faster way of building a heatmap could be to use a queue:
Pseudocode:
This saves on tons of iterations!
如果您正在寻找看起来更像“电视天气地图”的内容,请查看此项目:
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