Atlaslog / Field Notes / deck.gl visualization
Field note · deck.gl visualization
setProps with new data leaves the layer unchanged
Quick answer
The filter handler builds a new layer and calls deck.setProps, the array in the console is shorter, but the map still shows every point in the old colour. deck.gl shallow-compares layer id and props, so a mutated array or a reused instance counts as no change.
Symptom
- After filtering, the on-screen point count stays the same until you zoom, which briefly flashes the new result.
- deck.layerManager.getLayers().map(l => l.id) returns the expected new layer object.
- Colour never updates when only the field read by getFillColor is changed in place.
Checklist
- Print ids from deck.layerManager.getLayers() to confirm the layer object is replaced.
- Print deck.props.layers[0].props.data.length to see whether the length actually changed.
- Check whether the same array was mutated with push or splice and passed back.
- Add onDataLoad to see whether the data is re-read at all.
Fix
Pass a fresh array (list.slice()) and a fresh layer instance from buildLayer, or keep the data and bump updateTriggers: { getFillColor: [filterVersion] } so the accessor is recomputed.
Code
function buildLayer(list) {
return new deck.ScatterplotLayer({
id: 'stations',
data: list, // 必须是新数组
getPosition: function (d) { return [d.lng, d.lat]; },
getRadius: 8,
radiusUnits: 'pixels',
getFillColor: function (d) {
return d.status === 'alarm' ? [220, 53, 69] : [23, 162, 184];
},
pickable: true
});
}
function render(list) {
deck.setProps({ layers: [buildLayer(list.slice())] });
}new deck.ScatterplotLayer({
id: 'stations',
data: stations,
getPosition: function (d) { return [d.lng, d.lat]; },
getFillColor: function (d) { return d.color; },
updateTriggers: {
getFillColor: [filterVersion] // 版本号变化即重算
}
});
Watch out
- Mutating layer.props.data outside setProps bypasses the diff and never triggers a redraw.
- With React, calling setProps inside an effect while also passing layers as a prop makes the two update paths overwrite each other.
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). setProps with new data leaves the layer unchanged. https://www.jingweizhi.com/en/cookbook/deckgl-layer-not-refresh.html (accessed 2026-11-03).