javascript - OpenLayers6检测光标何时离开地图

Question

当光标离开地图时，我想隐藏一个附加到光标的圆圈。当光标进入 时，这个圆圈也必须ol.control隐藏。在较旧的 OL 版本中，我只是mouseleave为对象添加了一个侦听器canvas，但在 OL6 中，不能保证存在画布，并且对于下面的所有元素，这些基本事件的传播似乎都停止了ol-viewport。

如何在 OL6 中实现这种行为？

Answer 1

您将需要单独的控件侦听器。我的上下文菜单代码（在控件上不活动）看起来像

var controlOver = false;

function setControlOver(element) {
    element.addEventListener('mouseover', function() { controlOver = true; });
    element.addEventListener('mouseout', function() { controlOver = false; });
}

setTimeout(function() {
    var controls = map.getViewport().getElementsByClassName('ol-control');
    for (var i=0; i<controls.length; i++) {
        setControlOver(controls[i]);
    }
    map.getControls().on('add', function(e) {
        // ????? setControlOver(e.element.getElement());
    });
}, 250);

map.getOverlays().on('add', function(e) {
    setControlOver(e.element.getElement());
});

var canvas = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0];

canvas.addEventListener('contextmenu', function (e) {
    if (!controlOver) {
        e.preventDefault();
        openContextMenu(e.x, e.y);
    }
});