读书笔记(2) 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类,代码如下:

   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类

打开如下网址:http://dev.openlayers.org/docs/files/OpenLayers/Layer/WMS-js.html,来看一下OpenLayers.Layer.WMS这个类。

读书笔记(2) OpenLayers中的图层_第1张图片

从上面的图可以看到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

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

   1:  DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset='utf-8' />
   5:      <title>创建多个图层的地图title>
   6:      <script src="OpenLayers.js" type="text/javascript">script>
   7:      
                    
                    

你可能感兴趣的:(读书笔记(2) OpenLayers中的图层)