经纬志
首页 / Leaflet / 使用示例

热力图

用 leaflet.heat 把 1400 个带权重的采样点渲染成热力面,半径与模糊两个参数可实时调整。

Leaflet 1.9.4 · 更新 2026-10-27
源码与运行效果
运行效果

说明

采样点用固定种子的伪随机数生成,四个热点分别有不同数量,保证每次打开分布一致。 每个点带 0.35–1 的第三位权重,热力值由该权重累加得到,不是简单计数。

参数作用调整效果
radius每个点的影响半径(像素)调大后热区连成片,调小能看出单个聚集中心
blur边缘模糊程度调大过渡更柔和,调小颜色分层更明显
maxZoom热力层随地图放大的上限超过后热力半径不再按级别缩放,避免糊满屏幕
gradient色带,键为 0–1 的强度颜色数量不要求均匀分布,按业务阈值设更直观

调参时采用「移除旧层、重建新层」的做法。leaflet.heat 没有暴露完整的局部更新接口, 重建比尝试修改内部 canvas 状态更可靠;滑块用 120 ms 防抖合并,避免拖动过程中反复重绘。

热力图表达的是点密度与权重的叠加,不是插值后的连续场。需要核密度估计或等值面时, 应在服务端按带宽计算栅格,再作为瓦片或图片叠加。