openlayer3 地图容器发生变化后,canvas display 为 none

今天支持泰国的一个WFM项目,GIS部分用的是openlayers,开源的东西好处是可以无版权、直接能拿到源代码,坏处是经常会碰到莫名其妙的坑,今天就碰到一个.

今天这个不是openlayers的bug.

问题场景: 我们的页面上有一个Tab,分别有3个菜单,第一个是GIS,第二个是甘特图

(1)点击甘特图tab,再点击gis的tab,地图照常显示;

(2)点击甘特图tab,再点击tab里面的数据,左侧弹出信息框(gis模块的div会发生微小变化),再点击gis,地图不显示,并且不可操作,查看html,有个canvas的标签多了一个属性:display:none;

查询了一大推,找不到原因,最后怀疑是没有正确使用openlayer,翻墙google了一下,终于找到解决办法,就是但地图的大小发生变化时,必须要执行updateSize这个方法.

参考:https://github.com/openlayers/openlayers/issues/4601

openlayer官方说明:

updateSize()

Force a recalculation of the map viewport size. This should be called when third-party code changes the size of the map viewport.