Select
Quick answer
Select is ol.interaction.Select, a handler that picks features by click or box and stores them in a Collection with a separate highlight style. Options include layers, filter, condition, addCondition, removeCondition, toggleCondition, style, hitTolerance and multi. Listen to the select event to read evt.selected and evt.deselected arrays.
new ol.interaction.Select( options )
Key points
- getFeatures returns a Collection, so iterate with forEach and read the first via item(0).
- clear empties the selection; setActive toggles the interaction without removing it.
- hitTolerance is measured in screen pixels; 4 to 8 helps with thin line features.
Example
var select = new ol.interaction.Select({
layers: [vectorLayer],
hitTolerance: 6,
multi: false,
style: new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#e8a33d', width: 4 }),
fill: new ol.style.Fill({ color: 'rgba(232, 163, 61, 0.25)' })
})
});
map.addInteraction(select);
select.on('select', function (evt) {
var picked = evt.selected[0];
if (picked) {
console.log(picked.get('name'));
} else {
console.log('取消选中');
}
});
select.getFeatures().clear();Notes
- With multi false each new pick replaces the old selection instead of accumulating.
- The highlight is drawn by an internal layer, so changing the source layer style does not affect it.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Select. https://www.jingweizhi.com/en/openlayers/api/select.html (accessed 2026-11-03).