openlayers 鼠标移动显示弹框

OpenLayers是一个强大的JavaScript库，用于创建交互式地图应用。要在OpenLayers中实现鼠标移动时显示弹框，你可以通过监听`moveend`事件并在其中动态创建并显示信息弹框。下面是一个简单的示例：

var map = new ol.Map({
  target: 'map', // 容器id
  layers: [/* 添加你的图层 */],
  view: new ol.View({ center: [0, 0], zoom: 2 })
});

// 创建一个弹框实例
var infoBox = new ol.Overlay({
  element: document.createElement('div'), // 弹框元素
  position: function(pixel) {
    return map.getPixelFromCoordinate(map.forEachFeatureAtPixel(pixel, function(feature, resolution) {
      if (feature) {
        return feature.getGeometry().getCenter();
      }
      return null;
    }));
  },
  update: function(coordinate) {
    var content = '当前位置: (' + coordinate + ', ' + coordinate + ')';
    this.element.textContent = content;
  }
});

// 将弹框添加到地图上
map.addOverlay(infoBox);

// 监听鼠标移动事件
map.on('moveend', function(e) {
  infoBox.update(e.coordinate);
});

在这个例子中，当用户在地图上移动时，`moveend`事件触发，`infoBox.update`会被调用，它会获取当前鼠标的坐标，并在弹框中显示地理坐标信息。