首页 / deck.gl / 使用示例
拾取高亮
六千个点位散布在城区,点击任意一个,用白色环和淡蓝光晕框住它, 左下角面板同步显示编号、坐标、流量与等级。
源码与运行效果
说明
数据里有一个 level 字段,约 18% 的点为「重点」,
半径 4 像素、颜色为橙;其余为普通点,半径 2.4 像素、蓝色。
点击时 info.object 就是原始数据对象,
选中状态只保存在一个变量里。
| 配置 | 作用 |
|---|---|
pickable: true | 不开就没有任何拾取结果 |
onClick | 点击画布时回调,info.object 可能为 null |
autoHighlight | 悬停时由图层自动叠加高亮色 |
| 环形图层 | 单条数据、filled: false、2 像素描边 |
| 光晕图层 | 30 像素半透明圆,提示点击目标 |
为什么用三个图层
主图层负责渲染全部点位,环与光晕只承载一条数据。
点击后重建这三个图层,环与光晕的数据变成
[selected],其余点位不受影响。
这种「数据分离」比在主图层上用 updateTriggers
改单个点的颜色更直接,也不会触发六千人数据的重新求值。
点击空白处
画布空白区域的拾取结果是 null,示例据此清空选中。
判断条件写成 info.object && info.object.id,
是为了避开边框、背景等可能返回空对象的情况。
也可以不用事件,直接调用
deckgl.pickObject({x, y}) 在自定义逻辑里查询,
比如从外部表格定位到某个点时,按屏幕坐标反查要素。
拾取有成本。六千个点可以忽略,几十万个点开启
pickable 后,鼠标划过的每一帧都会渲染拾取缓冲,
帧率可能明显下降。静态展示页关掉拾取,是性价比最高的一步。