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

Question

嗨，我有可以显示不同层的地图。通过单击"层"中包含的每个功能，出现了一个弹出窗口，其中包含有关该功能的信息。一切正常，但是如果我处于全屏模式，则隐藏了弹出窗口（但被全屏模式隐藏了），尽管给了最大的z索引。

。

该地图在以下链接上在线https://www.marinemammalhabitat.org/imma-eatlas/

有人可以帮助我解决问题吗？谢谢

以下是弹出窗口的代码：

/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 

#infodiv的CSS如下：

#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;}

在地图中添加的全屏控件如下：

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可让您为全屏控件选择一个目标元素（请参阅API）：

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

而不是向父母升级，而是给父元素一个id。

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