leafletjs热力图_leafletjs+heatmapjs绘制热力地图

前面两篇其实都是为了写一下leaflet-heatmap.js

最后搜了一下github https://github.com/Leaflet/Leaflet.heat

加载了leaflet.js和heatmap.js&＃xff0c;就可以用leaflet-heatmap.js来绘制热力地图了。

首先&＃xff0c;这是要展示的数据&＃xff0c;有max代表所有数据的最大值&＃xff0c;lat和Ing代表经纬度的值&＃xff0c;count是要展示的数据&＃xff0c;后面配置会有讲到&＃xff0c;所以max应该是count中的最大值。

// don&＃39;t forget to include leaflet-heatmap.js

var testData &＃61; {

max: 8,

data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]

};

很熟悉&＃xff0c;就是我们讲leaflet的基础层的初始化。

var baseLayer &＃61; L.tileLayer(

&＃39;http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&＃39;,{

attribution: &＃39;...&＃39;,

maxZoom: 18

}

);

cfg中所有heatmapjs的参数都可以用。另外加了额外的参数&＃xff0c;都有说明

var cfg &＃61; {

// 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: &＃39;lat&＃39;,

// which field name in your data represents the longitude - default "lng"

lngField: &＃39;lng&＃39;,

// which field name in your data represents the data value - default "value"

valueField: &＃39;count&＃39;

};

初始化 heatmapLayer &＃xff0c;也就是将热力图看作一层&＃xff0c;还记得说地图的时候&＃xff0c;是说它们是一层一层堆积的么?

var heatmapLayer &＃61; new HeatmapOverlay(cfg);

var map &＃61; new L.Map(&＃39;map-canvas&＃39;, {

center: new L.LatLng(25.6586, -80.3568),

zoom: 4,

layers: [baseLayer, heatmapLayer]

});

heatmapLayer.setData(testData);

setDate每次改变值&＃xff0c;热力图也是会更新的。

原生态的配色被吐槽太丑&＃xff0c;现在的大家觉得有好一点么&＃xff1f;

作者给的图

咱的配色

看了一下代码&＃xff0c;也就200来行&＃xff0c;主要是重写了setData&＃xff0c;addData的方法&＃xff0c;另外跟地图衔接的有addTo和onRemove &＃xff0c;使之适应热力图。