zoukankan      html  css  js  c++  java

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

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

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

    最后，感谢以下链接及链接的主人：
  • 相关阅读:
    JavaScript模态对话框类
    事件模块的演变（1）
    html5中可通过document.head获取head元素
    How to search for just a specific file type in Visual Studio code?
    What do 'lazy' and 'greedy' mean in the context of regular expressions?
    正则非获取匹配 Lookahead and Lookbehind ZeroLength Assertions
    regex length 正则长度问题
    Inversion of Control vs Dependency Injection
    How to return View with QueryString in ASP.NET MVC 2?
    今天才发现Google Reader
  • 原文地址：https://www.cnblogs.com/h2zZhou/p/7478497.html
Copyright © 2011-2022 走看看