OpenLayers 3 selecting multiple features from same layer - openlayers-3

Question

I have a layer with overlapping features (e.g. bounding boxes). In OL2 the select control seemed to select the expected feature (e.g. the feature with less surface area). In OL3 this doesn't seem to be the case. While I could get all features at a specific pixel, I would prefer for the select control to return all features that intersect with the click. Any way to do this?

Answer 1

You can set the multi member of ol.interaction.Select to true (it allows to choose all features at the coordinate you have clicked) and add an event to choose what feature do you want to select among all the overlapping features:
var select = new ol.interaction.Select({
multi: true
});
var fnHandler = function (e) {
e.selected; // array of selected features
e.target; // select interaction
var feature = e.selected.filter(function (feature) {
// do some filtering to choose what feature do you want
})[0];
e.target.getFeatures().clear(); // unselect all features
e.target.getFeatures().push(feature); // select the feature you filtered
};
select.on('select', fnHandler);

Answer 2

To get all of the features in a layer that intersect with the mouse click I do something like this:
map.on("click", function(event) {
var coordinate = event.coordinate;
var features = myVectorLayer.getSource().getFeaturesAtCoordinate(coordinate);
// Do something with the features that were clicked here...
});