HeatMap(热图)的原理和实现

先来看两张图:

(1)10年世界杯决赛,冠军西班牙队中门将、后卫、中场及前锋的跑位热图

通过热图,我们可以很清楚的看出四个球员在比赛中跑动位置的差异。

(2)历史地震震源位置的热图

也可以很清楚的看出,哪个地方是地震的高发地区(频率最高)。

HeatMap简介

上面两张就是热图的典型应用,通过热图可以简单地聚合大量数据,并使用一种渐进的色带来优雅地表现,最终效果一般优于离散点的直接显示,可以很直观地展现空间数据的疏密程度或频率高低。但也由于很直观,热图在数据表现的准确性并不能保证。

生成原理

热图已经不是什么新鲜的概念了,很多领域都在使用。例如记录用户在Web页面内鼠标的点击位置,各种空间离散点数据的显示等等。

其生成的原理简单概括为四个步骤:

(1)为离散点设定一个半径,创建一个缓冲区;

(2)对每个离散点的缓冲区,使用渐进的灰度带(完整的灰度带是0~255)从内而外,由浅至深地填充;

(3)由于灰度值可以叠加(值越大颜色越亮,在灰度带中则显得越白。在实际中,可以选择ARGB模型中任一通道作为叠加灰度值),从而对于有缓冲区交叉的区域,可以叠加灰度值,因而缓冲区交叉的越多,灰度值越大,这块区域也就越“热”;

(4)以叠加后的灰度值为索引,从一条有256种颜色的色带中(例如彩虹色)映射颜色,并对图像重新着色,从而实现热点图。

可以通过几张图来展现这个过程:

(1)灰度带和彩虹色带

(2)单热点显示

单热点的显示,至少要确定它的中心灰度值、半径,当然还有xy和色带。中心灰度值默认设为50(太小显示效果不好)。根据半径的大小(一般是25,屏幕坐标),由中心(50)到边界(0)渐进地填充灰度。我使用黑色(任何颜色都可以)的Alpha通道来进行灰度值的累加,填充后中心位置的ARGB值是(50,0,0,0),边界处是(0,0,0,0),这样就能得到上图左边的灰度图了。最后根据灰度值映射色带得到彩虹带中对应位置的颜色。50的灰度值,只能映射到彩虹带的前1/5处,因而上图右边单热点的颜色以蓝色为主,略带青色。

每个单一热点有一个Weight,默认设为1,目前暂时没有用到(ArcGIS Flex的热图实现中,Weight用来在地图缩小时累加多个离散点聚合后中心灰度值的大小。我没去实现地图缩放的功能,但我觉得Weight会有别的用处,现在还没完全考虑好,以后有机会再说)。Weight不是类似通常二维空间数据中的第三维属性数据,热图只能表现离散点空间上的频率,而不能表现其属性在空间上的分布。例如地震震源的热图,并不能表示其震级大小的空间分布,而只能表现地震次数的多少。

(3)多热点叠加显示

叠加显示,点位置及权重是随机给的,半径是指定的。图中有422个点,半径是50。点越密集的的区域,叠加的灰度也就越多,映射后也显得比较“热”。

.Net实现方法

原理其实蛮简单的,但实现起来就要考虑一些比较琐碎的东西(做任何事情都一样的,看似简单,做起来结果处处是坑!)。我是用C#和GDI+实现的,网上也有很多实例代码,常见语言的版本都有,我也从中参考了不少,获益匪浅。

首先设计一个颜色辅助类ColorUtil:

上面是类中的部分代码,主要的三个函数,其中,

(1)GetGrayRamp是获取0~50的单热点的灰度带,该灰度带将用于填充单点的缓冲区;

(2)GetColorInRamp是根据灰度值去色带中映射颜色(表示色带的代码太长了,copy自Esri Flex API的源代码中);

(3)AdjustOpacity调整图片的透明度,使用了颜色矩阵。

另外还有一个是HeatMapMaker类:

其中,

(1)makeGrayMap先生成灰度图,使用了前面生成的灰度带、半径以及渐进画刷;

(2)MakeHeatMap生成热图,在灰度图的基础上,根据灰度去映射色带,并调整透明度,得到最终的热图。

还有一些别的代码,特别是用到了.net 4.5中新的异步功能,可能有所疏漏。话说ms的东西真是简单,有时简单到让人用起来没底气。

我把代码放到了GitHub上(https://github.com/hmfly/HeatMap),欢迎有兴趣的同学fork,或直接戳这里下载。指出错误或继续改进。当然我自己也会继续改进。虽然有点重复造轮子的感觉,而且我自己也并不喜欢造轮子,但我觉得对有兴趣的东西,了解其原理、实现方法,也是蛮有意思的事情。况且哪有这么多创新的东西,真正有创新也是在你充分了解了前人工作的基础上,加上一点点自己的想法,最终体现在一个点上的微创新吧。

下面是测试界面,可以控制点数、半径、透明度及色带:

测试程序也包含在源代码中。

最后,感谢以下链接及链接的主人:

分享到:
  1. Pingback: 3s专业招聘数据可视化研究 - 收容站