전체 화면 모드에서는 Openlayers 4 팝업 창이 표시되지 않습니다.

Question

안녕하세요. 다른 레이어를 표시 할 수있는지도가 있습니다. 레이어에 포함 된 각 기능을 클릭하면 해당 기능에 대한 정보가있는 팝업 창이 나타납니다. 모든 것이 정상적으로 작동하지만 FullScreen 모드에있을 경우 최대 z- 인덱스가 주어졌지만 팝업 창이 숨겨집니다 (전체 화면 모드로 숨김).

지도는 https://www.marinemammalhabitat.org/imma-eatlas/

사람이 일을 해결하는 나를 도울 수있는 다음 링크에서 온라인?

이 다음에 #info div에 대한

/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 { 
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

크롬에는 문제가 있지만 Firefox에는 문제가 없습니다. 내부적으로 전체 화면을 다르게 처리하기 때문입니다.

브라우저는 요소에 전체 화면을 적용합니다. OpenLayer의 전체 화면 컨트롤은 기본값의 맵 뷰포트를 선택합니다. 그러나 Firefox는 선택한 요소의 하위 요소가 아닌 요소를 숨기고 Chrome은 그렇지 않습니다. 팝업은 #map div의 하위 항목이 아니기 때문에 더 이상 팝업을 볼 수 없습니다.

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

가 대신 부모 상승의 부모 요소에게 자료 :

OL은 전체 화면 제어 (see api)의 대상 요소를 선택할 수 있습니다.

추신 : 전체 화면 API에 대한 자세한 내용은 developer.mozilla.org에서 확인할 수 있습니다.