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

聚合过渡

五万个点同时用 800 米与 2.2 公里两套六边形分箱, 切换时两者透明度此消彼长,聚合粒度在 0.8 秒内完成过渡。

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

说明

两个 HexagonLayer 共用同一份点数据,半径分别为 800 米和 2200 米,各自独立完成分箱。过渡期间两层的透明度 相加恒为 1,因此画面不会出现整体变暗或闪烁。

配置作用
opacity: 1 - blend细网格透明度,随目标值递减
opacity: blend粗网格透明度,同步递增
pickable只让当前主导图层参与拾取,避免重复命中
visible透明到 0 的层要隐藏,否则仍会写深度缓冲遮住另一层
easeInOut两端慢、中间快的缓动,过渡更自然
固定 id切换时复用聚合结果,不重新分箱

为什么不做半径插值

半径是分箱的依据,逐帧改半径等于每帧重新聚合五万个点, 开销高且中间态没有意义。交叉淡入的做法把两套已经算好的 结果叠在一起,只在片元层面做混合,代价接近零。

这种过渡不是几何 morph,两层的六边形位置并不对应。 视觉上表现为旧结构淡出、新结构淡入,适合表达「换个尺度看」, 不适合要求连续形变的场景。

拾取为什么只开一层

两层都开 pickable 时,同一屏幕位置可能同时命中 两层的单元,提示内容会在细网格与粗网格之间跳变。 示例用 blend < 0.5 判断主导层,只给它开拾取, 提示里也标出当前是哪一层。

过渡时长要与数据量匹配。五万个点用 0.8 秒足够; 如果聚合本身要几百毫秒才能算完,缩短过渡反而会让用户 看到卡顿。先把聚合缓存好,再谈动画。