首页 / deck.gl / 使用示例
热力图
四点二万个点集中在五片区域,用核密度压成连续色场。 拖动滑杆改变核半径,可以看到密度表达的粒度如何变化。
源码与运行效果
说明
数据由 JS 现场生成:五个中心各自向四周做高斯抖动,数量按
15000 / 9000 / 7000 / 6000 / 5000 分配,
每个点还带一个 0.55–1.3 的权重。密度场因此既有疏密差异,
也有强度差异。
| 配置 | 作用 |
|---|---|
getWeight | 让密度不只反映点数,还反映业务量 |
radiusPixels: 44 | 核半径按屏幕像素,缩放时视觉大小不变 |
intensity: 1.15 | 整体放大权重,让热点更早饱和 |
threshold: 0.04 | 过滤边缘的极低密度,减少整屏泛蓝 |
colorRange | 七档色带,首档 alpha 为 0,边缘自然淡出 |
核半径的取舍
半径设小,热点轮廓接近原始点位,但色带容易被单点拉爆; 半径设大,各中心会连成一片,密度差异被抹平。 观察滑杆从 12 拖到 80 的过程,可以直观看到「过拟合」与 「过度平滑」两个极端。
半径是屏幕像素,所以放大到街区层级后,同一个核覆盖的地理范围会 显著缩小,密度场随之变疏。需要与地面距离绑定的表达时, 应改用六边形或方格聚合。
热力图没有拾取能力。它输出的是连续纹理,不携带单条数据。
需要点击查询时,在同一个坐标系下再加一个
ScatterplotLayer 负责命中,热力图只做视觉层。