[英]Mouse over open popup, mouse out close popup, popup moue over should not close popup
[英]Close popup overlay after dragging over a feature
当我将鼠标拖到地图中的矢量要素上时,会出现一个弹出窗口。 此弹出窗口基于两个OpenLayers示例: OpenLayers示例#1和OpenLayers示例#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 = ' ';
}
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);
});
是否有特殊原因会通过弹出显示弹出窗口,但我建议将“选择交互”与指针移动一起使用。
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();
}
});
好吧,我解决了我的问题。 我补充说:
overlay.setPosition(undefined);
closer.blur();
return false;
到本节的else条件:
if (feature) {
content.innerHTML = 'Feature value:\n' + feature.get('ZLEVEL');
overlay.setPosition(coordinate);
} else {
////// HERE //////
}
现在,当我的光标不在某个要素上时,弹出窗口会自动关闭。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.