OpenLayers:侧边栏折叠后如何重绘地图?

Question

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

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

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

有什么建议吗？

我试过了：

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

和：

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

但无济于事...

编辑：我的问题与此类似：OpenLayers：如何在地图div的流畅css渲染后重新对齐鼠标坐标和矢量图层，但他的解决方案对我不起作用:)

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

Answer 1

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

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

它有效...但这有点呵呵：/

Answer 2

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

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

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

Answer 3

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

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

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

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