OpenLayers-添加overlay图层时位置发生偏移BUG

第一种方案:

说明：

在做项目过程中，用overlay做了一个infowindow弹窗，但是在使用过程中发现一个bug：overlay.setPosition以后，会出现偏移，但是拖动一下地图或者点击一下地图其他地方就回到正确的位置。

代码如下：

            let overlay = new ol.Overlay({
                id: "overlay",
                element: "marks",
                positioning: "bottom-center",
                stopEvent: _stopEvent ? _stopEvent : false
            });        

过程：

研究发现positioning改成默认（top-left）就没问题，紧接着试了其他几个参数center-center，bottom-left等，凡是设了center的都会有这个问题。

#参数：'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', 'top-right'

推测overlay在渲染center时有点bug

解决方案：

将overlay的positioning设置在加载后，即可

            let overlay = new ol.Overlay({
                id: "overlay",
                element: "marks",
                //positioning: _position, //这里注释掉
                stopEvent: _stopEvent ? _stopEvent : false
            });
            overlay.setPosition([_x,_y]);
            map.addOverlay(overlay);
            //解决overlay渲染center时出现偏移的问题
            overlay.setPositioning("bottom-center");    

第二种解决方案：
 

问题描述

在使用openlayers添加图层时，设置positioning属性为‘bottom-center’，但图层元素没有按照设想的效果展示，而是偶发的显示为‘bottom-left’的效果，这时候再进行地图的拖动或者缩放，显示效果就能回归正常。
发现这个问题后，上网搜索引起这个BUG的原因和解决方法，然后找到了这篇博客，博主遇到的问题情况与我相同，我尝试了博文中的解决方案，但是没有生效。

this.clickoverlay = new ol.Overlay({
                element: document.getElementById("click-box"),
                offset: [0, -50],
                //positioning: 'bottom-center',
                zIndex: 999,
            });

解决问题

发现网上找不到合适的解决方案后，我尝试过不使用center，然后修改页面效果，但是领导不满意修改后的效果。。
然后我想到每次出现偏移时，进行地图缩放或者拖动时都会恢复正常，那我是不是可以在添加完图层后刷新一下地图从而实现想要的效果呢，结果就是成功了，在图层渲染完毕后通过回调调用地图刷新函数（这里有子组件的渲染，所以这边是通过生命周期钩子函数配合自定义事件完成），然后显示效果就正常了。

更改后的代码

	changeVisible(){
            this.clickBoxVisible = true
            this.map.updateSize() //更新地图的函数
        }