How to improve performance of getFeaturesAtPixel?

I use the "map.getFeaturesAtPixel" method to exactly get the first feature under on a mouse-click interaction.

This works as expected even though the method does not return a single feature but all the features whose graphical representation hits the clicked point.

This behaviour will be "acceptable" but it turns out that its performance decreases as soon as we zoom out and lots of features are condensed and displayed like a giant mass of features...

I know this is not the ideal way to display features on a map but it can happen in some scenarios.

Anyway, I tried what it seems to be a faster way to retrieve what I want (first feature under my click) using a "small" Extent (based on the click coordinate) and using getFeaturesIntersectingExtent. This approach is really fast but it does not work in all scenarios since it's only aware of features geometries and not their graphical representation (my needs).

Question: is there a another way to get this first-feature-under-click in an optimal way?

Solution

you can use this to get feature on mouse click

var feature = map.forEachFeatureAtPixel(evt.pixel,
                    function (feature) {
                        return feature;
                    });