Layer types and data mapping
Quick answer
This tutorial explains that every deck.gl layer takes three kinds of props: an id for reuse, data for content and get accessors for per-item mapping. It groups layers into single-feature, aggregation, composite and 3D families, documents return types such as getPosition, getFillColor and getPolygon, and shows how updateTriggers forces accessor re-evaluation. Readers can choose a layer and wire props without silent blank scenes.
Key points
- Give every layer a stable id and pass data plus get accessors, never style objects.
- Return [lng, lat] arrays and [r, g, b, a] numbers where the accessor expects them.
- List external dependencies in updateTriggers so accessors are re-evaluated when they change.
Example
new deck.ScatterplotLayer({
id: 'stations', // 身份
data: stations, // 数据
getPosition: function (d) { return [d.lng, d.lat]; },
getRadius: function (d) { return Math.sqrt(d.flow) * 2; },
getFillColor: [40, 140, 255, 180]
})var opts = { scheme: 'flow' };
function fill(d) {
return opts.scheme === 'flow' ? [30, 144, 255, 200] : [255, 165, 0, 200];
}
function buildLayer() {
return new deck.ScatterplotLayer({
id: 'stations',
data: stations,
getPosition: function (d) { return [d.lng, d.lat]; },
getFillColor: fill,
updateTriggers: {
getFillColor: opts.scheme // 值变则重算，值同则跳过
}
});
}Notes
- Accessors that allocate a new array on every call slow down large data sets.
- Aggregation layers on sparse data collapse everything into one meaningless cell.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Layer types and data mapping. https://www.jingweizhi.com/en/deckgl/tutorials/layers.html (accessed 2026-11-03).