LeaFlet学习之热力图
这两天一直 在整这个热力图，官网给的插件用的heatmap.js打开插件，很恶心的是我并没有找到插件下载压缩包，无奈我就用给出的demo里面的js做的。
一、需要拖入的js
<link href="Script/leaflet/leaflet.css" rel="stylesheet" />
<style>
#map{
height: 1000px;
width: 1500px;
}
</style>
<script src="Script/leaflet/leaflet.js"></script>
<script src="data/heatmap.min.js"></script>
<script src="data/leaflet-heatmap.js"></script>
如果想省事可在这里下载
二、配置中参数意思
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背景
};
三、全部源码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>leaflet热力图</title>
<link href="Script/leaflet/leaflet.css" rel="stylesheet" />
<style>
#map{
height: 1000px;
width: 1500px;
}
</style>
<script src="Script/leaflet/leaflet.js"></script>
<script src="data/heatmap.min.js"></script>
<script src="data/leaflet-heatmap.js"></script>
</head>
<body>
<div id="map"></div>
<script>
//数据
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);
</script>
</body>
</html>
四、总结
这里的热力图效果，可以把这些经纬度，数量等信息放入到数据库，当需要的时候再通过ajax进行异步交互获取资源，进行渲染展示，该插件好像也有OL的插件，这样做起来，可以做到OL进行加载点进行渲染。demo参考官网代码
转载自：https://blog.csdn.net/weixin_40184249/article/details/81262137
