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，或直接戳这里下载。指出错误或继续改进。当然我自己也会继续改进。虽然有点重复造轮子的感觉，而且我自己也并不喜欢造轮子，但我觉得对有兴趣的东西，了解其原理、实现方法，也是蛮有意思的事情。况且哪有这么多创新的东西，真正有创新也是在你充分了解了前人工作的基础上，加上一点点自己的想法，最终体现在一个点上的微创新吧。

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

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

最后，感谢以下链接及链接的主人：

• C#–GDI+的LinearGradientBrush类 – 孤独的猫 – 博客园
• http://www.cnblogs.com/djcsch2001/archive/2011/05/11/2043650.html
• ArcGIS – ArcGIS Viewer for Flex HeatMapWidget
• http://www.arcgis.com/home/item.html?id=43daf0ffb1d34e31ad752da1340aeb40
• gheat – heatmaps for Google Maps – Google Project Hosting
• http://code.google.com/p/gheat/
• Netherlands-Spain – The matches of the 2014 FIFA World Cup Brazil™ – FIFA.com
• http://www.fifa.com/Live/Competitions/worldcup/matchday=25/day=1/match=300061509/index.html
• IDV User Experience: Heatmap Themes in Visual Fusion
• http://uxblog.idvsolutions.com/2010/12/heatmap-themes-in-visual-fusion.html
• Heat map – Wikipedia, the free encyclopedia
• http://en.wikipedia.org/wiki/Heat_map
• 浅谈Heatmap | 火丁笔记
• http://huoding.com/2011/01/04/39
• How to make heat maps in Flex
• http://michaelvandaniker.com/blog/2008/07/06/how-to-make-heat-maps-in-flex/
• Creating Heat Maps with .NET 2.0 (C#)
• http://dylanvester.com/post/Creating-Heat-Maps-with-NET-20-(C-Sharp).aspx
• 热点图简介 Heat Map Hotspot Map_青梅猪马_百度空间
• http://hi.baidu.com/liongg/item/02ac97e06f21cdf12a09a49e
• C#热图生成（一）——with .NET 2.0 – Gildor Wang – 博客园
• http://www.cnblogs.com/Gildor/archive/2010/05/13/1734649.html
• HeatmapTool.com | Demo
• http://www.heatmaptool.com/demo.php
• ArcGIS Viewer for Flex
• http://serverapps101.esri.com/webapis/flex-viewer/flexviewer30/index.html?config=heatmap-config.xml
• ArcGIS API for Silverlight – Interactive Samples – HeatMapLayerSimple
• http://resources.arcgis.com/en/help/silverlight-api/samples/start.htm#HeatMapLayerSimple