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

25

在我的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>

openlayers-2 javascript

— 小鬼
source

35

您需要调用API来更新地图大小。

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

这是我们的方法

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

您会看到我们做了些许延迟，说实话，我不记得确切的原因，但是在调用API调整自身大小之前，我们不得不稍等一下。

— 瓦迪姆
source

1

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

— Imp

1

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

— zod

1

@Vadim Great anser，但不适用于我。我的代码就像body onload=init()并init初始化地图。是因为这个吗？另外，这将是响应式设计的好解决方案吗？window.onload=window.onresize=function(){//resize here。谢谢

— slevin

我想知道setTimout是否试图使其仅每200ms调用一次。不幸的是，这有点复杂，需要setInterval每200毫秒运行一次，然后将布尔值var didResize设置为true onresize()，然后将其设置为falseafter map.updateSize()才被调用。

— andrewb 2014年

1

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

— ca0v 2015年

8

是的，按照Vadim所说使用map.updateSize（）（也不确定为什么会延迟！）文档

我通常在地图上放置一个全屏切换按钮，只需切换地图容器的css类，然后调用updateSize（）即可使用

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

— 安迪
source

2

不优雅，但对我来说效果很好

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

— 杰夫·哈克
source

这是唯一对我

— Matthew Lock

2

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

如果您等待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调整大小结束事件

（对不起，我无法添加评论，因此没有其他答案）

— ole
source

1

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

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

— nicolasaiz173
source

1

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

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

— 西蒙·哈奇森
source

0

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

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

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

— 阿拉贡
source

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

— kode 2012年

0

这为我工作：

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

$ nextTick很重要，因为它将允许等待下一次刷新，然后再考虑地图容器的新大小。

— 医生
source