热力图（HeatMap）实现

热力图是数据可视化项目中，比较常用的显示方式。通过颜色变化程度，他可以直观反应出热点分布，区域聚集等数据信息。

屏幕快照 2017-02-10 下午3.45.52.png

项目概述
我们的项目任务是统计场馆中参观者的实时区域分布情况，通过热力图显示出来。我们考虑采用WPF作为数据显示部分。
实现原理
热力图实现过程就是通过简单的数学变化，将离散的点信息映射到最终图像上的过程。
实现过程如下：
为离散点信息创建一个Mask。Mask是一个圆形区域，半径为该点可以对最终热力图像产生影响的区域半径。中心点的权重为1，越向边缘辐射，权重越低，边缘部分的权重为0。Mask的渐变过程可以考虑多种形式，如线性变化，二次曲线等。
将所有离散点Mask进行叠加，产生一幅灰度图像。相邻Mask的重叠部分进行权重累加操作，最终灰度图中每个像素点的数值大小就是所有和其有关的Mask中的权重之和。 离散点密度越高的地方，灰度图种像素点数值越高，即图像越亮。
根据具体项目不同，可考虑将权重乘上一个固定系数。
将生成的灰度图映射到彩色图像上。
映射对于关系

灰度图	彩色图
0%	（0，0，0）（Black）
25%	（0，0，255）（Blue）
50%	（0，255，0）（Green）
75%	（255，255，0）（Yellow）
100%	（255，0， 0）（Red）

将灰度图百分百映射到彩色图的Alpha通道上，可以增加色彩的透明感觉。
pixels[i, j, 3] = (byte)(gray[i, j]*255);

参考代码（C# .net）

         void getGrayMap()
        {

            for (int i = 0; i < height; i++)
                for (int j = 0; j < width; j++)
                {
                    gray[i, j] = 0.0f;

                }

            foreach (Point p in  pointList)
            {
                int _X = (int)p.X;
                int _Y = (int)p.Y;
                int _startX = (_X >= radius) ? 0 : radius - _X;
                int _endX = (_X < width - radius) ? radius * 2 + 1 : radius + width - _X - 1;
                int _startY = (_Y >= radius) ? 0 : radius - _Y;
                int _endY = (_Y < height - radius) ? radius * 2 + 1 : radius + height - _Y - 1;

                for (int i = _startX; i < _endX; i++)
                    for (int j = _startY; j < _endY; j++)
                    {
                       gray[_Y - radius + j, _X - radius + i] += mask[j, i];
                    }
                }
        }

  void getColorMap()
        {
            Color c1; //= new Color();
            Color c2;// = new Color();
           
            float procent = 0.0f ;
        
             for (int i=0; i= 1.0f)
                    {
                        gray[i, j] = 1.0f;
                        c1 = colorMap[2];
                        c2 = colorMap[3];
                        procent = 1.0f;
                    }
                    else if (gray[i, j] >= 0.75f)
                    {
                        c1 = colorMap[2];
                        c2 = colorMap[3];
                        procent = (gray[i, j] - 0.75f) / 0.25f;
                    }
                    else if (gray[i, j] >= 0.5f)
                    {
                        c1 = colorMap[1];
                        c2 = colorMap[2];
                        procent = (gray[i, j] - 0.5f) / 0.25f;
                    }
                    else if (gray[i, j] >= 0.25f)
                    {
                        c1 = colorMap[0];
                        c2 = colorMap[1];
                        procent = (gray[i, j] - 0.25f) / 0.25f;
                    }
                    else
                    {
                        c2 = colorMap[0];
                        c1 = colorMap[4];
                        procent = (gray[i, j]) / 0.25f;
                    }

                    pixels[i, j, 0] = (byte)(c2.B * procent + c1.B * (1.0f - procent));
                    pixels[i, j, 1] = (byte)(c2.G * procent + c1.G * (1.0f - procent));
                    pixels[i, j, 2] = (byte)(c2.R * procent + c1.R * (1.0f - procent));
                    pixels[i, j, 3] = (byte)(gray[i, j]*255);

                }
        }

显示效果

屏幕快照 2017-02-10 下午3.43.54.png

参考资料
http://hmfly.info/2012/09/11/heatmap%EF%BC%88%E7%83%AD%E5%9B%BE%EF%BC%89%E7%9A%84%E5%8E%9F%E7%90%86%E5%92%8C%E5%AE%9E%E7%8E%B0/
http://www.cnblogs.com/Gildor/archive/2010/05/13/1734649.html