首页 / deck.gl / 使用示例
聚合过渡
五万个点同时用 800 米与 2.2 公里两套六边形分箱, 切换时两者透明度此消彼长,聚合粒度在 0.8 秒内完成过渡。
源码与运行效果
说明
两个 HexagonLayer 共用同一份点数据,半径分别为
800 米和 2200 米,各自独立完成分箱。过渡期间两层的透明度
相加恒为 1,因此画面不会出现整体变暗或闪烁。
| 配置 | 作用 |
|---|---|
opacity: 1 - blend | 细网格透明度,随目标值递减 |
opacity: blend | 粗网格透明度,同步递增 |
pickable | 只让当前主导图层参与拾取,避免重复命中 |
visible | 透明到 0 的层要隐藏,否则仍会写深度缓冲遮住另一层 |
easeInOut | 两端慢、中间快的缓动,过渡更自然 |
固定 id | 切换时复用聚合结果,不重新分箱 |
为什么不做半径插值
半径是分箱的依据,逐帧改半径等于每帧重新聚合五万个点, 开销高且中间态没有意义。交叉淡入的做法把两套已经算好的 结果叠在一起,只在片元层面做混合,代价接近零。
这种过渡不是几何 morph,两层的六边形位置并不对应。 视觉上表现为旧结构淡出、新结构淡入,适合表达「换个尺度看」, 不适合要求连续形变的场景。
拾取为什么只开一层
两层都开 pickable 时,同一屏幕位置可能同时命中
两层的单元,提示内容会在细网格与粗网格之间跳变。
示例用 blend < 0.5 判断主导层,只给它开拾取,
提示里也标出当前是哪一层。
过渡时长要与数据量匹配。五万个点用 0.8 秒足够; 如果聚合本身要几百毫秒才能算完,缩短过渡反而会让用户 看到卡顿。先把聚合缓存好,再谈动画。