OpenLayers 3拖拽操作中光标样式无法实时更新问题跟进

这种情况我之前也碰到过！问题出在OpenLayers默认的DragPan交互上——当你按住鼠标拖拽地图时，这个交互会接管事件流程，它内部的样式设置会覆盖你在pointerup/pointerdown事件里手动设置的光标，导致拖拽过程中光标一直不变，直到松开鼠标才切换。

要解决这个问题，我们需要直接监听拖拽交互的生命周期事件，而不是只依赖鼠标的pointer事件。下面是结合OpenLayers快速入门代码的完整修复方案：

步骤1：获取默认的拖拽交互实例 #

OpenLayers初始化地图时会自动添加DragPan交互，我们先把它找出来：

const dragPanInteraction = map.getInteractions().getArray().find(interaction => {
  return interaction instanceof ol.interaction.DragPan;
});

步骤2：监听拖拽的开始与结束事件 #

针对拖拽交互的dragstart和dragend事件设置光标样式，这两个事件会准确触发拖拽的开始和结束状态：

// 拖拽开始时，切换到"正在拖拽"的光标
dragPanInteraction.on('dragstart', () => {
  // 加入move作为兼容，部分老浏览器不支持grab/grabbing
  map.getTargetElement().style.cursor = 'grabbing, move';
});

// 拖拽结束后，恢复到"可拖拽"的光标
dragPanInteraction.on('dragend', () => {
  map.getTargetElement().style.cursor = 'grab, move';
});

步骤3：处理非拖拽状态的光标显示 #

为了让光标在鼠标悬停地图但未拖拽时也能正确显示，我们再添加上鼠标进入/离开的监听：

// 鼠标进入地图区域，且拖拽交互启用时，显示可拖拽光标
map.getTargetElement().addEventListener('pointerenter', () => {
  if (dragPanInteraction.getActive()) {
    map.getTargetElement().style.cursor = 'grab, move';
  }
});

// 鼠标离开地图区域，恢复默认光标
map.getTargetElement().addEventListener('pointerleave', () => {
  map.getTargetElement().style.cursor = '';
});

完整的可运行示例 #

把以上代码整合到快速入门的代码里，就是这样：

<!DOCTYPE html>
<html>
<head>
  <title>OpenLayers 3 Drag Cursor Fix</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
  <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map" class="map"></div>
  <script>
    const map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 4
      })
    });

    // 获取默认的拖拽交互
    const dragPanInteraction = map.getInteractions().getArray().find(interaction => {
      return interaction instanceof ol.interaction.DragPan;
    });

    // 拖拽事件监听
    dragPanInteraction.on('dragstart', () => {
      map.getTargetElement().style.cursor = 'grabbing, move';
    });

    dragPanInteraction.on('dragend', () => {
      map.getTargetElement().style.cursor = 'grab, move';
    });

    // 鼠标进出事件监听
    map.getTargetElement().addEventListener('pointerenter', () => {
      if (dragPanInteraction.getActive()) {
        map.getTargetElement().style.cursor = 'grab, move';
      }
    });

    map.getTargetElement().addEventListener('pointerleave', () => {
      map.getTargetElement().style.cursor = '';
    });
  </script>
</body>
</html>

这个方案的核心是直接和OpenLayers的拖拽交互绑定，而不是只处理底层的鼠标事件，这样就能确保拖拽过程中光标样式实时更新了。

内容的提问来源于stack exchange，提问作者Psymøn