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

Question

我正在使用 OpenLayers 来显示地图，并使用 AdminLte 作为界面。

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

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

有什么建议吗？

我试过了：

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

和：

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

但无济于事...

编辑： 我的问题与此类似：OpenLayers: How to re-align mouse coordinates and vector layers after fluid css rendering of map div 但他的解决方案对我不起作用:)

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

Answer 1

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

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

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

Answer 2

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

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

它有效……但有点无聊:/

Answer 3

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

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

这很糟糕，因为调整大小会导致地图跳跃。如果有一种方法可以在不跳转的情况下实现地图大小调整，那就太棒了。

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

OpenLayers: How can I redraw a map after a sidebar is collapsed?