Openlayers 4 弹出窗口 window 在全屏模式下不显示

Question

您好，我有地图可以显示不同的图层。通过单击层中包含的每个要素，将出现一个弹出窗口 window，其中包含有关该要素的信息。一切正常，但如果我在全屏模式下，弹出窗口 window 被隐藏（它被调用但被全屏模式隐藏），尽管给它一个最大的 z-index。

地图在线如下link https://www.marinemammalhabitat.org/imma-eatlas/

谁能帮我解决这个问题？谢谢

弹出窗口的代码如下window:

/code to show popups containing layer's features
var info = document.getElementById('info');
var target = document.getElementById('map');
function displayFeatureInfo(pixel) {
        info.style.left = '30%';
        info.style.top = '20%';
        info.style.height = 300 + 'px';

        var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
            return feature;
        });
        if (feature) {
            var geometry = feature.getGeometry();
            var coord = geometry.getCoordinates();
    var text = '<table><tbody>';
   //if (feature.get('AOI')) {text += '<tr><td> <h2> ' + feature.get('AOI') + '</h2></td></tr>';} else {text += '';}
    text += '<tr><td style="background-color: rgba(140, 177, 222, 0.5);"> <h2> ' + feature.get('Title') + '</h2></td></tr>';
    text += '<tr><td><strong>Summary: </strong>' + feature.get('Summary') + '</h2></td></tr>';
    text += '<tr><td style="background-color: rgba(140, 177, 222, 0.5);"><strong>Region:</strong> ' + feature.get('Region') + '</td></tr>';
    if (feature.get('AOI')) {text += '';} else {
    text += '<tr><td> <strong>Criteria:</strong> ' + feature.get('Criteria') + '</td></tr>';
    }
    if (feature.get('AOI')) {text += '';} else {  
    text += '<tr><td style="background-color: rgba(140, 177, 222, 0.5);"> <strong>Species:</strong> ' + feature.get('Species') + '</td></tr>';
    }
    if (feature.get('Status')) {text += '<tr><td> <strong>Status:</strong> ' + feature.get('Status') + '</td></tr>';} else {text += '';}
    if (feature.get('URL')) {text += '<tr><td> <a href=" ' + feature.get('URL') + '"> MORE INFO </a></td></tr>';} else {text += '<tr><td> </td></tr>';}
    //text += '<tr><td> <a href = "https://www.marinemammalhabitat.org/portfolio-item/under-maintenance/" target = "_blank"> MORE INFO</a> </td></tr>';
    text += '</tbody></table>';
            info.style.display = 'none';
            info.innerHTML = text;
            info.style.display = 'block';
            target.style.cursor = "pointer";
        } else {
            info.style.display = 'none';
            target.style.cursor = "";
        }
    }

map.on('click', function(evt) {
        if (evt.dragging) {
            info.style.display = 'none';
            return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);
});
//ends code for popups

CSS #info div 如下：

#info {
position: absolute;
z-index: 2147483647;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
color: #000000;
padding: 10px;
font-size: 14px;
font-weight:500;
top: 20%;
left: 30%;
/*pointer-events: none;*/
overflow-y: scroll;
display:none;}

添加到地图的FullScreen控件如下：

var map = new ol.Map({
    target: 'map',
    layers: [],
    controls: [
        //Define the default controls
        new ol.control.Zoom(),
        new ol.control.Attribution(),
        //Define some new controls
        new ol.control.ZoomSlider(),
        new ol.control.MousePosition({
        projection: 'EPSG:4326',
        coordinateFormat: function (coordinate) {
                return 'Coordinates: ' + 'Lat ' + ol.coordinate.format(coordinate, '{y}', 3) + ' Long ' + ol.coordinate.format(coordinate, '{x}', 3);
            },
            target: 'coordinates'
        }), 
        new ol.control.ScaleLine(),
        new ol.control.OverviewMap(),
        new ol.control.FullScreen(),
        new app.Legend()
    ],
    view: view
});

Answer 1

Chrome 中不存在该问题，但在 Firefox 中存在。这是因为他们内部处理全屏的方式不同。

浏览器将全屏应用到元素。 OpenLayer 的全屏控件默认选择地图视口。但是，Firefox 似乎隐藏了不是该选定元素的子元素的元素，而 Chrome 则没有。由于弹出窗口不是#map div 的子项，您再也看不到弹出窗口了。

OL 允许您为全屏控件选择目标元素 (see api):

var fullscreenTarget = document.getElementById('info').parentElement;
new ol.control.FullScreen({
  source: fullscreenTarget
});

不是升到父元素，而是给父元素一个 id。

PS：您可以在 developer.mozilla.org 上阅读有关全屏 API 的更多信息。

Openlayers 4 弹出窗口 window 在全屏模式下不显示

Openlayers 4 popup window doesn't show if in full-screen mode

fullscreen

popupwindow

openlayers