腾讯人口密度热力图_可视化 | 腾讯前端工程师手把手教你实现热力图

热力图

我们知道热力图以特殊高亮的形式来显示访客热衷的页面区域和访客所在的地理区域。

通过热力图，我们可以直观清楚地看到页面上每一个区域的访客兴趣焦点，无须报告数据分析，图形化展现，无需任何页面分析经验。

下图是腾讯位置服务提供的一些热力图呈现效果。有效地反映了相关区域内相关地理事件或现象的空间分布。

想知道热力图显示效果的实现原理吗？下面我们就跟随腾讯位置服务web开发一线工程师、美貌与智慧并存的totoro同学为大家揭秘。

Totoro – 腾讯位置服务前端开发工程师(外号“春哥”)

WHAT？居然是个水灵灵的妹子？

由于篇幅有限，本文以热力图为例，描述其背后的实现原理。

热力图简介

热力图是以颜色来表现数据强弱大小及分布趋势的可视化类型，热力图可应用于人口密度分析、活跃度分析等。呈现热力图的数据主要包括离散的坐标点及对应的强弱数值。

热力图实现数据准备

本文只关心热力图的基础实现，无论你是用于地图，还是网页焦点分析还是其他场景，均需将对应场景的坐标转化为Canvas画布上的二维坐标，最终我们需要的数据格式如下：

// x, y 表示二维坐标； value表示强弱值  var data = [    {x: 471, y: 277, value: 25},    {x: 438, y: 375, value: 97},    {x: 373, y: 19, value: 71},    {x: 473, y: 42, value: 63},    {x: 463, y: 95, value: 97},    {x: 590, y: 437, value: 34},    {x: 377, y: 442, value: 66},    {x: 171, y: 254, value: 20},    {x: 6, y: 582, value: 64},    {x: 387, y: 477, value: 14},    {x: 300, y: 300, value: 80}];

注：具体到使用场景，比如在地图上应用时，需要借助地图API将经纬度坐标转化为像素坐标。

实现原理

让我们从结果来反推我们应该如何实现热力图。

[ 热力图原理 ]

我们可以直观的感受到：

1. 在热力图中，每个数据点所呈现的是一个填充了径向渐变色的圆形(所谓径向渐变即由圆心随着半径增加而逐渐变化)，而这个渐变圆表现的是数据由强变弱的辐射效果

2. 两个圆之间可以相互叠加，且是线性的叠加，其实质表现的是数据强弱的叠加

3. 数据强弱的数值与颜色一一映射，一般表现为红强蓝弱的线性渐变，当然你也可以设计自己的强度色谱