首页 / Leaflet / 使用示例
热力图
用 leaflet.heat 把 1400 个带权重的采样点渲染成热力面,半径与模糊两个参数可实时调整。
源码与运行效果
说明
采样点用固定种子的伪随机数生成,四个热点分别有不同数量,保证每次打开分布一致。 每个点带 0.35–1 的第三位权重,热力值由该权重累加得到,不是简单计数。
| 参数 | 作用 | 调整效果 |
|---|---|---|
radius | 每个点的影响半径(像素) | 调大后热区连成片,调小能看出单个聚集中心 |
blur | 边缘模糊程度 | 调大过渡更柔和,调小颜色分层更明显 |
maxZoom | 热力层随地图放大的上限 | 超过后热力半径不再按级别缩放,避免糊满屏幕 |
gradient | 色带,键为 0–1 的强度 | 颜色数量不要求均匀分布,按业务阈值设更直观 |
调参时采用「移除旧层、重建新层」的做法。leaflet.heat 没有暴露完整的局部更新接口, 重建比尝试修改内部 canvas 状态更可靠;滑块用 120 ms 防抖合并,避免拖动过程中反复重绘。
热力图表达的是点密度与权重的叠加,不是插值后的连续场。需要核密度估计或等值面时, 应在服务端按带宽计算栅格,再作为瓦片或图片叠加。