当我们需要用更直观有效的形式来展现各类大数据信息时，热力图无疑是一种很好的方式。作为一种密度图，热力图 一般使用具备显著颜色差异的方式来呈现数据效果， 热力图中亮色一般代表事件发生频率较高或事物分布密度较大，暗色 则 反之。 值得一提的是， 热力图最终效果常常优于离散点的直接显示，可以在二维平面或者地图上直观地展现空间数据的疏密程度或频率高低。

那么制作一张完整的热力图，需要前端做哪些工作呢？接下来，我将基于自己在工作过程中的实践，为大家详细解析热力图在前端的实现过程。

首先给大家看一张完整的热力图实现效果图：

 

关于热力图的实现原理：

一般 可 大致归纳为以下几个步骤：

1.为每个数据点设置 一个 从中心向外灰度渐变的圆；

2.利用灰度可以叠加的原理，计算每个像素点数据交叉叠加得到的灰度值；

3.根据每个像素计算得到的灰度值，在一条彩色色带中进行颜色映射，最后对图像进行着色，得到热力图。

当热力图基于前端技术的具体实现时，又可分为以下四个步骤，接下来为大家详细解析：

1. 准备 热力图数据格式

由于热力图使用场景一般为地图， 所以， 数据源需要提供经纬度作为位置信息，以及 count作为数据点的权重值。 具体 数据格式示例如下：

 

2. 在地图上填充数据

基于 canvas绘制热力图 时 ，热力图 中 每个数据点的半径大小会直接影响到热力图 的 展现效果， 所以 一般要结合使用地图的缩放级别以及数据精度来进行设置，本 文 示例默认设为 15 px。

 

通过 上述步骤画出的点的样式如下图 所示 ，是一个由内向外放射渐变的灰色圆：

 

所有点叠加在地图上的效果如下图所示：

 

3.叠加显示，权重（密度）算法

上面的绘制结果 中 ， 因为 没有使用到权重值， 所以 每个数据点圆 的 中心点灰度值都是 1，不能直接用于颜色映射 ，需要 根据离散点缓冲区的叠加来确定热力分布密度。每一个热点都有一个位置和权重，权重越大，则该点越显著，也就代表其渐变的一个衰变因素 ，此时， 我们需要根据不同的 count设置出不同的alpha值。本文 主要 根据 count最小值对应alpha0，最大值对应1的映射计算方式，求得每个数据点 ，从而 绘制 出 alpha：

 

结合上一步骤，在 canvas中完整 的 绘制 方法 如下：

 

 

具体 绘制 出的 效果如下 图 所示，从实例图的对比 中 可以看出 ， 一个好的权重映射方法对热力图的显示效果 起到非常 重要 的 作用。

 

4.颜色映射

根据 画布上每个像素点累计得到的灰度值， 可以 从彩色映射色带中得到对应位置的颜色。

那么 如何得到画布上每个像素点 的 信息 呢 ？可以使用 canvas提供的getImageData()方法，返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。 需要注意的是， ImageData对象中的每个像素，都包含RGBA四项信息：

 

 

根据 canvas提供的putImageData()方法， 可以 将像素级的数据放回到画布中。

在热力图绘制过程中，利用这两个方法，可以从上一步骤绘制得到的热力图中 获得 每个像素点叠加得到的 alpha通道的灰度值(0~255)，再建立一条长度为256px 的 彩色色带，从中映射得到该像素点对应 的 颜色 RGB值。

建立一条长度为 256px彩虹条的过程如下 图 所示：

 

自定义颜色得到的彩色条 示例 ：

 

从彩虹条中映射颜色的过程如下所示：

 

经过以上步骤 ，我们 可以得到的热力图效果如下：

 

最后， 为大家 提供 一个 热力图的性能优化方法，由于热力图一次性加载 的 点 过多 ， 所以容易 出现卡顿问题 ，而 前端在渲染热力图时，可以进行热力图的点聚合优化。 关于 点聚合 优化 的 实施方法： 将视窗划分成为网格进行 操作 ， 由此 判断热力图数据点在网格中所处的位置，如果同时几个点处于一个网格，则合并这几个点，以此降低渲染成本。

可以这样 判断每个点在网格中 的 分布位置：

 

 

网格划分以及点聚合方法如下：

 

通过上述分享后，关于热力图的前端实践过程，想必大家已有所了解！

关于热力图的应用：

前端完成一个完整的热力图后，可应用于多项业务当中。拿 个推热力图来说，能够帮助景区做人流分布状况检测，通过不同颜色区块的叠加，展示景区不同区域的人口密度，协助景区做好智能管理。此外，个推热力图还能为灾害救援提供支持，有效指导人群疏散，为 政府部门的灾后救援工作提供重大帮助。