Question

当我将鼠标拖到地图中的矢量要素上时，会出现一个弹出窗口。此弹出窗口基于两个OpenLayers示例：OpenLayers example #1和OpenLayers example #2。

当鼠标不再位于功能上时，我希望弹出窗口自动关闭。知道我怎么能实现这个目标？

实际上，这是我的代码：

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
  }));

closer.onclick = function() {
    overlay.setPosition(undefined);
    closer.blur();
    return false;
  };

var highlightStyleCache = {};

var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: olMap,
    style: function(feature, resolution) {
      var text = resolution < 5000 ? feature.get('name') : '';
      if (!highlightStyleCache[text]) {
        highlightStyleCache[text] = new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: '#f00',
            width: 1
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.1)'
          }),
          text: new ol.style.Text({
            font: '12px Calibri,sans-serif',
            text: text,
            fill: new ol.style.Fill({
              color: '#000'
            }),
            stroke: new ol.style.Stroke({
              color: '#f00',
              width: 3
            })
          })
        });
      }
      return highlightStyleCache[text];
    }
});

var highlight;
var displayFeatureInfo = function(pixel,coordinate) {

    var feature = olMap.forEachFeatureAtPixel(pixel, function(feature) {
      return feature;
    });

    // var info = document.getElementById('info');
    if (feature) {
        content.innerHTML = 'Feature value:\n' + feature.get('ZLEVEL');
        overlay.setPosition(coordinate);
    } else {
      // info.innerHTML = '&nbsp;';
    }

    if (feature !== highlight) {
      if (highlight) {
        featureOverlay.getSource().removeFeature(highlight);
      }
      if (feature) {
        featureOverlay.getSource().addFeature(feature);
      }
      highlight = feature;
    }

  };

var olMap = new ol.Map({
    layers: [group, group3, group2],
    overlays: [overlay],
    target: "map",
    view: new ol.View({
        center: ol.proj.transform([-71.16237,48.42432], "EPSG:4326", "EPSG:3857"),
        zoom: 14,
        projection: "EPSG:3857"
    })
}); 

olMap.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;
    }
    var pixel = olMap.getEventPixel(evt.originalEvent);
    var coordinate = evt.coordinate;
    displayFeatureInfo(pixel,coordinate);
  });

Answer 1

是否有特殊原因通过拖动显示popop，但我建议使用与指针移动选择交互。

var selectinteraction = new ol.interaction.Select({
      condition: ol.events.condition.pointerMove,//maybe ther is a drag?
      layers: [**your vectorlayer**]
});

创建selectinteraction后，您可以挂钩事件。请注意，以下只是伪代码。

selectinteraction.on('select', function (e) {
    e.target.getFeatures().forEach(function (feature, index) {
        //if xou eant to show some selected feature stuff
        closer.setPopupInformation(feature);
        closer.show();
    });
    //if select is empty as your mouse isn't on a feature element, close the popup
    if (e.target.getFeatures().getLength() === 0) {
        closer.hide();
    }
});

Answer 2

好的我解决了我的问题。我补充说：

overlay.setPosition(undefined);
closer.blur();
return false;

到本节的其他条件：

if (feature) {
    content.innerHTML = 'Feature value:\n' + feature.get('ZLEVEL');
    overlay.setPosition(coordinate);
} else {
////// HERE //////
}

现在，当光标不在某个功能上时，弹出窗口会自动关闭。

拖动某个要素后关闭弹出式叠加层

2 个答案: