OpenLayers-调整容器大小后重新绘制地图

在我的Web应用程序中，我希望使用户能够设置地图容器的大小。

当容器稍微扩展时，一切工作都很好（显然，这是因为边界后面的图块已加载）。但是，当容器显着扩展时（在下面的示例中，宽度从300像素扩展到1000像素），剩下的空白空间。

如何使地图重绘并适应新的尺寸？

在所有图层上调用redraw()都无济于事。放大和缩小都没有。

我用Opera，Chrome和Firefox中描述的结果对它进行了测试。
在IE8中，令人惊讶的是，问题没有发生，并且地图自动适应。

用于测试的简化网页：

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

    <script src="http://openlayers.org/api/OpenLayers.js"></script>
  </head>

  <body>
    <div id="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>

#1 楼

您需要调用API来更新地图尺寸。

http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize

这是我们的操作方法

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

您可以看到我们稍有延迟，但我不记得确切的原因，但是在调用API调整自身大小之前要稍等一下。

好吧，我相信延迟是您的应用程序特定的。 ;）无论如何，谢谢，我再次错过了文档中的内容。

–Imp
2012年8月14日12:32

我也没有看到延迟的原因，因此将其排除在外。谢谢

–zod
13年1月14日在11:56

@Vadim Great anser，但不适用于我。我的代码就像body onload = init（）一样，init初始化地图。是因为这个吗？另外，这将是响应式设计的好解决方案吗？ window.onload = window.onresize = function（）{//在这里调整大小。谢谢

– slevin
13年11月19日，0：07

我想知道setTimout是否试图使其仅每200ms调用一次。不幸的是，这有点复杂，需要有一个每200毫秒运行一次的setInterval，然后有一个布尔变量didResize，该值设置为true onresize（），并在调用map.updateSize（）之后设置为false。

– andrewb
2014年2月4日在6:06

setTimeout可能会确保加载地图并渲染dom的其余部分。由于缺乏对木偶视图生命周期的了解，我目前正在使用相同的技巧。

–ca0v
2015年3月30日14:44

#2 楼

是的，使用Vadim所说的map.updateSize（）（也不知道为什么会延迟！）地图容器的类，然后调用updateSize（）

function toggleFullScreen(mapContainer) {
    if ($(mapContainer).hasClass("normal")) {
        $(mapContainer).addClass("fullscreen").removeClass("normal");
    } else {
        $(mapContainer).addClass("normal").removeClass("fullscreen");
    }
    map.updateSize();
}

#3 楼

对第一个（正确）答案的另一条评论：

如果您等待window.resize事件，则需要timeout-Event。否则，如果用户开始调整窗口大小，则地图将每毫秒调整大小（Firefox需要使用该大小）。因此，如果要检查“窗口大小”，则超时是非常有用的响应。需要。请参阅：https：//stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac或jQuery调整大小结束事件

（对不起，我无法添加评论，因此有另一个答案）

#4 楼

不优雅，但对我来说很好用

window.onresize = function(event)
{
   map.zoomOut(); map.zoomIn();
}

这是唯一对我有用的答案

–马修·洛克（Matthew Lock）
17年11月24日在10:11

#5 楼

我尝试了此处描述的所有内容，但对我没有任何帮助。因此，我意识到当我在地图上放置“全屏”类时，未触发resize事件。
我使用以下方法解决此问题：

$(window).trigger('resize');

#6 楼

上面使用setTimeout的方式对我来说没有多大意义（可能是较旧的OL版本的解决方法），但是setTimeout可用于减少对map.updateSize（）和其他相关代码的调用次数this：

$(window).resize(function () {
  if (window.resizeMapUpdateTimer) {
    clearTimeout(window.resizeMapUpdateTimer)
  }
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 200)
})

#7 楼

我认为自动更改地图div的样式会更改地图面板的大小。

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

我希望它可以帮助您...

更改大小后，更改容器的大小属性仅适用于地图，但不适用于绘制的要素。添加updateSize（）确保功能可见。

–科德
2012年12月21日在9:47

#8 楼

这对我有用：

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

$ nextTick很重要，因为它可以等待下一次刷新，然后再考虑新的地图容器大小。 br />

编程黑洞网