Question

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

地图通过以下链接在线 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

#info div的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;}

添加到地图的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上阅读有关Fullscreen API的更多信息。

如果处于全屏模式，Openlayers 4弹出窗口不会显示

1 个答案: