Estoy convirtiendo un script de Openlayers 2 a OpenLayers 6 y en su mayoría va bien, pero hay una cosa con la que tengo un problema.
Necesito mostrar una ventana emergente que se encuentra en la parte superior del mapa y ocupa toda la ventana del navegador, de modo que oculta toda el área visible del mapa, independientemente de si se establecieron las coordenadas de vista del mapa. La ventana emergente tendría (probablemente) un fondo blanco y un breve mensaje de texto centrado horizontal y verticalmente en la ventana.
La ventana emergente se crea/muestra y destruye/cierra desde el código C++, mediante una llamada a una función Javascript.
En OpenLayers 2 logré hacer esto bien usando
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);Simplemente proporcionar map.getSize() parece ser todo lo que se necesita para que la ventana emergente llene la pantalla.
Sin embargo, en la versión 6 no hay OpenLayers.Popup, y OpenLayers.Overlay parece necesitar una posición larga y lat específica y no parece tener un parámetro de tamaño.
¿Cuál es la mejor manera de lograr esta ventana emergente completa en Openlayers 6?
Gracias por la sugerencia sobre la creación de un control personalizado, pero una solución simple es simplemente crear un nuevo div con un valor z más alto y aplicar los estilos necesarios para que llene la ventana y el texto esté centrado horizontal y verticalmente. El centrado vertical fue el más complicado y opté por usar flex. También tuve que agregar posición, izquierda y arriba para que funcionara en Edge/webview2. Se ajusta muy bien cuando se cambia el tamaño de la ventana.
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"