Leaflet热力图
效果
一、环境准备
- 基础依赖安装
#脚手架安装
# 安装 Leaflet
npm install leaflet
# 安装 Leaflet.heat
npm install leaflet.heat
<!-- CDN 安装-->
<!-- Leaflet核心库 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- 热力图插件 -->
<script src="https://unpkg.com/[email protected]/dist/leaflet-heat.js"></script>
二、地图初始化
const map = L.map('map').setView([51.505, -0.09], 13);
// 添加OSM底图
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
三、热力数据生成
- 数据生成函数（可自定义参数）
function generateRandomData(count, centerLat, centerLng, radius) {
return Array.from({
length: count}, () => [
centerLat + (Math.random() - 0.5) * radius,
centerLng + (Math.random() - 0.5) * radius,
Math.random() // 强度值范围 0~1
]);
}
// 生成10000个测试点（伦敦市中心区域）
const heatData = generateRandomData(10000, 51.505, -0.09, 0.1);
- 数据格式说明：
• 每个数据点为三元组 [纬度, 经度, 强度]
• 建议强度值归一化到0~1范围
• 实际项目可从GeoJSON/CSV转换（参考网页3数据转换方法）
四、热力图层配置
const heat = L.heatLayer(heatData, {
radius: 25, // 点半径（像素）
blur: 15, // 模糊系数（0~1）
maxZoom: 17, // 最大显示层级
max: 1.0, // 强度最大值
gradient: {
// 颜色映射配置
0.4: 'blue',
0.6: 'cyan',
0.7: 'lime',
0.8: 'yellow',
1.0: 'red'
}
}).addTo(map);
关键参数说明：
• radius：根据数据密度调整，过大会导致热区重叠（参考网页3建议）
• gradient：支持CSS颜色名/RGB值，推荐使用HSL颜色空间渐变
• minOpacity：可添加此参数控制最小可见度（网页1建议值0.2）
五、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Heatmap Example</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet-heat.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 初始化地图
const map = L.map('map').setView([51.505, -0.09], 13);
// 添加瓦片图层
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 热力图数据
// 生成1000个随机数据点
function generateRandomData (count, centerLat, centerLng, radius) {
const data = [];
for (let i = 0; i < count; i++) {
// 生成随机偏移量
const offsetLat = (Math.random() - 0.5) * radius;
const offsetLng = (Math.random() - 0.5) * radius;
// 计算随机点的经纬度
const lat = centerLat + offsetLat;
const lng = centerLng + offsetLng;
// 随机强度值
const intensity = Math.random();
// 添加到数据数组
data.push([lat, lng, intensity]);
}
return data;
}
const heatData = generateRandomData(10000, 51.505, -0.09, 0.1);
// 添加热力图图层
const heat = L.heatLayer(heatData, {
radius: 25, // 热力图半径
blur: 15, // 模糊程度
maxZoom: 17, // 最大缩放级别
max: 1.0, // 最大强度
gradient: {
0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red' } // 颜色梯度
}).addTo(map);
// 可选：添加点击事件，在地图点击处添加一个热力点
map.on('click', function (e) {
const newPoint = [e.latlng.lat, e.latlng.lng, 0.8];
heat.addData([newPoint]);
});
</script>
</body>
</html>