热力图制作 heatmap.js+leaflet.js简单例子
先看看完成的效果图
因为是前端自动生成的数据,所以数据比较分散,效果不是特别好,你们可以自己试试
1.首先导入js
jquery.js
leaflet.js
heatmap.js
leaflet-heatmap.js
相应的包可以在官网上下载
2.写一个自动生成数据的函数
//gross:生成数据量
//radius:每个点的范围
function createData(gross,radius){
var max = 0; //单点最大值
var points=[]; //点集合
for(;gross>0;gross--){
var val = Math.floor(Math.random()*100);
max = Math.max(max, val);
var point = {
"lat":Math.random()*2.5+39, //经度
"lng":Math.random()*2.5+115, //纬度
"count": val, //数据量大小
"radius":radius
};
points.push(point);
}
return {"max":max,"data":points};
}调用此函数会生成一些数据
3.js主体部分
window.onload=function(){
var data=createData(10000,0.015);
var heatmap_cfg={
"radius":"radius", //设置每一个热力点的半径
"maxOpacity":0.5, //设置最大的不透明度
"minOpacity":0.3, //设置最小的不透明度
"scaleRadius":true, //设置热力点是否平滑过渡
"blur": 0.95, //系数越高，渐变越平滑，默认是0.85,
//滤镜系数将应用于所有热点数据。
"useLocalExtrema": true, //使用局部极值
"latField":"lat", //纬度
"lngField":"lng", //经度
"valueField":"value", //热力点的值
"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)"
}
}
var heatmap_layer = new HeatmapOverlay(heatmap_cfg);
var leaflet_layer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
var leaflet_cfg={
"center":L.latLng(39.9,116.36), //维度精度
"zoom": 10, //默认缩放级别
"minZoom":9, //最小缩放级别
"maxZoom":16, //最大缩放级别
"layers":[leaflet_layer, heatmap_layer], //定义地图图层
"maxBounds":[[39,115],[41.5,117.5]], //维度精度
"opacity": 0.1 //图层的不透明度
}
var map = new L.Map("leaflet_heatmap",leaflet_cfg);
heatmap_layer.setData(data);
}4.html部分
<body class="fillAll">
<div id="leaflet_heatmap" class="fillAll"></div>
</body>5.结束
基本的热力图完成了,剩下的自己尝试把
转载自：https://blog.csdn.net/Boyu_Sun/article/details/66970270
