OpenLayers 6中实现光标离开地图及进入控件时隐藏跟随圆

我明白你在OL6里遇到的困扰——旧版依赖canvas的mouseleave监听器在新版里行不通了，毕竟现在OL6可能用WebGL渲染，canvas不一定存在，而且viewport的事件传播也被框架封装处理了。不过别担心，我们可以结合OL的地图事件和原生DOM事件来实现需求，具体步骤如下：

核心思路 #

我们需要处理两种场景：

1. 光标完全离开地图区域时隐藏圆形
2. 光标进入地图控件（ol.control）时隐藏圆形，离开控件回到地图区域时重新显示

具体实现代码 #

假设你的跟随圆形是一个ol.Overlay（如果是自定义DOM元素，逻辑类似）：

1. 先定义你的跟随圆形Overlay #

// 假设页面上有个id为cursor-circle的DOM元素作为跟随圆形
const cursorCircle = new ol.Overlay({
  element: document.getElementById('cursor-circle'),
  positioning: 'center-center', // 让圆形中心对准光标位置
});
map.addOverlay(cursorCircle);

2. 处理光标离开整个地图的情况 #

利用OL地图的pointerleave事件，当光标离开地图viewport时直接隐藏圆形：

map.on('pointerleave', () => {
  cursorCircle.getElement().style.display = 'none';
});

3. 处理光标在地图上的显示与位置更新 #

通过pointermove事件，在光标在地图上移动时显示圆形并更新其位置：

map.on('pointermove', (evt) => {
  // 默认显示圆形（除非光标在控件上，后续会处理）
  cursorCircle.getElement().style.display = 'block';
  // 更新圆形到当前光标对应的地图坐标
  cursorCircle.setPosition(evt.coordinate);
});

4. 处理光标进入控件的情况 #

这里推荐用事件委托的方式，直接在地图viewport上监听，不管后续添加多少控件都能生效：

const viewport = map.getViewport();

// 监听进入控件的事件（用捕获阶段确保优先触发）
viewport.addEventListener('pointerenter', (evt) => {
  // 判断当前目标是否是控件或控件的子元素
  if (evt.target.closest('.ol-control')) {
    cursorCircle.getElement().style.display = 'none';
  }
}, true);

// 监听离开控件的事件
viewport.addEventListener('pointerleave', (evt) => {
  if (evt.target.closest('.ol-control')) {
    // 检查光标是否回到了地图viewport范围内
    const rect = viewport.getBoundingClientRect();
    const { clientX, clientY } = evt;
    if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
      cursorCircle.getElement().style.display = 'block';
    }
  }
}, true);

为什么这个方案可行？ #

• OL6的pointerleave事件会在光标完全离开地图viewport时触发，覆盖了旧版canvas的mouseleave场景
• 事件委托监听.ol-control类的元素，不需要关心控件是预定义还是后期添加的，兼容性更好
• 通过检查光标位置，确保离开控件后只有回到地图区域才重新显示圆形，避免误触发

内容的提问来源于stack exchange，提问作者anste