简介
leaflet.heat
是一个基于 Leaflet 地图库的插件,用于在地图上展示热力图。使用该插件可以方便地将数据可视化,发现空间分布规律和趋势。
安装
在项目中使用 npm
安装 leaflet.heat:
--- ------- ------------
使用
- 加载必要的文件:
----- ---------------- ------------------------------------------------------------------- ------- -------------------------------------------------------------------------- ------- -------------------------------------------------------------------
- 创建地图容器:
---- ---------------
---- - ------- ------ -
- 初始化地图:
--- --- - ------------------------------ ---------- ---- ----------------------------------------------------------------- - ------------ ---- ---- ------ -- ------------------------------------------------------- -------------- --------------
- 添加热力图:
--- -------- - - --------- --------- ----- --------- --------- ----- --------- --------- ----- -- --- -- --------------------- -------- ----------------
在上面的示例中,我们首先创建了一个高度为 500px
的地图容器,并使用 Leaflet 自带的 tileLayer
加载了一个 OpenStreetMap 地图。然后,我们定义了一个热力图数据数组 heatData
,每个元素包含纬度、经度和强度值。最后,使用 L.heatLayer
函数创建了一个热力图层,并将其添加到地图中。
参数
L.heatLayer
函数有两个参数:
latlngs
: 热力图数据数组,每个元素都是一个数组[lat, lng, intensity]
options
: 热力图选项对象,可选
其中 options
对象支持以下属性:
radius
: 每个热力点的半径大小,默认为25
blur
: 热力图的模糊程度,默认为15
gradient
: 颜色渐变数组,用于表示热力点的强度,例如['green', 'yellow', 'red']
示例
下面是一个完整的示例代码:
--------- ----- ------ ------ ----- ---------------- -------------- ------- --------------- ----- ---------------- ------------------------------------------------------------------- ------- ---- - ------- ------ - -------- ------- ------ ---- --------------- ------- -------------------------------------------------------------------------- ------- ------------------------------------------------------------------- -------- --- --- - ------------------------------ ---------- ---- ----------------------------------------------------------------- - ------------ ---- ---- ------ -- ------------------------------------------------------- -------------- -------------- --- -------- - - --------- --------- ----- --------- --------- ----- --------- --------- ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------