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'后是正常的,但如果运行环境换成 ...
随机推荐
- 【阿里云IoT+YF3300】7.物联网设备表达式运算
很多时候从设备采集的数据并不能直接使用,还需要进行处理一下.如果采用脚本处理,有点太复杂了,而采用表达式运算,则很方便地解决了此类问题. 一. 设备连接 运行环境搭建:Win7系统请下载相关的设备驱 ...
- 微服务架构 ------ Day01 微服务架构优缺点
1. 微服务架构的优点 庞大的单体程序 -> 一套微型程序. 每一个服务有明确的边界(服务之间的消息通讯机制) ,每一个服务都能单独的开发和维护,并且更好理解 每一个服务都能由一个团队来开发,当 ...
- kali更新源地址更改
问题: Hit:1 http://mirrors.ustc.edu.cn/kali kali-rolling InReleaseIgn:2 http://mirrors.ustc.edu.cn/kal ...
- LogViewer解君之忧
LogViewer是一款查看和搜索大型文本文件的工具,能够很快速的查看记事本无法打开的大容量文件,比如大数据的日志文件或数据库文件等,可支持最大4GB的大容量. 一.下载地址链接(中文破解版): ht ...
- django-URL重定向(八)
HttpResponseRedirect()不常用 redirect(to,permanent=False,*args,**kwargs) to:指重定向的位置,可以是视图,也可以是url地址,也可以 ...
- int和string的相互装换 (c++)
int和string的相互装换 (c++) int转换为string 第一种方法 to_string函数,这是c++11新增的函数 string to_string (int val); string ...
- 本地客户端(自己的电脑)连接远程Oracle数据库(服务器端),客户端安装步骤
如果本地自己的电脑没有安装Oracle(服务器端数据库),那就要单独安装HA-Instant Client-v11.2.0.3.0.exe(oracle_client客户端) 如果本地安装了Oracl ...
- 2018.8.8 python 初识函数
主要内容: 1.函数定义 2.函数名,函数体以及函数的调用 3.函数的返回值 4.函数的参数 一.函数的定义 函数:对代码块和功能的封装和定义. 二.函数名.函数体及函数的调用 我们使用def关键字来 ...
- 前后端对称加密(AES)
后端实现(JAVA) package com.vcgeek.hephaestus.demo; import org.apache.commons.codec.binary.Base64; import ...
- 明解C语言 入门篇 第三章答案
练习3-1 #include <stdio.h> int main() { int x; int y; puts("请输入两个整数."); printf("整 ...