javascript - Firefox 的 forEachFeatureatPixel 速度非常慢

Question

使用 forEachFeatureatPixel 函数时，Firefox 和 IE 在 OPENLAYERS 3 上运行速度非常慢。我正在努力寻找一种方法来加快速度。本质上，该应用程序(可在 www.penguinmap.com 上找到)具有当用户将鼠标悬停在 map 上的某个点上时出现的弹出窗口。但 Firefox 在这个功能上遇到了困难。我正在寻求以下代码的帮助以加快速度:

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

我用自己的函数解决了这个问题(我在 IE 11 上也遇到了性能缓慢的问题)。

// 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;
  }
}

我在“moveend”事件中获得的参数 DiffCoord:

// 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
});

现在 IE 和 FF 的 mousemove 弹出窗口似乎与 Chrome 一样快。 此示例仅适用于点，因为它搜索点原点周围的正方形中的要素。 我希望这有帮助？