Openlayers Overlay导致偏移
说明:
在做项目过程中,用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导致偏移的更多相关文章
- Openlayers Overlay加载gif图片
说明: 项目中使用vector图层做图片撒点功能,发现加载gif没有效果.网上查找资料发现,openlayers不支持gif图片样式. 后面采用overlay的方式,gif图片赋值给DOM元素 解决方 ...
- Openlayers Overlay使用心得
Overlay在Openlayers里是浮动层的概念,区别于vector这样的图层,通常用于弹窗.撒点.以及解决加载icon样式不支持的gif等格式图片. 此次用overlay的过程中遇到很多问题,在 ...
- Openlayers Projection导致经纬度颠倒问题
问题: openlayers3调用TileWMS接口,实现Openlayers加载Geoserver转发的ArcGIS切片时,web墨卡托(wkid3857)没有问题,但是WGS84(wkid4326 ...
- Unity3D 利用欧拉角实现实体的旋转
本文系作者原创,转载请注明出处 刚刚入门U3D,也是很多东西搞不懂,最先接触的就是自己尝试去获取键盘上的GetPress之类的事件了吧 官方的API DOC也是帮了不少忙,到处吸收了各位博主的文章也是 ...
- 样式布局与 BFC
一.几类视图 内联视图:inline 单行 块级视图:block 换行,有高度 行内块级视图:inline-block 单行,有高度 二.几类布局 块级布局 换行,通过设置 margin 水平居中 & ...
- oo第一次作业
前言: 这是一篇面向对象作业总结,作业内容是对多项式进行求导,一共有三个阶段,具体要求不详述,第一阶段只要求’+’连接coeff*x^pow的形式,第二次支持*连接的幂函数及三角函数,第三次则需要支持 ...
- U3D Transform用法
最近在学习unity3d,下面对Transform类做一个小结 一.常用属性和方法 1.1 常用属性: 用代码展示一下上面的一些属性,值得注意的是myCube是mySphere的父物体 using U ...
- 在WPF中实现平滑滚动
WPF实现滚动条还是比较方便的,只要在控件外围加上ScrollViewer即可,但美中不足的是:滚动的时候没有动画效果.在滚动的时候添加过渡动画能给我们的软件增色不少,例如Office 2013的滚动 ...
- lua垃圾回收之空表
故事背景: 自己手动手写的一个lua外部库luaopen_xxx,采用了tolua++1.0.93,编译后得到xxx.dll,当在luajit中require 'xxx'后是正常的,但如果运行环境换成 ...
随机推荐
- IntelliJ IDEA 2019.2最新版本免费激活码
IntelliJ IDEA 2019.2最新版本免费激活码 支持IDEA所有版本 正版授权激活码 今天更新了一下,支持java13等新功能.下面是激活码 812LFWMRSH-eyJsaWNlbnNl ...
- (记录)Jedis存放对象和读取对象--Java序列化与反序列化
一.理论分析 在学习Redis中的Jedis这一部分的时候,要使用到Protostuff(Protobuf的Java客户端)这一序列化工具.一开始看到序列化这些字眼的时候,感觉到一头雾水.于是,参考了 ...
- C#开发命令执行驱动程序 之 读入命令行参数
/// <summary> /// 在cmd窗体内执行如下: /// OrderDriverApp.exe Order Driver App /// 返回: /// The args ar ...
- 前端技术之:Prisma Demo服务部署过程记录
安装前提条件: 1.已经安装了docker运行环境 2.以下命令执行记录发生在MackBook环境 3.已经安装了PostgreSQL(我使用的是11版本) 4.Node开发运行环境可以正常工作 ...
- H5 + WebGL 实现的楼宇自控 3D 可视化监控
前言 智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注.目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是一个生态 ...
- 暑期集训20190730 取模(mod)
[题目描述] 给定一个长度为n的非负整数序列a,你需要支持以下操作: 1:给定l,r,输出a[l]+a[l+1]+…+a[r]. 2:给定l,r,x,将a[l],a[l+1],…,a[r]对x取模. ...
- [考试反思]0907NOIP模拟测试39:角落
题比较简单,但是做的非常烂. T1是个愚蠢的找规律组合数快速幂,数组开小了(看错数据范围) T2题目保证联通没看见,hack掉了正解. T3也挺蠢的,但是打乱了,思路不是很清晰导致丢了50分. 只能说 ...
- 一张图牢记vim常用命令
1.示例(前提要切到命令状态) ^ 光标移动到行首 $ 光标移动到行尾 set nu 显示行号 :%s/foo/bar/g 会在全局范围(%)查找foo并替换为bar,所有出现都会被替换(g) 参 ...
- 国际C语言混乱代码大赛优胜作品详解之“A clock in one line”
原文链接:https://blog.csdn.net/herorenme/article/details/8864351 摘要:IOCCC,即国际混乱C语言代码大赛是一项著名的国际编程赛事迄今已举办2 ...
- SSM学习成果总结,图书管理系统进行三层整合
一:先看一下效果图 二:目录结构 三:pojo package com.zh.pojo; import lombok.AllArgsConstructor; import lombok.Data; ...