在前端开发中，使用地图展示数据是一个常见的需求。而使用 Leaflet 是一个流行的解决方案之一。 React-Leaflet-Heatmap-Layer 是一个可以帮助我们制作热力图的 npm 包，下面将给大家详细介绍如何使用。
安装
使用 npm 可以很方便地安装 React-Leaflet-Heatmap-Layer，在终端中运行以下命令即可：
npm install react-leaflet-heatmap-layer
在代码中引入 React-Leaflet-Heatmap-Layer:
import HeatmapLayer from 'react-leaflet-heatmap-layer';
使用
使用 HeatmapLayer 组件，需要提供以下 props:
| Prop | Type | Default | Description |
|---|---|---|---|
| data | Array<pointtupleweight> | [] | 坐标和权重的数组（请查看下面的数据格式部分） |
| fitBoundsOnLoad | Boolean | false | 是否在加载地图时调整地图范围，以包括一组数据的所有点（false 将忽略所有的 maxBounds） |
| fitBoundsOnUpdate | Boolean | false | 是否根据新数据而调整地图范围，以包括一组数据中的所有点 |
| minOpacity | Float | 0.05 | 渐变最低不透明度 |
| maxZoom | Integer | 18 | 短缩比例的最大值。 |
| radius | Integer or Function | 30 | 半径用于渲染单词 |
| blur | Integer or Function | 15 | 模糊半径，渲染之前 |
下面是一个使用 HeatmapLayer 的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ---- --------- - ---- ----------------
------ ------------ ---- ------------------------------
------ ------- ----- ------------ ------- --------- -
------------------ -
-------------
---------- - -
------- -------- -------
----- ---
----- -
-------- ------ ----
-------- ------ ----
-------- ------ ----
-------- ------ ----
-------- ------ ---
--
--
-
-------- -
----- - ------- ----- ---- - - -----------
------ -
---- --------------- ------------
----------
--------------------------------------------------------
--
-------------
-----------
---------------
-----------------
-----------------
------------
-----------
---------
--
------
-
-
-数据格式
使用 React-Leaflet-Heatmap-Layer 制作热力图，需要提供一个包含点坐标和对应权重的数组，数组中每一个元素对应一个点，包括纬度、经度和一个数字类型的权重值。
举个例子，下面的数据包含了 3 个点：
[ [51.5, -0.11, 47], [51.51, -0.12, 10], [51.5, -0.13, 60], ]
每个点使用一个数组表示，前两个数字是纬度和经度，最后一个数字是权重。
结论
React-Leaflet-Heatmap-Layer 是制作热力图的一款优秀 npm 包，我们可以简单的使用它来创建热力图。希望这篇文章能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196387