Openlayers 3 - 交互和指针移动

Question

我正在尝试当鼠标悬停在某个元素内时激活交互。它工作得还好... 问题是如果你的鼠标移动得很慢，交互仍然保持激活状态。这是OL3的Bug吗？还是我应该用不同的方式？代码：http://jsfiddle.net/gmaq54dm/3/。

olMap.on("pointermove", function (e) {
    if (e.dragging) {
        return;
    }
    var map = e.map;
    console.log(e.pixel);
    var feature = map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
      return feature;
    });
    var hit = (feature) ? true : false;
    console.log(hit);
    olDraw.setActive(hit);
});

谢谢

- Marcos Oto

---

看起来像是一个 bug。你可以向核心开发人员报告此问题。 - Jonatas Walker

我会将最后一行代码包裹在setTimeout调用中，这样它会在处理完pointermove事件之后被调用：window.setTimeout(function() { olDraw.setActive(hit); }, 0); - ahocevar

Answer 1

这是您的应用程序中的一个错误，而不是OpenLayers中的错误。您需要确保仅从矢量图层中检测要素，而不是从绘制层中检测。将您的forEachFeatureAtPixel函数更改为：

var feature = map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
  return feature;
}, null, function(layer) {
  return layer == vectorLayer
});

最后一个参数添加了一个图层过滤器，只在矢量图层上进行命中检测。

更新后的、可用的JSFiddle链接：http://jsfiddle.net/gmaq54dm/4/

- ahocevar

Answer 2

我同意@jonatas的看法，这似乎是一个错误。

不过，有一个解决方法似乎可以完成你的工作。

1. 避免使用多行字符串。这会使得ol3在鼠标悬停在要素上时更加复杂。
2. 使用vectorSource.forEachFeatureInExtent(，然后使用鼠标坐标创建一个小矩形，并在每个方向上添加几米。这将确保你的鼠标“mbr”落在要素内。 请注意，我使用鼠标坐标+-5米来构建mbr。你需要根据自己的要求进行调整。

查看fiddle here。

- pavlos