热力图

原理：在客户端直接渲染的栅格图，热力图的渲染需要三大要素：

• 热力数据，热力数据需要点数据，每一个热力数据需要有地理位置以及权重值 （能够明显的表现某位置某事件发生频率或事物分布密度等，如可以为温度的高低、人口密集度等等）
• 热力衰减渐变填充色集合， 用于渲染每一个热力从中心向外衰减时的渐变色
• 热力半径，也就是衰减半径。每一个热力需要从中心点外四周根据半径计算衰减度， 对在热力衰减区内的每一个像素计算需要渲染的颜色值，然后进行客户端渲染

应用场景：由于热力图的衰减是像素级别的，视觉效果方面极佳，但不能与具体数据进行一一对应，只能表示权重之间的差别，所以可以用于一些对精度要求不高而需要重点突出权重渐变的行业，如可以制作气象温度对比动态效果图、地震区域的震点强弱图等。

引入插件 leaflet-heat.js 包括两种方式:

下载 leaflet-heat.js

1.进入 github 下载 leaflet-heat.js，下载地址为:

https://github.com/Leaflet/Leaflet.heat

2.&ltscript&gt标签引入:

<script src="leaflet-heat.js"></script>

直接通过cdn引入

<script src="http://cdn.bootcss.com/leaflet.heat/0.2.0/leaflet-heat.js"></script>

//定义热力点数量，加热力半径
var heatNumbers = 150, heatRadius = 30;
//加热力坐标信息数组
var heatPoints = [];
//遍历添加坐标信息
for (var i = 0; i < heatNumbers; i++) {
heatPoints[i]=[ Math.random() * 0.28 + 39.78, Math.random() * 0.5 + 116.12, Math.random() * 80]; 
}
//调用渲染方法，传入半径，透明度参数，添加到地图
resultLayer = L.heatLayer(heatPoints, {
        radius: heatRadius,
        minOpacity: 0.5 }).addTo(map);

查看完整示例代码