Leaflet.js+leaflet.heat实现热力图

news2025/3/30 15:04:47

Leaflet热力图

效果

在这里插入图片描述

一、环境准备

基础依赖安装

#脚手架安装
# 安装 Leaflet
npm install leaflet
# 安装 Leaflet.heat
npm install leaflet.heat

<!-- CDN 安装-->
<!-- Leaflet核心库 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- 热力图插件 -->
<script src="https://unpkg.com/leaflet.heat@0.2.0/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: '&copy; 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/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet.heat@0.2.0/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: '&copy; 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>