使用forEachFeatureatPixel,Firefox速度非常慢

时间:2017-08-16 09:49:27

标签: javascript firefox openlayers-3

使用forEachFeatureatPixel函数时,Firefox和IE在OPENLAYERS 3中运行速度非常慢。我正试图找到一种加快速度的方法。从本质上讲,应用程序(在www.penguinmap.com上找到)具有弹出窗口,当用户将鼠标悬停在地图上的某个点上时。但是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);

1 个答案:

答案 0 :(得分:0)

我解决了这个问题只有点(我在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;
  }
}

我参加的DiffCoord参数&#34; moveend&#34;事件:

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

现在,对于mousemove上的弹出窗口,IE和FF似乎与Chrome相同。 此示例仅适用于点,因为它在点的原点周围的正方形中搜索要素。 我希望这有帮助吗?