OpenLayers：如何在侧边栏折叠后重绘地图？答案

【问题标题】：OpenLayers: How can I redraw a map after a sidebar is collapsed?OpenLayers：如何在侧边栏折叠后重绘地图？
【发布时间】：2017-07-27 14:06:34
【问题描述】：

我使用 OpenLayers 显示地图，使用 AdminLte 显示界面。

我的问题：当折叠给定页面上的主要左侧边栏时，所有框及其包含的内容都会改变大小（我真的不知道如何），因此地图也会变得更大。问题是，当它发生时，地图上显示的所有要素显然会改变位置，不再是它们应该在的位置。

我想要什么： 在侧边栏折叠后重新绘制地图。

有什么建议吗？

我试过了：

$('.navbar-collapse').on('shown.bs.collapse', function() {
    map.updateSize();
});

和：

$('.sidebar').on('shown.bs.collapse', function() {
   map.updateSize();
});

但无济于事......

编辑 2： 澄清一下：我认为解决我的问题的方法是在侧边栏完成折叠时调用 map.updateSize() 方法。问题是我不知道如何捕捉侧边栏完成折叠/展开的时刻！

【问题讨论】：

【解决方案1】：

我找到的一个临时解决方案是在触发侧边栏折叠的按钮时启动超时，然后调用map.updateSize()方法：

  $('.sidebar-toggle').click(function(){
      setTimeout(function(){ map.updateSize(); }, 500);             
  });

它可以工作......但它有点无聊：/

【讨论】：

【解决方案2】：

如果您尝试在侧边栏折叠后重绘地图，请将您的事件处理程序更改为以下内容：

$('.sidebar').on('hidden.bs.collapse', function() {
   map.updateSize();
});

根据here 事件处理程序列表，当折叠元素对用户隐藏时会触发hidden.bs.collapse 事件。

【讨论】：

抱歉，我对 OpenLayers 很陌生 :) 但是你的变量映射是什么？一个 ol.Map 对象？
您的变量将是您用来实例化地图的任何变量（无论是在同一文件中还是在其他位置）。在你的代码的某个地方，你必须有一些类似于var map = new OpenLayers.Map('map');的代码？
我愿意！ :) 但是当我尝试做 map.getSource().changed();我有： Uncaught TypeError: map.getSource is not a function。所以我查看了 API，显然 ol.Map 对象没有 .getSource() 方法。
这个完全有效，这是我一开始就想使用的方法。（c.f 我已经尝试过的两行）我的问题是我不知道何时调用此方法，因为我不知道如何捕捉侧边栏完成折叠/展开的时刻:)
您的新解决方案不起作用。由于某种原因，该功能从未被触发！

【解决方案3】：

我有同样的问题，使用 React 和一个类组件我的（糟糕的）解决方案是这样的：

shouldComponentUpdate = async () =>
  await new Promise(res =>
    setTimeout(() => {
      this.map.updateSize()
      res(false)
    }, 500)
  )

这很糟糕，因为调整大小会导致地图跳跃。如果有一种方法可以在不跳转的情况下调整地图大小，那将是非常酷的。

（500是我的抽屉关闭的动画时间）

【讨论】：