npm 包 leaflet.heat 使用教程

简介

leaflet.heat 是一个基于 Leaflet 地图库的插件，用于在地图上展示热力图。使用该插件可以方便地将数据可视化，发现空间分布规律和趋势。

安装

在项目中使用 npm 安装 leaflet.heat：

npm install leaflet.heat

使用

1. 加载必要的文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>

1. 创建地图容器：

<div id="map"></div>

#map {
  height: 500px;
}

1. 初始化地图：

var map = L.map('map').setView([39.9042, 116.4074], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
}).addTo(map);

1. 添加热力图：

var heatData = [
  [39.9042, 116.4074, 0.5],
  [31.2304, 121.4737, 0.8],
  [22.5431, 114.0579, 0.3],
  // ...
];
L.heatLayer(heatData, {radius: 25}).addTo(map);

在上面的示例中，我们首先创建了一个高度为 500px 的地图容器，并使用 Leaflet 自带的 tileLayer 加载了一个 OpenStreetMap 地图。然后，我们定义了一个热力图数据数组 heatData，每个元素包含纬度、经度和强度值。最后，使用 L.heatLayer 函数创建了一个热力图层，并将其添加到地图中。

参数

L.heatLayer 函数有两个参数：

• latlngs: 热力图数据数组，每个元素都是一个数组 [lat, lng, intensity]
• options: 热力图选项对象，可选

其中 options 对象支持以下属性：

• radius: 每个热力点的半径大小，默认为 25
• blur: 热力图的模糊程度，默认为 15
• gradient: 颜色渐变数组，用于表示热力点的强度，例如 ['green', 'yellow', 'red']

示例

下面是一个完整的示例代码：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  -------------- ------- ---------------
  ----- ---------------- -------------------------------------------------------------------
  -------
    ---- -
      ------- ------
    -
  --------
-------
------
  ---- ---------------
  ------- --------------------------------------------------------------------------
  ------- -------------------------------------------------------------------
  --------
    --- --- - ------------------------------ ---------- ----
    ----------------------------------------------------------------- -
      ------------ ---- ---- ------ -- ------------------------------------------------------- --------------
    --------------

    --- -------- - -
      --------- --------- -----
      --------- --------- -----
      --------- ---------

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
展开代码