OpenLayers 6-全窗口弹出

Question

我正在将OpenLayers2脚本转换为Openlayers 6，基本上进展顺利，但有一件事我遇到了问题。

我需要显示一个位于地图顶部并占据整个浏览器窗口的弹出窗口，这样无论是否设置了地图的视图坐标，它都会遮挡整个可见的地图区域。弹出窗口将具有(可能)白色背景和在窗口中水平和垂直居中的简短文本消息。

通过调用Javascript函数，从C++代码创建/显示和销毁/关闭弹出窗口。

在OpenLayers 2中，我成功地做到了这一点，使用

    html = "<h1 style='text-align:center;color:black;'><br><br>";
    html += text;
    html += "</h1>";

    // Create the popup and add it to the map
    popup = new OpenLayers.Popup(null, // no id
                                 null, // no long and lat position
                                 map.getSize(), // size is the whole visible map area
                                 html, // text to display
                                 false, // no close box
                                 null); // no callback
    map.addPopup(popup);

只需提供map.getSize()就可以使弹出窗口充满整个屏幕。

但是，在版本6中没有大小，且OpenLayers.Overlay似乎需要特定最长和最新位置，且似乎没有OpenLayers.Popup参数。

在Openlayers 6中实现这个完整的窗口弹出窗口的最佳方式是什么？

Answer 1

感谢您关于创建自定义控件的建议，但一个简单的解决方案是创建一个具有较高z值的新div，并应用必要的样式使其填充窗口并使文本水平和垂直居中。垂直居中是最棘手的，我选择使用flex。我还必须添加position、left和top才能在Edge/webview2中工作。当窗口调整大小时，它可以很好地调整。

    mypopup = document.getElementById("mypopup");
    mypopup.style.display = "flex";
    mypopup.style.justifyContent = "center";
    mypopup.style.alignItems = "center";
    mypopup.style.width = "100vw";
    mypopup.style.height = "100vh";
    mypopup.style.zIndex = "9000";
    mypopup.style.position = "absolute"; // have to add this for webview2
    mypopup.style.left = "0px"; // have to add this for webview2
    mypopup.style.top = "0px"; // have to add this for webview2
    mypopup.style.visibility = "visible"; // or "hidden"