先来看两张图:
(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