openLayers3 中实现多个Overlay
此篇的目的是为了记录下用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的更多相关文章
- Openlayers3中实现地图的切割
概述: 本文讲述如何在Openlayers3中结合canvas实现对地图的切割. 效果: 全图 切割北京区域 切割河北区域 实现: <html xmlns="http://www.w3 ...
- openlayers3中应用proj4js
要在openlayers3中应用proj4js,需要在html中引用proj4js,然后在引用所需要的projection的js定义,如 http://epsg.io/21781-1753.js 然后 ...
- openlayers3中Overlay用法
Overlay 从名字看,是覆盖图.覆盖物的意思,主要的用途就是在地图之上再覆盖一层,用以显示额外的可见元素,可见元素一般是 HTML 元素,利用 overlay,可以将可见元素放置到地图的任意位置, ...
- OpenLayers3中wfs的属性查询
var vector = new ol.layer.Vector({ source: new ol.source.Vector({ format: new ol.format.GeoJSON(), u ...
- Openlayers3中实现台风风圈绘制算法
概述: 台风的风圈的NE.NW.SW.SE四个方位的影响范围是不一致,本文介绍一种简单的风圈的绘制方法,并在OL3中展示. 实现效果: 实现代码: 1.数据格式 var Configs = { CIR ...
- (转)OpenLayers3基础教程——OL3之Popup
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...
- OpenLayers3基础教程——OL3之Popup
概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...
- Keil C51 中的函数指针和再入函数
函数指针是C语言中几个难点之一.由于8051的C编译器的独特要求,函数指针和再入函数有更多的挑战需要克服.主要由于函数变量的传递.典型的(绝大部分8051芯片)函数变量通过堆栈的入栈和出栈命令来传递. ...
- openlayers3应用一:显示百度地图
在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制. 本文讲述在openlayers3中使用百度地图的方法.调用百度地图,也是经过了几番周 ...
随机推荐
- 趣图:后端工程师是怎样调试CSS的
一大波趣图:CSS的力量 趣图:前端 VS 后端
- java集合类学习笔记之LinkList
1.简述 LinkList的底层其实就是一个双向链表,所谓的链表就是一个LinkList内部静态静态类(Node),对LinkList的所有操作本质上就是通过对LinkList中新建的Node对象 进 ...
- Spark大数据处理 之 从WordCount看Spark大数据处理的核心机制(1)
大数据处理肯定是分布式的了,那就面临着几个核心问题:可扩展性,负载均衡,容错处理.Spark是如何处理这些问题的呢?接着上一篇的"动手写WordCount",今天要做的就是透过这个 ...
- 深度学习TensorFlow常用函数
tensorflow常用函数 TensorFlow 将图形定义转换成分布式执行的操作, 以充分利用可用的计算资源(如 CPU 或 GPU.一般你不需要显式指定使用 CPU 还是 GPU, Tensor ...
- CF886E Maximum Element
$ \color{#0066ff}{ 题目描述 }$ 从前有一个叫Petya的神仙,嫌自己的序列求max太慢了,于是将序列求max的代码改成了下面这个样子: int fast_max(int n,in ...
- 如果将markdown视作一门编程语言可以做哪些有趣的事情?
如题,然后就有了为解决这个好奇而开的项目:https://github.com/racaljk/llmd 源码主要是parser+interpreter,其中parser使用sundown,然后生成l ...
- 图像金字塔、高斯金字塔、差分金字塔(DOG金字塔)、尺度空间、DoG (Difference of Gaussian)角点检测
[图像金字塔] 图像金字塔是一种以多分辨率来解释图像的结构,通过对原始图像进行多尺度像素采样的方式,生成N个不同分辨率的图像.把具有最高级别分辨率的图像放在底部,以金字塔形状排列,往上是一系列像素(尺 ...
- JS 节点的属性 与 元素
节点的属性{ nodeType 是节点的类型: nodeNam 是节点的名字 nodeValue 节点的值 }可以用节点.属性 取得三个属性的值 节点.nodeType 出来的 ...
- Linux 查看文件夹命令
1,按照时间升序 命令:ls -lrt 详细解释: -l use a long listing format 以长列表方式显示(详细信息方式) -t sort by modi ...
- Qt 学习之路 2(34):贪吃蛇游戏(4)
Qt 学习之路 2(34):贪吃蛇游戏(4) 豆子 2012年12月30日 Qt 学习之路 2 73条评论 这将是我们这个稍大一些的示例程序的最后一部分.在本章中,我们将完成GameControlle ...