Openlayers Overlay使用心得
Overlay在Openlayers里是浮动层的概念,区别于vector这样的图层,通常用于弹窗、撒点、以及解决加载icon样式不支持的gif等格式图片。
此次用overlay的过程中遇到很多问题,在此记录
一、创建Overlay
先简单理一下overlay加载机制:如果我定义了一个id为marks的div标签
创建overlay的时候elementid指向这个marks的div:
则会在ol-viewport的容器里,生成如下的结构:(当调用ol.Map()这个构造函数时,OpenLayers地图引擎会在内部创建一个视口容器(viewport container,一个css类名为ol-viewport的div DOM元素)并将其放置在target属性映射的地图容器元素中)
二、移除Overlay
移除overlay有很多方法,这里尝试过的都列在下面
1、删除overlay图层
#这种方式会把overlay以及其指向的DOM都删除,对于再要新增overlay到这个DOM就会有问题(如点击弹窗)
map.removeOverlay(_overlay);
2、删除map中所有overlay图层,原理同1
3、推荐,这种方式会保留dom,但要记得在下次新增同类时删除,否则会生成好多dom造成冗余残留
overlay.setPosition(undefined);
overlay = null;
4、删除map中所有overlay图层,原理同3
let olLyrs = this.encmap.getOverlays().getArray();
let olLyrsLength = this.encmap.getOverlays().getArray().length;
for(let i = 0;i < olLyrsLength;i++){
olLyrs[i].setPosition(undefined);
//olLyrs[i] = null;
}
三、Overlay冒泡机制
遇到一个问题:在overlay弹窗存在滚动条的情况下,鼠标滚轮滚动,地图缩放和overlay弹窗会一起触发。
这时候设置一下overlay的stopEvent,设置为true即可阻止冒泡
Openlayers Overlay使用心得的更多相关文章
- Openlayers Overlay加载gif图片
说明: 项目中使用vector图层做图片撒点功能,发现加载gif没有效果.网上查找资料发现,openlayers不支持gif图片样式. 后面采用overlay的方式,gif图片赋值给DOM元素 解决方 ...
- Openlayers Overlay导致偏移
说明: 在做项目过程中,用overlay做了一个infowindow弹窗,但是在使用过程中发现一个bug:overlay.setPosition以后,会出现偏移,但是拖动一下地图或者点击一下地图其他地 ...
- OpenLayers Map理解
1,视口坐标的原点在左上角,水平向右为x轴正向,垂直向下为y 轴正向:2,地图坐标原点为初始图层的中心点,水平向右为x轴正向,垂直向上为y轴正向:3,视口中心点永远与地图中心点重合,不一定与瓦片中心点 ...
- OpenLayers中的Layer概念和实践--Openlayers调用WMS服务
整理转自:http://hi.baidu.com/lixuweiok/item/c406a4e6a6d390e7fa42ba4b 本章我认为是这本书的真正开端,终于开始讲一些有意思的东西了.. 在这一 ...
- maven学习心得
心得:这几天一直在研究maven的配置,还真是伤心啊,网上资料不多,而且问题不断.确实很让人头疼 背景:之所以学习maven是因为我们需要一键部署,我们项目是已经差不多完成了,是eclipse的web ...
- OpenLayers 添加OpenStreetMap(OSM)瓦片层示例
This article from:http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example Deploy an OpenStreetM ...
- OpenLayers学习笔记(十)— 动态加载JSON数据模拟航迹线
在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前 ...
- openLayers,常见地图实例
http://openlayers.org/en/master/examples/epsg-4326.html -- 标尺 http://openlayers.org/en/master/exampl ...
- OpenLayers学习笔记(六)— 拖拽叠加层overlayer
是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> < ...
随机推荐
- 处理 Could not find a 'KafkaClient' entry in the JAAS configuration. System property 'java.security.auth.login.config' is
场景 某监控进程需要访问多个集群的Kafka INFO - org.apache.kafka.common.KafkaException: Failed to construct kafka cons ...
- 150行代码搭建异步非阻塞Web框架
最近看Tornado源码给了我不少启发,心血来潮决定自己试着只用python标准库来实现一个异步非阻塞web框架.花了点时间感觉还可以,一百多行的代码已经可以撑起一个极简框架了. 一.准备工作 需要的 ...
- js多物体多方向缓动动画加带有回调机制
一.获取一组div元素 var boxs = document.getElementsByTagName('div'); 二.封装获取属性值的函数 function getStyle(dom, att ...
- 微软的分布式应用框架 Dapr Helloworld
Dapr HelloWorld Dapr Distributed Application Runtime. An event-driven, portable runtime for building ...
- fastfdfs上传代码
//上传到FDFS //获取后缀名 String extension = StringUtils.substringAfterLast(file.getOriginalFilename()," ...
- .NET项目中实现多工程文件共用的方法
一处开发,多处同步编辑使用,并且发布时各个项目均可独立 一.直接编辑项目工程文件 .csproj 具体实现为:编辑 .csproj 文件,在<ItemGroup>中添加新的 <Con ...
- 洛谷P2858 【[USACO06FEB]奶牛零食Treats for the Cows】
我们可以记录头和尾再加一个卖了的零食数目,如果头超过尾就return 0. 如果遇到需要重复使用的数,(也就是不为零的d数组)就直接return d[tuo][wei]. 如果没有,就取卖头一个与最后 ...
- numpy.array 中的运算
简单运算 现在有有个需求,给定一个数组,让数组中每一个数乘以2,怎么做呢 n = 10 L = [i for i in range(n)] L # [0, 1, 2, 3, 4, 5, 6, 7, 8 ...
- TCP/IP协议指南
分组: packet 通常用来表示任何类型的报文. 数据报: datagram 表示网络分层技术,它也经常用于表示在OSI参考模型较高层上的发送报文. 帧: frame 特别常见用于数据链路层上的报文 ...
- CSPS模拟 43
我这次把考试题改完了 T1 A 发现S*b必须和T模a同余? 貌似乘不了几次就爆T了?可以暴力? 也许乘的越多越好? 内心:切了 另外怎么设置鼠标指到黑块上边就显示字那种东西 最后当然是因为低错没有A ...