问题描述
在使用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() //更新地图的函数
}