使用forEachFeatureatPixel的Firefox非常慢

Question

Firefox and IE are operating REALLY slowly with OPENLAYERS 3 when using the forEachFeatureatPixel function. I'm trying to find a way to speed it up. Essentially, the application (found at www.penguinmap.com) has as popup that comes up when the user hovers over a point on the map. But Firefox struggles with this feature. I'm looking for help with the following code to speed it up:

var selectMouseMove = new ol.interaction.Select({  
    condition: function (e) {
        return e.originalEvent.type == 'mousemove';
    },
    style: hoverStyle
})

// Change cursor 
var target = map.getTarget();
var jTarget = typeof target === "string" ? $("#" + target) : $(target);
// On Hover, change the mouse cursor and display the name of the site  
$(map.getViewport()).on('mousemove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent);
    var feature = map.forEachFeatureAtPixel(pixel,
         function (feature, layer) {
    return feature;
});

if (feature) {
    map.addInteraction(selectMouseMove)
    jTarget.css("cursor", "pointer");
    var geometry = feature.getGeometry();
    var coord = geometry.getCoordinates();
    popup.setPosition(coord);
    $(element).popover({
        'placement': 'top',
        'html': true,
        'content': feature.get('site_name')
    });
    $(element).popover('show');
} else {
    map.removeInteraction(selectMouseMove)
   jTarget.css("cursor", "");
   $(element).popover('destroy');
  }
});
var element = document.getElementById('popup');

var popup = new ol.Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false
});
map.addOverlay(popup);

Answer 1

I solved this problem for points only (I had the slow performance problem also on IE 11) with an own function.

// Alternative FeatureAtPixel-Function wegen FF
// Sucht im Rechteck vom Punkt pixel aus in +/- x und +/- y
function FFIE_getFeatureAtPixelQuadrat(pixel, DiffCoord) {
  result = [];
  mousepixel = map.getCoordinateFromPixel(pixel);
  f = vectorSource.getFeatures();
  c = 0;
  for (var i in f) {
    if (f[i].point.flatCoordinates[0] > mousepixel[0] - DiffCoord && f[i].point.flatCoordinates[0] < mousepixel[0] + DiffCoord ) {
    if (f[i].point.flatCoordinates[1] > mousepixel[1] - DiffCoord && f[i].point.flatCoordinates[1] < mousepixel[1] + DiffCoord ) {
      c++;
      result.push(f[i]);
    }}
  }
  if (c > 0) {
    return result;
  }
}

The parameter DiffCoord I get on "moveend" event:

// Event, wenn Zoom neu gesetzt
map.on("moveend", function(evt) {
  // Berechnen flatCoordinates per Pixel
  var pixel = [0,0];
  startx = map.getCoordinateFromPixel(pixel)[0];
  pixel = [1,1];
  endx = map.getCoordinateFromPixel(pixel)[0];
  DiffCoord = (endx-startx) * 8; // 8 entspricht den +/- Pixeln in flatCoordinates
});

Now IE and FF seems to be equal fast than Chrome for the popup on mousemove. This example is only for points because it searches the feature in a square around the origin of the point. I hope this helps?