前面两篇其实都是为了写一下leaflet-heatmap.js
最后搜了一下github https://github.com/Leaflet/Leaflet.heat
加载了leaflet.js和heatmap.js，就可以用leaflet-heatmap.js来绘制热力地图了。
- 首先，这是要展示的数据，有max代表所有数据的最大值，lat和Ing代表经纬度的值，count是要展示的数据，后面配置会有讲到，所以max应该是count中的最大值。
// don't forget to include leaflet-heatmap.js
var testData = {
max: 8,
data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]
};
- 很熟悉，就是我们讲leaflet的基础层的初始化。
var baseLayer = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '...',
maxZoom: 18
}
);
- cfg中所有heatmapjs的参数都可以用。另外加了额外的参数，都有说明
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
// if scaleRadius is false it will be the constant radius used in pixels
"radius": 2,
"maxOpacity": .8,
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": true,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
valueField: 'count'
};
- 初始化 heatmapLayer ，也就是将热力图看作一层，还记得说地图的时候，是说它们是一层一层堆积的么?
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map-canvas', {
center: new L.LatLng(25.6586, -80.3568),
zoom: 4,
layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);
setDate每次改变值，热力图也是会更新的。
原生态的配色被吐槽太丑，现在的大家觉得有好一点么？
作者给的图
咱的配色
看了一下代码，也就200来行，主要是重写了setData，addData的方法，另外跟地图衔接的有addTo和onRemove ，使之适应热力图。
