OpenLayers中的Layer概念和实践--Openlayers调用WMS服务

整理转自：http://hi.baidu.com/lixuweiok/item/c406a4e6a6d390e7fa42ba4b

本章我认为是这本书的真正开端，终于开始讲一些有意思的东西了。。

在这一章中我们将要学到

什么是OpenLayers中的Layer(图层)

基层和覆盖层之间的区别

学习Layers对象，以及对象上的属性

学习WMS Layer类

了解Layer对象描述的属性

讲解其他的Layer类

讲解Layer中的方法

什么是Layer

书上有个例子，说如果我们有两个透明的玻璃板，一个板子上用绿色的线描述一个地方的自行车路线，而另一个板子用蓝色的板子来描述汽车

可以行驶的路线，那么当我们将两个板子和在一起，我们就知道这做城市那些地方可以骑自行车，那些地方可以行驶汽车，那么这两个板子我们

就可以认为是Map上的Layer，也就是图层的概念。

至于在OpenLayers中，这个javascript框架拥有很多的Layer类，当我们需要请求WMS Map服务时，使用WMS layer类，当我门使用Google Map时，就使用Layer.google 类。

最后把层添加到Map上，理论上你相加多少层都行，但是考虑到性能的问题，还是加适当的层，这关键取决你电脑的性能。

BaseLayer

我们需要在一个地图上，标示一个基础图层，而别的图层都覆盖到他的上方，默认的情况下第一个添加到Map对象中的Layer，是BaseLayer，也可使用

isBaseLayer属性指定。

需要注意是在一个Map中，只能有一个BaseLayer.但是可以有很多的覆盖层。

Overlay Layers(我们刚提到的覆盖层)

一般称不是基层的所有图层都叫做覆盖层，唯一的区别就是顺序，添加的早的永远在下面。

来我们试着创建一个多层的Map，文件结构不变

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
 2 <html>    
 3 <head>    
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
 5 <title>Layer in OpenLayers</title>    
 6 <script type="text/javascript" src="OpenLayers.js"></script>    
 7 <script type="text/javascript">    
 8     var map;    
 9     function initMap(){    
10         // 创建Map    
11         map = new OpenLayers.Map('map',{});    
12         //创建BaseLayer，并明确的在初始化时指出来. isBaseLayer:true     
13         var baseLayer = new OpenLayers.Layer.WMS(    
14             'basic layer',    
15             'http://vmap0.tiles.osgeo.org/wms/vmap0',    
16             {layers:'basic'},    
17             {isBaseLayer:true}    
18         );    
19         var wms_layer_labels = new OpenLayers.Layer.WMS(    
20             'Location Labels',    
21             'http://vmap0.tiles.osgeo.org/wms/vmap0',    
22             {layers:'clabel,ctylabel,statelabel',transparent:true},    
23             {opacity:.5}    
24         );    
25        /*    
26         *   向map中添加Layers,这里我们不在使用前两章中的addLayer方法，    
27         *   需要注意的是这个方法的参数，没错是Layer对象的数组     
28         */    
29         map.addLayers([baseLayer,wms_layer_labels]);    
30         /**    
31          *  现在，我们手动的添加地图的第一控件  Layer Switcher，图层选择器.    
32          *  其中参数也有个匿名对象，不知道要什么参数，或者是继承来的     
33          */    
34          map.addControl(new OpenLayers.Control.LayerSwitcher({}));    
35         /**    
36          *  最后依然需要设置，地图显示区域 ，如果没有什么特殊的要求，我们可以使用前两章    
37          *  的方法map.zoomToMaxExtent();    
38          *  这里我把地图显示到河北 ，使用坐标和缩放等级的方法，缩放到河北大概在lon 116 lat 39左右    
39          *   //lon 经度   lat  纬度     
40          *    map.setCenter(new OpenLayers.LonLat(-116,56));    
41          *    map.zoomTo(5);    
42          *    或者 map.zoomToExent(new OpenLayers.Bounds([minX,minY,maxX,maxY]));//设置了一个矩形用于显示,    
43          */    
44          map.setCenter(new OpenLayers.LonLat(116,39));    
45          map.zoomTo(7);    
                     
47     }    
48 </script>    
49 </head>    
50 <body onload="initMap()">    
51     <div id="map" style=" 500px;height: 500px"></div>    
52 </body>    
53 </html>

显示效果

我们可以使用图层选择器来完成覆盖层的显示。值得注意的是我们虽然看到图层显示器里面虽然只显示两个图层，但这只是OpenLayers的概念，

实际上他使用了server端4个图层。大家尝试可以使用FireBug观察和检查代码。