Openlayers 3 forEachFeatureAtPixel对于Points不能正常工作

Question

I need to implement "click on feature" functionality using OpenLayers 3. It works fine for all types of features, but when using "Point", forEachFeatureAtPixel fails when I click far enough from centre (close enough to border). I have created an example here - https://jsfiddle.net/mstrop/4gvLhfje/7/ .

var pixel = map.getEventPixel(evt.originalEvent);   

var found = false;

map.forEachFeatureAtPixel(pixel, function(feature, layer) 
{
    found = true;
});

console.log((found?"":"not ") + "found");

When you start clicking on border and you will continue towards the centre of the circle you will see, that the circle is found quite far from the border. Please, could anybody tell me, what I am doing wrong?

Answer 1

Change

var pixel = map.getEventPixel(evt.originalEvent);   

to

var pixel = evt.pixel;   

Answer 2

You are looking for this:

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel, function(ft){return ft;});
  if (feature) {
    // ...
  }
});

Answer 3

The issue with Point geometry is "hidden" in it's property. It uses renderBuffer, which is 100px by default. In case radius of the geometry is bigger, the property has to be increased manually.