说明:

在做项目过程中,用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. 百万年薪python之路 -- 基础数据类型的补充练习

    1.看代码写结果 v1 = [1,2,3,4,5] v2 = [v1,v1,v1] v1.append(6) print(v1) print(v2) [1,2,3,4,5,6] [[1,2,3,4,5 ...

  2. vue-class-component使用Mixins

    vue-class-component提供了mixinshelper函数,以类样式的方式使用mixins.通过使用mixins帮助程序,TypeScript可以推断mixin类型并在组件类型上继承它们 ...

  3. C# 中yield关键字解析

    前言 前段时间了解到yield关键字,一直觉得还不错.今天给大家分享一下yield关键字的用法.yield return 返回集合不是一次性返回所有集合元素,而是一次调用返回一个元素.具体如何使用yi ...

  4. ReoGrid.Mvvm:ReoGrid绑定模型

    ReoGrid 是 C# 编写的.NET 电子表格控件(类似 Excel).支持单元格合并,边框样式,图案背景颜色,数据格式,冻结,公式,宏和脚本执行,表格事件等.支持 Winform\WPF. Re ...

  5. SpringBoot异常处理统一封装我来做-使用篇

    SpringBoot异常处理统一封装我来做-使用篇 简介 重复功能我来写.在 SpringBoot 项目里都有全局异常处理以及返回包装等,返回前端是带上succ.code.msg.data等字段.单个 ...

  6. 数据结构(四十一)多路查找树(B树)

    一.多路查找树的背景 前面所讨论的查找算法都是在内存中进行的,它们适用于较小的文件,而对于较大的.存放在外存储器上的文件就不合适了,对于此类大规模的文件,即使是采用了平衡二叉树,在查找效率上仍然较低. ...

  7. django-模板之模板变量(二)

    将views中的变量传递给html界面 book/views.py from django.views import View from django.shortcuts import render ...

  8. vue-cli安装方法

    vue-cli:vue文件,css文件,less文件,图片--->htmles6代码--->es5代码 template标签里面,只能有1个跟元素 script标签里面导入组件import ...

  9. 微软宣布加入 OpenJDK,看网上各派的热闹

    微软宣布加入 OpenJDK 项目(https://www.oschina.net/news/111036/microsoft-to-participate-in-openidk),这两天在微信公众号 ...

  10. Head First设计模式——简单工厂、工厂、抽象工厂

    前言:按照惯例我以Head First设计模式的工厂模式例子开始编码学习.并由简单工厂,工厂模式,抽象工厂模式依次演变,归纳他们的相同与不同. 话说Head First认为简单工厂并不是设计模式,而是 ...