说明:

在做项目过程中,用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 Overlay导致偏移的更多相关文章

  1. Openlayers Overlay加载gif图片

    说明: 项目中使用vector图层做图片撒点功能,发现加载gif没有效果.网上查找资料发现,openlayers不支持gif图片样式. 后面采用overlay的方式,gif图片赋值给DOM元素 解决方 ...

  2. Openlayers Overlay使用心得

    Overlay在Openlayers里是浮动层的概念,区别于vector这样的图层,通常用于弹窗.撒点.以及解决加载icon样式不支持的gif等格式图片. 此次用overlay的过程中遇到很多问题,在 ...

  3. Openlayers Projection导致经纬度颠倒问题

    问题: openlayers3调用TileWMS接口,实现Openlayers加载Geoserver转发的ArcGIS切片时,web墨卡托(wkid3857)没有问题,但是WGS84(wkid4326 ...

  4. Unity3D 利用欧拉角实现实体的旋转

    本文系作者原创,转载请注明出处 刚刚入门U3D,也是很多东西搞不懂,最先接触的就是自己尝试去获取键盘上的GetPress之类的事件了吧 官方的API DOC也是帮了不少忙,到处吸收了各位博主的文章也是 ...

  5. 样式布局与 BFC

    一.几类视图 内联视图:inline 单行 块级视图:block 换行,有高度 行内块级视图:inline-block 单行,有高度 二.几类布局 块级布局 换行,通过设置 margin 水平居中 & ...

  6. oo第一次作业

    前言: 这是一篇面向对象作业总结,作业内容是对多项式进行求导,一共有三个阶段,具体要求不详述,第一阶段只要求’+’连接coeff*x^pow的形式,第二次支持*连接的幂函数及三角函数,第三次则需要支持 ...

  7. U3D Transform用法

    最近在学习unity3d,下面对Transform类做一个小结 一.常用属性和方法 1.1 常用属性: 用代码展示一下上面的一些属性,值得注意的是myCube是mySphere的父物体 using U ...

  8. 在WPF中实现平滑滚动

    WPF实现滚动条还是比较方便的,只要在控件外围加上ScrollViewer即可,但美中不足的是:滚动的时候没有动画效果.在滚动的时候添加过渡动画能给我们的软件增色不少,例如Office 2013的滚动 ...

  9. lua垃圾回收之空表

    故事背景: 自己手动手写的一个lua外部库luaopen_xxx,采用了tolua++1.0.93,编译后得到xxx.dll,当在luajit中require 'xxx'后是正常的,但如果运行环境换成 ...

随机推荐

  1. TCP Socket服务端客户端(二)

    本文服务端客户端封装代码转自https://blog.csdn.net/zhujunxxxxx/article/details/44258719,并作了简单的修改. 1)服务端 此类主要处理服务端相关 ...

  2. spring cloud Ribbon的使用和实现原理

    转载链接:https://blog.csdn.net/qq_20597727/article/details/82860521 简介 这篇文章主要介绍一下ribbon在程序中的基本使用,在这里是单独拿 ...

  3. 前端技术之:JavaScript Test 断言库

    expect 声称可以写更好的断言. https://github.com/mjackson/expect   chai 可以写BDD样式的断言,也可以写TDD样式的断言,可用于Node.js与浏览器 ...

  4. Sublime text3配置C++环境

    前言 传说sublime是全球最好的编辑器,可是只是编辑器啊!!!如果要运行,对于我们这些蒟蒻来说,不得不去使用DEV_C++.我们总是幻想能让sublime变成一个轻量级IDE,那该多好啊!!! 那 ...

  5. Ubuntu 10.04——boa服务器的搭建

     声明:自从第一次发表博文不知不觉过去了好久了,非常抱歉没能把自己的东西分享出来,但是由于上家公司本月初裁员,所以致使学的新东西成了半成品,无奈又换了一家,目前已工作三周了,自己也很想写博文分享知识, ...

  6. 分手是祝愿:dp

    Description Zeit und Raum trennen dich und mich. 时空将你我分开. B 君在玩一个游戏,这个游戏n个灯和n个开关组成,给定这n个灯的初始状态,下标为从1 ...

  7. 可爱精灵宝贝:dp

    拒绝听搜索.etc水过的.数据太弱了(尽管考场上我凭借数据太水骗了好多分) 我讲的思路和下发的题解一样.(因为我不会所以只能颓它啊) 首先你要相信这题精灵就100个,真的只有100个,这次数据范围没错 ...

  8. CSPS模拟 88

    今天我还是个弟弟. 果然唯有AK不可超越.. T1 决策单调性,暴力上整体二分. 极限数据跑的挺快,可是被n<k的脑残测试点qj了.. T2 又是大模拟! T3 想到剩余同种数量的彩球完全等效 ...

  9. NOIP模拟测试13

    考得还算可以,T3还有提升空间(没看清题&&样例没过 拿了4分). 期望得分:80+40+0=120 实际得分:80+85+4=169 一脸黑线.....是数据比较水的原因,T2分都比 ...

  10. 用css或js实现文本输入框的特效

    1文本框默认点击特效: 点击文本框,外围会出现蓝色阴影,取消该特效,为该文本框添加css样式"outline:none;",就取消了默认特效. 2实现百度搜索框点击特效: 点击文本 ...