OpenLayers - redibujando el mapa después de cambiar el tamaño del contenedor

24

En mi aplicación web, quiero permitir que los usuarios establezcan el tamaño del contenedor del mapa.

Todo funcionó bien cuando el contenedor se expandió ligeramente (aparentemente esto se debe a que las baldosas que estaban justo detrás del borde ya estaban cargadas). Sin embargo, cuando el contenedor se expande significativamente (en el siguiente ejemplo, de 300 a 1000 px de ancho), queda un espacio en blanco.

¿Cómo hacer que el mapa se vuelva a dibujar y adaptarse al nuevo tamaño?

Llamar a redraw() en todas las capas no ayudó. Tampoco hizo zoom dentro y fuera.

Probé esto con los resultados descritos en Opera, Chrome y Firefox. En IE8, sorprendentemente, el problema no se produjo y el mapa se adaptó automáticamente.

Una página web simplificada para pruebas:

<html>
  <head>
    <style>
      #mapbox { 
        width: 300px;
        height: 500px;
        border: 1px solid black;
      }
    </style>

    <script src="http://openlayers.org/api/OpenLayers.js"></script></head><body><divid="mapbox"></div>
    <input type="button" id="test" value="resize">

    <script>    
      var map = new OpenLayers.Map('mapbox');
      map.addLayer(new OpenLayers.Layer.OSM());      

      map.setCenter(
        new OpenLayers.LonLat(1000000, 7000000), 5);

      document.getElementById('test').onclick = function() {
        document.getElementById('mapbox').style.width = '1000px';
      }
    </script>
  </body>
</html>
    
pregunta Imp 13.08.2012 - 20:01

8 respuestas

33

Debes llamar a la API para actualizar el tamaño del mapa.

enlace

Así es como lo hacemos

window.onresize = function()
{
  setTimeout( function() { map.updateSize();}, 200);
}

Puede ver que hicimos una pequeña demora y, sinceramente, no recuerdo la razón exacta del motivo, pero tuvimos que esperar un poco antes de llamar a la API para cambiar el tamaño.

    
respondido por el Vadim 13.08.2012 - 21:01
8

Sí, use map.updateSize () como dice Vadim (¡tampoco estoy seguro de por qué el retraso!) documentación

Normalmente pongo un botón de alternar de pantalla completa en los mapas, que funciona simplemente cambiando la clase css del contenedor de mapas y luego llamando a updateSize ()

function toggleFullScreen(mapContainer) {
    if ($(mapContainer).hasClass("normal")) {
        $(mapContainer).addClass("fullscreen").removeClass("normal");
    } else {
        $(mapContainer).addClass("normal").removeClass("fullscreen");
    }
    map.updateSize();
}
    
respondido por el andyb 14.08.2012 - 12:21
2

No es elegante, pero funcionó bien para mí

window.onresize = function(event)
{
   map.zoomOut(); map.zoomIn();
}
    
respondido por el JFHack 22.01.2014 - 08:58
1

Otro comentario a la primera respuesta (correcta):

El evento de tiempo de espera es necesario si espera el evento window.resize. De lo contrario, el mapa cambiará de tamaño cada milisegundos si un usuario comienza a cambiar el tamaño de la ventana (lo necesitaba para Firefox). Por lo tanto, si desea verificar el tamaño de la ventana, el tiempo de espera es bastante útil resp. necesario. Consulte: enlace o evento final de cambio de tamaño de jQuery

(lo siento, no puedo agregar un comentario, por lo tanto, otra respuesta)

    
respondido por el leole 12.06.2014 - 07:45
1

Probé todas las cosas que se describen aquí, pero nada me funcionó. Entonces, me di cuenta de que cuando estaba colocando una clase de 'pantalla completa' en el mapa, el evento de cambio de tamaño no se había activado. Arreglo esto con:

$(window).trigger('resize');
    
respondido por el nicolasaiz173 04.09.2014 - 19:13
1

La forma en que se usa setTimeout anteriormente no tiene mucho sentido para mí (quizás una solución alternativa para una versión OL más antigua), pero se puede usar setTimeout para reducir el número de llamadas a map.updateSize (), y otras código asociado como este:

$(window).resize(function () {
  if (window.resizeMapUpdateTimer) {
    clearTimeout(window.resizeMapUpdateTimer)
  }
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 200)
})
    
respondido por el Simon Hutchison 02.05.2018 - 07:54
0

Creo que cambiar el estilo de la división del mapa automáticamente cambiará el tamaño del panel del mapa.

document.getElementById("map-panel").style.width = "500px";

espero que te ayude ...

    
respondido por el Aragon 14.08.2012 - 09:48
0

Esto está funcionando para mí:

this.$nextTick(
    function() {
        OL_MAP_INSTANCE.updateSize();
    }
);

El $ nextTick es importante porque permitirá esperar la próxima actualización antes de tener en cuenta el nuevo tamaño del contenedor del mapa.

    
respondido por el Doctor 07.08.2018 - 15:11

Lea otras preguntas en las etiquetas