OpenLayers 4 要素图层悬停弹窗延迟问题求助

我完全懂你遇到的糟心情况——pointermove事件触发得太频繁，导致一堆无效的GetFeatureInfo请求，弹窗还经常和光标位置脱节。要实现光标停留在要素上0.5秒再触发弹窗的效果，核心思路是用定时器延迟执行请求，同时在鼠标移动时及时清除旧的定时器，避免冗余任务干扰。

下面是优化后的完整代码，我会拆解核心改进点：

// 全局变量保存定时器ID，用于清除未执行的延迟任务
let hoverTimer = null;
// 记录上一次请求的坐标，避免同一位置重复请求
let lastCoordinate = null;

map.on('pointermove', function(evt) {
  // 如果正在拖拽地图，直接清除定时器并清空弹窗，终止后续逻辑
  if (evt.dragging) {
    clearTimeout(hoverTimer);
    $('#info').html("");
    return;
  }

  const info = $('#info');
  const pixel = map.getEventPixel(evt.originalEvent);
  const feature = map.forEachLayerAtPixel(pixel, function(feature) {
    return true;
  }, null, function(layer) {
    return layer === pmfeatlayer;
  });
  const coordinate = evt.coordinate;
  const viewResolution = map.getView().getResolution();
  const projection = map.getView().getProjection();

  // 先清除之前的定时器，避免多个延迟任务同时执行
  clearTimeout(hoverTimer);

  if (feature) {
    // 对比当前坐标与上一次请求坐标，避免重复发起请求
    const coordStr = JSON.stringify(coordinate);
    if (coordStr === lastCoordinate) {
      return;
    }
    lastCoordinate = coordStr;

    // 设置0.5秒延迟，仅当鼠标停止移动足够时间后才执行请求
    hoverTimer = setTimeout(function() {
      const url = pmfeatlayer.getSource().getGetFeatureInfoUrl(
        coordinate, 
        viewResolution, 
        projection, 
        {'INFO_FORMAT': 'text/html'}
      );

      if (url) {
        const xhttp = new XMLHttpRequest();
        xhttp.open("GET", url, true);
        xhttp.send();
        xhttp.onreadystatechange = function () {
          if (xhttp.readyState === 4 && xhttp.status === 200) {
            const parser = new window.DOMParser();
            const res = parser.parseFromString(xhttp.responseText, "text/xml");
            const myitems = res.getElementsByTagName('item');
            
            if (myitems.length !== 0) {
              // 弹窗定位到当前鼠标停止的像素位置
              info.css({
                left: pixel[0] + 'px',
                top: pixel[1] + 'px'
              }).html("<div class='hoverPopup'>" + hover(xhttp.responseText) + "</div>").fadeIn(400);
            } else {
              info.html("");
            }
          }
        };
      }
    }, 500); // 0.5秒延迟，可根据需求调整时长
  } else {
    // 未检测到要素时，清空弹窗并重置坐标记录
    info.html("");
    lastCoordinate = null;
  }
});

// 监听鼠标移出地图事件，清除定时器并清空弹窗
map.getViewport().addEventListener('mouseleave', function() {
  clearTimeout(hoverTimer);
  $('#info').html("");
  lastCoordinate = null;
});

核心优化点说明： #

• 定时器延迟控制：每次pointermove触发时先清除旧定时器，只有鼠标停止移动满0.5秒，才会发起请求，从根源减少无效请求。
• 重复坐标过滤：记录上一次请求的坐标，若当前坐标与之前一致则直接跳过，避免同一位置重复请求。
• 拖拽状态处理：拖拽地图时直接终止逻辑，避免拖拽过程中触发不必要的请求和弹窗。
• 鼠标移出监听：鼠标离开地图范围时，及时清理定时器和弹窗，避免残留的延迟任务继续执行。
• 弹窗定位修正：确保弹窗基于鼠标停止时的像素位置定位，不会出现光标移开但弹窗才显示的错位问题。

另外，你原代码里的&&是HTML转义字符，在JavaScript中应该直接使用&&，我已经帮你修正了这个细节。

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