leaflet地图热力图
2019-08-23 本文已影响0人
新世纪好青年
最近一段时间老大让用OpenStreetMap 做地图，然后从中选择了leaflet这个切片，并实现了类似百度地图的热力图（谷歌地图的热图）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<script src="heatmap.min.js"></script>
<script src="leaflet-heatmap.js"></script>
<style>
#mapid {
width: 1000px;
height: 1000px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
//数据
var testData = {
max: 8,
data: [{
lat: 24.6408,
lng: 46.7728
//count:10 //权重
}, {
lat: 50.75,
lng: -1.55
}, {
lat: 51.55,
lng: -1.55
},
{
lat: 52.65,
lng: -1.45
},
{
lat: 53.45,
lng: -1.35
},
{
lat: 54.35,
lng: -1.25
},
{
lat: 5.25,
lng: -1.15
}
]
};
//配置
var cfg = {
"radius": 2,
"maxOpacity": .4,
"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('mapid', {
center: new L.LatLng(24.6408, 46.7728),
zoom: 4,
layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);
</script>
</body>
</html>
二、配置中参数意思
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背景
}
这里不能上传文件，贴上我的csdn地址，https://download.csdn.net/download/weixin_43922585/10955646
