OpenLayers中的图层

OpenLayers有多个不同的图层类，每一个都可以连接到不同的地图服务器。例如通过Layer.WMS类可以连接到WMS地图服务器，通过Layer.Google类可以连接到谷歌地图服务器。OpenLayers中的每个图层都是独立的，对一个的操作不会影响到另外一个。

不管地图应用的目的是什么，一个有用的地图至少需要有一个图层，至少一个基底图层。其他基底图层之上的图层称之为叠加图层。基底图层和叠加图层是OpenLayers中的两种图层类型。

基底图层

基底图层在图层列表的最下方，其他图层都在其之上。其他图层的顺序可以改变，但是基底图层总是在叠加图层下面。默认情况下，添加到地图的第一个图层被认为是基底图层，然而可以通过设置图层的isBaseLayer为True，使之作为基底图层。有时，也有可能有多个基底图层，但是每次只有一个基底图层是活动的。当一个基底图层打开，其他的基底图层就要关闭。然而叠加图层不这样，打开或关闭一个叠加图层不会影响到其他叠加图层。这就像html中的radio按钮和checkbox，radio同时只能选择一个，而checkbox可以多选。

叠加图层

不是基底图层的图层都称为叠加图层，叠加图层的顺序很重要，每次给地图添加图层，都会放到现有图层的上面。

创建图层

操作图层包括2步：

1.创建图层。

2.将图层添加到地图上。可以使用map.addLayer(layer)添加一个图层，也可以使用map.addLayers([layer1,layer2,…])添加一组图层。

下面来看一下如何创建图层。作为例子，这里创建一个基于WMS的图层，具体方法就是实例化Layer.WMS类，代码如下：

[html] view plaincopy

  1. var wms_layer_map = new OpenLayers.Layer.WMS(
  2. ‘Base layer‘,
  3. ‘http://vmap0.tiles.osgeo.org/wms/vmap0‘,
  4. { layers: ‘basic‘ },
  5. { isBaseLayer: true }
  6. );

OpenLayers.Layer.WMS的实例用来显示来自OGC网络地图服务的数据，使用OpenLayers.Layer.WMS构造函数创建一个新的WMS图层。下面来看一下OpenLayers.Layer.WMS的构造函数。

参数 描述
name {String} 图层的名称
url {String} 网络地图服务的Url（如：http://wms.jpl.nasa.gov/wms.cgi）
params {Object} 包含键值对（key:value）的匿名对象，指定WMS服务器返回地图图像的服务器端配置。
options {Object} 键值对匿名对象，指定图层的配置。

params对象包括的键值依赖于使用的地图服务。本系列读书笔记只使用部分WMS参数—layers,transparent,srs。通过在请求的URL后面添加SERVICE=WMS和REQUEST=GETCAPABILITIES就可以获得来自WMS服务的所有图层。如下面的URL所示：

http://vmap0.tiles.osgeo.org/wms/vmap0?SERVICE=WMS&REQUEST=GETCAPABILITIES

options对象包含客户端OpenLayers图层对象的属性，这些属性包括：isBaseLayer,opacity和visibility等。因为属性是客户端配置，WMS服务端并不知道它们。通过下面的链接可以找到这些属性：

http://dev.openlayers.org/docs/files/OpenLayers/Layer-js.html

实例一 创建多个图层的地图

[html] view plaincopy

  1. 1:  <!DOCTYPE html>
  2. 2:  <html>
  3. 3:  <head>
  4. 4:      <meta charset=‘utf-8‘ />
  5. 5:      <title>创建多个图层的地图</title>
  6. 6:      <script src="OpenLayers.js" type="text/javascript"></script>
  7. 7:      <script type="text/javascript">
  8. 8:          var map;
  9. 9:          function init() {
  10. 10:              map = new OpenLayers.Map(‘map‘, {});
  11. 11:              //创建基底图层
  12. 12:              //layers:‘basic‘ 向WMS服务请求basic图层
  13. 13:              //isBaseLayer: 将图层设为基底图层
  14. 14:              var wms_layer_map = new OpenLayers.Layer.WMS(
  15. 15:                  ‘Base layer‘,
  16. 16:                  ‘http://vmap0.tiles.osgeo.org/wms/vmap0‘,
  17. 17:                  { layers: ‘basic‘ },
  18. 18:                  { isBaseLayer: true }
  19. 19:              );
  20. 20:              //创建叠加图层
  21. 21:              //layers: ‘clabel,ctylabel,statelabel‘ 向WMS服务请求一些不同的label图层
  22. 22:              //transparent:true 从服务器返回的地图图像是透明的
  23. 23:              //opacity:.5 客户端图层半透明
  24. 24:              var wms_layer_labels = new OpenLayers.Layer.WMS(
  25. 25:                   ‘Location Labels‘,
  26. 26:                   ‘http://vmap0.tiles.osgeo.org/wms/vmap0‘,
  27. 27:                   { layers: ‘clabel,ctylabel,statelabel‘, transparent: true },
  28. 28:                   { opacity: 1 }
  29. 29:                  );
  30. 30:              //添加图层到地图
  31. 31:              map.addLayers([wms_layer_map, wms_layer_labels]);
  32. 32:              if (!map.getCenter()) {
  33. 33:                  map.zoomToMaxExtent();
  34. 34:              }
  35. 35:          }
  36. 36:      </script>
  37. 37:  </head>
  38. 38:  <body onload="init()">
  39. 39:      <div id=‘map‘ style=‘width: 500px; height: 500px;‘>
  40. 40:      </div>
  41. 41:  </body>
  42. 42:  </html>

运行效果如下图所示：

实例2 配置options参数

[html] view plaincopy

  1. 1:  <!DOCTYPE html>
  2. 2:  <html>
  3. 3:  <head>
  4. 4:      <meta content="charset=utf-8" />
  5. 5:      <title>配置options参数</title>
  6. 6:      <script src="OpenLayers.js" type="text/javascript"></script>
  7. 7:      <script type="text/javascript">
  8. 8:          //东经120°
  9. 9:          var lon = 120;
  10. 10:          //北纬39°
  11. 11:          var lat = 39;
  12. 12:          //缩放级别6
  13. 13:          var zoom = 6;
  14. 14:          var map;
  15. 15:          function init() {
  16. 16:              map = new OpenLayers.Map(‘map‘, {});
  17. 17:              //创建基底图层
  18. 18:              var wms_layer_map = new OpenLayers.Layer.WMS(
  19. 19:              "Base layer",
  20. 20:              "http://vmap0.tiles.osgeo.org/wms/vmap0",
  21. 21:              { layers: "basic" },
  22. 22:              { isBaseLayer: true }
  23. 23:              );
  24. 24:              //创建Label图层
  25. 25:              //设置options的visibility:false使图层不显示
  26. 26:              var wms_layer_labels = new OpenLayers.Layer.WMS(
  27. 27:              "Location Labels",
  28. 28:              "http://vmap0.tiles.osgeo.org/wms/vmap0",
  29. 29:              { layers: "clabel,ctylabel,statelabel", transparent: true },
  30. 30:              { visibility: false, opacity: .5 }
  31. 31:              );
  32. 32:              //创建stateboundary图层
  33. 33:              //layers:stateboundary 向WMS服务请求stateboundary图层
  34. 34:              //设置optioins的displayInLayerSwitcher:false使该图层不显示在Switcher Control
  35. 35:              //minScale表示只有达到一定的缩放比例该图层才会显示
  36. 36:              var wms_state_lines = new OpenLayers.Layer.WMS(
  37. 37:              "State Line Layer",
  38. 38:              "http://labs.metacarta.com/wms/vmap0",
  39. 39:              { layers: "stateboundary", transparent: true },
  40. 40:              { displayInLayerSwitcher: false, minScale: 13841995.078125 }
  41. 41:              );
  42. 42:              //创建depthcontour图层
  43. 43:              //设置opacity:.8
  44. 44:              var wms_water_depth = new OpenLayers.Layer.WMS(
  45. 45:              "Water Depth",
  46. 46:              "http://labs.metacarta.com/wms/vmap0",
  47. 47:              { layers: "depthcontour", transparent: true },
  48. 48:              { opacity: .8 }
  49. 49:              );
  50. 50:              //创建一些road图层,包括一级公路、二级公路和铁路
  51. 51:              //设置options的transitionEffect: "resize"，使图层放大或缩小时产生调整大小的动画效果
  52. 52:              var wms_roads = new OpenLayers.Layer.WMS(
  53. 53:              "Roads",
  54. 54:              "http://labs.metacarta.com/wms/vmap0",
  55. 55:              { layers: "priroad,secroad,rail", transparent: true },
  56. 56:              { transitionEffect: "resize" }
  57. 57:              );
  58. 58:              map.addLayers([wms_layer_map, wms_layer_labels, wms_state_lines, wms_water_depth, wms_roads]);
  59. 59:              //设置地图的中心位置
  60. 60:              map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  61. 61:              //添加Switcher Control
  62. 62:              map.addControl(new OpenLayers.Control.LayerSwitcher());
  63. 63:          }
  64. 64:      </script>
  65. 65:  </head>
  66. 66:  <body onload="init()">
  67. 67:      <div id="map" style="width: 1000px; height: 600px;">
  68. 68:      </div>
  69. 69:  </body>
  70. 70:  </html>

最后运行，如下图所示效果

右上角蓝色的是Switcher Control，可以看到Location Labels是没有显示的，这就是在前面代码里设置了visibility：false的效果。还有stateboundary图层没有显示在Switcher Control中，这是因为该图层设置了displayInLayerSwitcher: false。另外缩小地图，可以看到边界线消失了，这正是设置minScale的作用，只有达到一定缩放比例边界线才会显示出来。

这篇文章就先介绍这些吧，有很多地方没有涉及全面，不过在后面的文章中会一点一点介绍到的，希望对OpenLayers感兴趣的朋友继续关注，有经验的多提点建议。

作者：田念明
出处：http://www.cnblogs.com/nianming/

时间： 2024-11-07 19:11:53

OpenLayers中的图层的相关文章

OpenLayers中地图缩放级别的设置方法

来源于:http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html 一.概述 在OpenLayers中,地图必须具有一个缩放级别的范围,缩放级别可以用比例尺(scale)或者分辨率(resolution)表示. 比例尺——屏幕上1米代表多少地图坐标单位:分辨率——屏幕上一个像素代表多少地图坐标单位.两者的转换关系是:scale = resolution * 72 * 39.3701(1米=39.3701英寸,1英寸=72像素)

OpenLayers自定义投影，转换OpenLayers中加载的OSM的默认投影坐标

giser都会遇到一个问题就是数据与底图坐标系不符合导致偏移的产生. Openlayers中应该只包含EPSG:3857和EPSG:4326,其中EPSG:3857更是作为默认的OSM底图的坐标.(这是根据官方文档以及查到资料,猜的..此处放出官网文档截图) 可是手上的数据是EPSG:4549的呀,,,于是只能辛苦自定义并转换.根据官网所说,如果用proj4.js,那么要加proj4.defs();...算了     不解释了   直接上代码(小声bb,因为作者英语不好,实在是装不了这个X,另外

（八）WebGIS中栅格图层的设计

1.    前言 我们在上一章里了解到WebGIS中栅格图层的本质——地图图片.而从之前的第二章到第五章,我们详细的介绍了地图图片的获取原理和方法.所以在设计栅格图层前,我们已经知道了栅格图层中数据是如何获得的,剩下的便是怎样将这个过程用一种符合面向对象的设计原则来进行实现. 2.栅格数据获得的流程 这里我再次将栅格数据获得的流程描述一遍: 首先,得到屏幕范围内的地图四角坐标,根据此四角坐标算出屏幕范围内地图最靠近的地图级别,以及此时瓦片的行号范围以及列号范围,然后按照行号和列号拼接出瓦片请求,

Openlayers中热力图的实现

概述: 本文讲述结合heatmap.js,在Openlayers中如何实现热力图. heatmap.js简介: Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页,帮助您研究和可视化用户的行为. 实现效果: 实现代码: <html> <head> <meta charset="UTF-8"

简析Geoserver中获取图层列表以及各图层描述信息的三种方法

1.背景 实际项目中需要获取到Geoserver中的图层组织以及各图层的描述信息:比如字段列表等.在AGS中,我们可以直接通过其提供的REST服务获取到图层组织情况以及图层详细信息列表,具体如下所示: 那么在Geoserver中是否也有相关用法?各种方法之间有何优劣? 2.REST请求方法 2.1方法描述 该方法与上面讲解的AGS的REST请求方法类似,也是先获取到组织情况然后再进行各个图层的描述信息获取: 获取workspace信息: 获取workspace下的datasource信息:获取w

OpenLayers中基于Filter的WFS查询

打算实现的功能:基于OpenLayers实现对地图中城市POI模糊查询,并且能提供基于位置的查询(GIS中就是基于圆的查询,通俗的说就是当确定用户位置后,可以查询用户周边一定范围内的POI)和基于多边形的查询(用户自己画出多边形,实现在多边形范围内的POI查询),设定的界面如下图所示 1.      界面实现 页面的body主体实现如下: <body onload="init()"> <div id="searchDiv" style="

Openlayers中layer介绍

1.base layers & overlay layers base layer:最底层的layer,其他的图层是在他之上,最先加入的图层默认作为base layer. overlay layer:不是base layer的layer就是overlay layer 2.使用layer的步骤: 创建layer 把layer添加到Map中,可以用map.addlayer(layer)或map.addLayers([layer1,layer2,.....] 3.样例:创建一个多图层的地图 <!D

openlayers中实现点的拖拽（modify）,在layer中增加修改删除point。

最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下. 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置,添加其他数据,保存入库. 2,增加后展示点,点上面有序号. 3,修改时,当选中一条记录的时候需要地图上面的点高亮,这个时候可拖动位置,修改表单数据,修改后保存. 4,删除也是选中一条记录,记录删除地图点删除. 由于基于老版本开发的,本文中用到的方法都是openlayer4.6.5版本,具体问题还是

openlayers中的自定制工具栏，包含画点、线、面

先是在projectquantan-master这个项目中有一个EditingPanel这个工具条,也挺好的,功能挺全的,但是有一点就是只有画多边形的一个按钮,没有point和path俩个的,所以就想自己去加一个. 然后就发现统一的drawfeature的样式(olControlDrawFeatureItemInactive),没有分为point.path和polygon的,然后就去源代码中找控制这个样式点代码去修改他,但是始终没有找到,只能作罢. 又去网上搜索找到了openlayers自带的一