The SelectInteraction component provides a React wrapper for the OpenLayers Select interaction. It allows users to select vector features on a map, which can be used for visual highlighting or triggering other actions like modification or data output.
Selection can be controlled via:
- Browser events: Using conditions, toggles, add/remove, and multi options.
- Layers filter: Restricting selection to specific layers.
- Feature filter: Using the
filter option for custom logic.
When a selection event occurs, the onSelect callback provides access to the selected features and the list of deselected features.
import {Map, SelectInteraction, VectorLayer} from '../../../lib';
import Point from 'ol/geom/Point';
import LineString from 'ol/geom/LineString';
import Polygon from 'ol/geom/Polygon';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
export default function(props) {
const pointFeature = new Feature( new Point([0, 0]));
const lineFeature = new Feature( new LineString([ [-1e7, 1e6], [-1e6, 3e6] ])) ;
const polygonFeature = new Feature(
new Polygon([ [ [-3e6, -1e6], [-3e6, 1e6], [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6] ] ]),
);
const source = new VectorSource({
features: [pointFeature, lineFeature, polygonFeature],
})
function onSelect(e) {
console.log('selected', e.target.getFeatures().getLength());
console.log('deselected', e.deselected.length);
};
return (
<Map>
<VectorLayer source={source} />
<SelectInteraction onSelect={onSelect} />
</Map>
);
}
