Picking and interaction
Quick answer
This tutorial explains that deck.gl picking encodes each primitive as a color in an off-screen pass, which is why pickable defaults to false. It enables onClick and onHover, reads info.object, info.index, info.layer and info.coordinate, and configures autoHighlight, highlightColor and pickingRadius. It also describes how overlapping layers resolve top-down and when the Deck-level handler fires. Readers can build dependable hover and click behavior.
Key points
- Set pickable: true per layer and read info.object for the hit datum.
- Use autoHighlight and highlightColor instead of hand-written hover state.
- Tune pickingRadius in pixels so thin lines and small dots remain selectable.
Example
var stationsLayer = new deck.ScatterplotLayer({
id: 'stations',
data: stations,
getPosition: function (d) { return [d.lng, d.lat]; },
getRadius: function (d) { return d.flow > 800 ? 10 : 6; },
getFillColor: [40, 140, 255, 200],
pickable: true,
autoHighlight: true,
highlightColor: [255, 200, 0, 220],
onClick: function (info) {
console.log('点击', info.object.name, '索引', info.index);
},
onHover: function (info) {
document.body.style.cursor = info.object ? 'pointer' : 'default';
}
});
new deck.Deck({
container: 'map',
initialViewState: {
longitude: 116.397,
latitude: 39.908,
zoom: 11,
pitch: 0
},
controller: true,
pickingRadius: 6,
layers: [stationsLayer]
});var layers = [
new deck.GeoJsonLayer({
id: 'parcels',
data: parcels,
filled: true,
pickable: true,
onClick: function (info) { console.log('地块', info.object.properties.id); }
}),
new deck.ScatterplotLayer({
id: 'stations',
data: stations,
getPosition: function (d) { return [d.lng, d.lat]; },
getRadius: 7,
pickable: true
})
];
var deckgl = new deck.Deck({
container: 'map',
initialViewState: { longitude: 116.397, latitude: 39.908, zoom: 11 },
controller: true,
layers: layers,
onClick: function (info, event) {
if (!info.object) console.log('空白处', info.coordinate);
}
});Notes
- A transparent or non-pickable top layer still blocks hits to layers below.
- Aggregation layers return the cell object; the raw points are in info.object.points.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Picking and interaction. https://www.jingweizhi.com/en/deckgl/tutorials/picking.html (accessed 2026-11-03).