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

map.getOverlays().clear();

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使用心得的更多相关文章

  1. Openlayers Overlay加载gif图片

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

  2. Openlayers Overlay导致偏移

    说明: 在做项目过程中,用overlay做了一个infowindow弹窗,但是在使用过程中发现一个bug:overlay.setPosition以后,会出现偏移,但是拖动一下地图或者点击一下地图其他地 ...

  3. OpenLayers Map理解

    1,视口坐标的原点在左上角,水平向右为x轴正向,垂直向下为y 轴正向:2,地图坐标原点为初始图层的中心点,水平向右为x轴正向,垂直向上为y轴正向:3,视口中心点永远与地图中心点重合,不一定与瓦片中心点 ...

  4. OpenLayers中的Layer概念和实践--Openlayers调用WMS服务

    整理转自:http://hi.baidu.com/lixuweiok/item/c406a4e6a6d390e7fa42ba4b 本章我认为是这本书的真正开端,终于开始讲一些有意思的东西了.. 在这一 ...

  5. maven学习心得

    心得:这几天一直在研究maven的配置,还真是伤心啊,网上资料不多,而且问题不断.确实很让人头疼 背景:之所以学习maven是因为我们需要一键部署,我们项目是已经差不多完成了,是eclipse的web ...

  6. OpenLayers 添加OpenStreetMap(OSM)瓦片层示例

    This article from:http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example Deploy an OpenStreetM ...

  7. OpenLayers学习笔记(十)— 动态加载JSON数据模拟航迹线

    在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前 ...

  8. openLayers,常见地图实例

    http://openlayers.org/en/master/examples/epsg-4326.html -- 标尺 http://openlayers.org/en/master/exampl ...

  9. OpenLayers学习笔记(六)— 拖拽叠加层overlayer

    是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> < ...

随机推荐

  1. 处理 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 ...

  2. 150行代码搭建异步非阻塞Web框架

    最近看Tornado源码给了我不少启发,心血来潮决定自己试着只用python标准库来实现一个异步非阻塞web框架.花了点时间感觉还可以,一百多行的代码已经可以撑起一个极简框架了. 一.准备工作 需要的 ...

  3. js多物体多方向缓动动画加带有回调机制

    一.获取一组div元素 var boxs = document.getElementsByTagName('div'); 二.封装获取属性值的函数 function getStyle(dom, att ...

  4. 微软的分布式应用框架 Dapr Helloworld

    Dapr HelloWorld Dapr Distributed Application Runtime. An event-driven, portable runtime for building ...

  5. fastfdfs上传代码

    //上传到FDFS //获取后缀名 String extension = StringUtils.substringAfterLast(file.getOriginalFilename()," ...

  6. .NET项目中实现多工程文件共用的方法

    一处开发,多处同步编辑使用,并且发布时各个项目均可独立 一.直接编辑项目工程文件 .csproj 具体实现为:编辑 .csproj 文件,在<ItemGroup>中添加新的 <Con ...

  7. 洛谷P2858 【[USACO06FEB]奶牛零食Treats for the Cows】

    我们可以记录头和尾再加一个卖了的零食数目,如果头超过尾就return 0. 如果遇到需要重复使用的数,(也就是不为零的d数组)就直接return d[tuo][wei]. 如果没有,就取卖头一个与最后 ...

  8. numpy.array 中的运算

    简单运算 现在有有个需求,给定一个数组,让数组中每一个数乘以2,怎么做呢 n = 10 L = [i for i in range(n)] L # [0, 1, 2, 3, 4, 5, 6, 7, 8 ...

  9. TCP/IP协议指南

    分组: packet 通常用来表示任何类型的报文. 数据报: datagram 表示网络分层技术,它也经常用于表示在OSI参考模型较高层上的发送报文. 帧: frame 特别常见用于数据链路层上的报文 ...

  10. CSPS模拟 43

    我这次把考试题改完了 T1 A 发现S*b必须和T模a同余? 貌似乘不了几次就爆T了?可以暴力? 也许乘的越多越好? 内心:切了 另外怎么设置鼠标指到黑块上边就显示字那种东西 最后当然是因为低错没有A ...