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

拾取高亮

六千个点位散布在城区,点击任意一个,用白色环和淡蓝光晕框住它, 左下角面板同步显示编号、坐标、流量与等级。

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

说明

数据里有一个 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 后,鼠标划过的每一帧都会渲染拾取缓冲, 帧率可能明显下降。静态展示页关掉拾取,是性价比最高的一步。