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（）方法。问题是我不知道如何抓住侧边栏完成折叠/扩展的那一刻！

Answer 1

我发现一个临时解决方案是当按钮触发侧边栏崩溃然后调用map.updateSize（）方法时启动超时：

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

它有效...但它有点meh：/

Answer 2

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

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

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

Answer 3

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

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

这很糟糕，因为调整大小会导致地图跳转。如果有一种方法可以实现地图大小调整而无需跳转，那将非常酷。

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