一、需要拖入的js

#map{

height: 1000px;

width: 1500px;

}

如果想省事可在这里下载

二、配置中参数意思

var config = { //热力图的配置项

radius: 'radius', //设置每一个热力点的半径

maxOpacity: 0.9, //设置最大的不透明度

// minOpacity: 0.3, //设置最小的不透明度

scaleRadius: true, //设置热力点是否平滑过渡

blur: 0.95, //系数越高，渐变越平滑，默认是0.85,

//滤镜系数将应用于所有热点数据。

useLocalExtrema: true, //使用局部极值

latField: 'latitude', //维度

lngField: 'longitude', //经度

valueField: 'count', //热力点的值

gradient: { "0.99": "rgba(255,0,0,1)",

"0.9": "rgba(255,255,0,1)",

"0.8": "rgba(0,255,0,1)",

"0.5": "rgba(0,255,255,1)",

"0": "rgba(0,0,255,1)"

},

//过渡，颜色过渡和过渡比例,范例：

/*

{ "0.99": "rgba(255,0,0,1)",

"0.9": "rgba(255,255,0,1)",

"0.8": "rgba(0,255,0,1)",

"0.5": "rgba(0,255,255,1)",

"0": "rgba(0,0,255,1)"

}

*/

// backgroundColor: 'rgba(27,34,44,0.5)' //热力图Canvas背景

};

三、全部源码

leaflet热力图

#map{

height: 1000px;

width: 1500px;

}

//数据

var testData = {

max: 8,

data: [{ lat: 24.6408, lng: 46.7728, count: 3 },

{ lat: 50.75, lng: -1.55, count: 1 },

{ lat: 51.55, lng: -1.55, count: 9 },

{ lat: 52.65, lng: -1.45, count: 8 },

{ lat: 53.45, lng: -1.35, count: 7 },

{ lat: 54.35, lng: -1.25, count: 6 },

{ lat: 5.25, lng: -1.15, count: 5 },

]

};

//配置

var cfg = {

"radius": 2,

"maxOpacity": .8,

"scaleRadius": true,

"useLocalExtrema": true,

latField: 'lat',

lngField: 'lng',

valueField: 'count'

};

var heatmapLayer = new HeatmapOverlay(cfg);

//图层

var baseLayer = L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

attribution: '...',

maxZoom: 18

}

);

var map = new L.Map('map', {

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

zoom: 4,

layers: [baseLayer, heatmapLayer]

});

heatmapLayer.setData(testData);

四、总结

这里的热力图效果，可以把这些经纬度，数量等信息放入到数据库，当需要的时候再通过ajax进行异步交互获取资源，进行渲染展示，该插件好像也有OL的插件，这样做起来，可以做到OL进行加载点进行渲染。demo参考官网代码