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

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

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

openLayers3 中实现多个Overlay的更多相关文章

  1. Openlayers3中实现地图的切割

    概述: 本文讲述如何在Openlayers3中结合canvas实现对地图的切割. 效果: 全图 切割北京区域 切割河北区域 实现: <html xmlns="http://www.w3 ...

  2. openlayers3中应用proj4js

    要在openlayers3中应用proj4js,需要在html中引用proj4js,然后在引用所需要的projection的js定义,如 http://epsg.io/21781-1753.js 然后 ...

  3. openlayers3中Overlay用法

    Overlay 从名字看,是覆盖图.覆盖物的意思,主要的用途就是在地图之上再覆盖一层,用以显示额外的可见元素,可见元素一般是 HTML 元素,利用 overlay,可以将可见元素放置到地图的任意位置, ...

  4. OpenLayers3中wfs的属性查询

    var vector = new ol.layer.Vector({ source: new ol.source.Vector({ format: new ol.format.GeoJSON(), u ...

  5. Openlayers3中实现台风风圈绘制算法

    概述: 台风的风圈的NE.NW.SW.SE四个方位的影响范围是不一致,本文介绍一种简单的风圈的绘制方法,并在OL3中展示. 实现效果: 实现代码: 1.数据格式 var Configs = { CIR ...

  6. (转)OpenLayers3基础教程——OL3之Popup

    http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...

  7. OpenLayers3基础教程——OL3之Popup

    概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...

  8. Keil C51 中的函数指针和再入函数

    函数指针是C语言中几个难点之一.由于8051的C编译器的独特要求,函数指针和再入函数有更多的挑战需要克服.主要由于函数变量的传递.典型的(绝大部分8051芯片)函数变量通过堆栈的入栈和出栈命令来传递. ...

  9. openlayers3应用一:显示百度地图

    在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制. 本文讲述在openlayers3中使用百度地图的方法.调用百度地图,也是经过了几番周 ...

随机推荐

  1. HTML中&nbsp; &ensp; &emsp; &thinsp;等6种空白空格

  2. [51nod1236] 序列求和 V3(斐波那契数列)

    题面 传送门 题解 把求和的柿子用斐波那契数列的通项公式展开 \[ \begin{aligned} Ans &=\sum\limits_{i = 1}^{n} \left(\frac{(\fr ...

  3. centos6 x64安装elasticsearch5.5.2启动报错

    ERROR: [3] bootstrap checks failed[1]: max file descriptors [4096] for elasticsearch process is too ...

  4. The server of Nginx(一)——Nginx基础及静态网站的构建

    一.Nginx介绍 火了半边天的Nginx和Apache一样也是Web服务器,专为性能优化而开发,也可以像Squid一样做反向代理,或者邮件代理等许多用途,并有windows的移植版,其最知名的优点是 ...

  5. python基础之条件判断

    一.简单的if语句 举例 if money > 10000: print '我们去旅游吧' #左侧一定要有缩进,一般4个空格 print '请输入学生的考试成绩' score = print ( ...

  6. C# 精准计时之 QueryPerformanceCounter QueryPerformanceFrequency用法

    C# 用法: public static class QueryPerformanceMethd { [DllImport("kernel32.dll")] public exte ...

  7. 关于VisualStudio性能分析数据中的独占样本数和非独占样本数的意义

    VisualStudio中自带有Profile工具进行性能性能分析,其中用得比较多的数据是函数调用时间,它主要有独占样本数和非独占样本数两个指标,关于这两个指标代表的意义,MSDN的解释比较文艺: 非 ...

  8. [NOI2010]能量采集 BZOJ2005 数学(反演)&&欧拉函数,分块除法

    题目描述 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋的植物种得非常整齐,一共 ...

  9. Apache htaccess 设置....

    NC: no case,就是说不区分大小写R:redirect,重定向F:forbidden,禁止访问L:last,表示已经是最后一条规则,.htaccess文件解析即将退出 比如原地址为 /beau ...

  10. 109th LeetCode Weekly Contest Number of Recent Calls

    Write a class RecentCounter to count recent requests. It has only one method: ping(int t), where t r ...