经纬志
首页 / deck.gl / 使用示例

热力图

四点二万个点集中在五片区域,用核密度压成连续色场。 拖动滑杆改变核半径,可以看到密度表达的粒度如何变化。

deck.gl 9.0 · 更新 2026-10-27
源码与运行效果
运行效果

说明

数据由 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 负责命中,热力图只做视觉层。