拖动特征后关闭弹出式覆盖图

我有一个弹出窗口，当我将鼠标拖到我的地图中的矢量特征时出现。此弹出窗口基于两个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); 
    });

来源

2016-02-02 kaycee

是否有该POPOP通过拖动出现一个特殊的原因，但我会建议使用选择的互动与pointermove。

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(); 
    } 
});

来源

2016-02-03 11:10:45 foedchr

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

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

本节的其他条件：

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

现在弹出自动关闭时，我的光标不在一个特点。

来源

2016-02-03 14:17:26 kaycee

拖动特征后关闭弹出式覆盖图

回答

相关问题