openLayers3 中实现多个Overlay

此篇的目的是为了记录下用Overlay的一些操作。

其实实现多个就是创建多个div,然后给每个div绑定Overlay。

 1 //页面加载完函数 --显示个关键点的2        window.onload = function (){3             var pointfeatures = vectorLayerPoint.getSource().getFeatures();//获取点关键点图层的所有点信息4             //遍历每个点5             for(var i=0;i<pointfeatures.length;i++){6                 //新增放置overly的div7                 $("#overly").after("<div id = 'overly"+i+"' class = 'overlay'>"+pointfeatures[i].get('pointtype')+"</div>");8                 //新增overly9                 var marker= new ol.Overlay({
10                     //overly的位置[11,22]格式
11                     position:pointfeatures[i].getGeometry().getCoordinates(),
12                     //overly放置的div
13                     element: document.getElementById('overly'+i)
14                 });
15                 //逐个把overly添加到地图上
16                 map.addOverlay(marker);
17             }
18
19         }

openLayers3 中实现多个Overlay相关推荐

WEBGIS使用OpenLayers3中Interaction绘制长方形和正方形
<input type="button" class="Interaction" value="drawRectangle" οncl ...
openlayers3中geowebcache的使用
geowebcache就相当于是openlayers和geoserver之间的中介,首先,geowebcache会根据你的配置信息,把相应的地图图层切好图,存放在磁盘中,然后在使用openlayer加 ...
OpenLayers3基础教程——OL3之Popup
概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...
（转）OpenLayers3基础教程——OL3之Popup
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...
立刻停止使用AUFS，开启Overlay！
2019独角兽企业重金招聘Python工程师标准>>> 在大多数Ubuntu系统上,Docker的默认文件系统是AUFS. 别用它,用Overlay吧,下来我告诉你为什么. 首先,补 ...
OpenLayers3关于Map Export的Canvas跨域
一 Canvas跨域现象地图导出是地图中常用的功能,并且OpenLayers3中也提供了两个地图导出的例子: http://openlayers.org/en/latest/examples/exp ...
openlayers3应用一：显示百度地图
在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制. 本文讲述在openlayers3中使用百度地图的方法.调用百度地图,也是经过了几番周 ...
盘点下 NSX-v 中“不合理”的命名
https://mp.weixin.qq.com/s/CeoEFBycUziGTLDi6zY0kw 很久没写东西了,这篇写一个轻松的话题. 文章创意来自某天一个读者的留言,TA 对 NSX 中的部分名 ...
geotools中等值面的生成与OL3中的展示
概述: 本文讲述如何在geotools中IDW插值生成等值面,并根据给定shp进行裁剪,并生成geojson数据,以及Openlayers3中展示. 效果: 插值数据裁剪结果裁剪区域数据实现代码 ...

openLayers3 中实现多个Overlay

openLayers3 中实现多个Overlay

openLayers3 中实现多个Overlay相关推荐

最新文章

热门文章