Openlayers映射在初始加载时未正确调整大小。手动浏览器调整大小后调整大小

Question

我有一个相当基本的openlayers（版本3.7.0）映射嵌入在使用dojo工具包（版本1.10.4）创建的HTML页面中。所有组件都会加载，但初始映射会被拉伸。调整浏览器窗口大小后，地图会正确调整大小并且拉伸问题会消失。看起来好像发生这种情况是因为在完成各种HTML元素渲染/调整大小之前加载了地图。我是CSS新手，所以我不是百分百肯定。

下面是两个屏幕截图，一个显示地图首次加载时的显示方式，第二个显示手动调整浏览器后的结果。

拉伸地图 手动浏览器调整大小后正确的地图显示

可以访问实时应用程序here。

可以访问应用程序的CSS here。

可以找到地图的javascript here。

Answer 1

在twitter-bootstrap和响应式全宽/高度地图上出现同样的问题。您可以尝试使用map.updateSize()或map.setSize()

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

也许有帮助。对我而言，事实并非如此，我使用jquery $(window).height();为map-container添加正确的高度。

Answer 2

我不是100％肯定，但可能是地图在DOMContent完成加载之前尝试渲染。发布DOMContentLoaded后创建地图修复了我们在OpenLayers 3上的问题。

document.addEventListener('DOMContentLoaded', function () {
  var map = new ol.Map({
  // ...
});