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這個類。
從上面的圖可以看到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: <script type="text/javascript">
8: var map;
9: function init() {
10: map = new OpenLayers.Map('map', {});
11: //創建基底圖層
12: //layers:'basic' 向WMS服務請求basic圖層
13: //isBaseLayer: 將圖層設為基底圖層
14: var wms_layer_map = new OpenLayers.Layer.WMS(
15: 'Base layer',
16: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
17: { layers: 'basic' },
18: { isBaseLayer: true }
19: );
20: //創建疊加圖層
21: //layers: 'clabel,ctylabel,statelabel' 向WMS服務請求一些不同的label圖層
22: //transparent:true 從服務器返回的地圖圖像是透明的
23: //opacity:.5 客戶端圖層半透明
24: var wms_layer_labels = new OpenLayers.Layer.WMS(
25: 'Location Labels',
26: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
27: { layers: 'clabel,ctylabel,statelabel', transparent: true },
28: { opacity: 1 }
29: );
30: //添加圖層到地圖
31: map.addLayers([wms_layer_map, wms_layer_labels]);
32: if (!map.getCenter()) {
33: map.zoomToMaxExtent();
34: }
35: }
36: </script>
37: </head>
38: <body onload="init()">
39: <div id='map' style='width: 500px; height: 500px;'>
40: </div>
41: </body>
42: </html>
以上代碼的解釋我都寫成了注釋。
運行效果如下圖所示：
實例2 配置options參數
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta content="charset=utf-8" />
5: <title>配置options參數</title>
6: <script src="OpenLayers.js" type="text/javascript"></script>
7: <script type="text/javascript">
8: //東經120°
9: var lon = 120;
10: //北緯39°
11: var lat = 39;
12: //縮放級別6
13: var zoom = 6;
14: var map;
15: function init() {
16: map = new OpenLayers.Map('map', {});
17: //創建基底圖層
18: var wms_layer_map = new OpenLayers.Layer.WMS(
19: "Base layer",
20: "http://vmap0.tiles.osgeo.org/wms/vmap0",
21: { layers: "basic" },
22: { isBaseLayer: true }
23: );
24: //創建Label圖層
25: //設置options的visibility:false使圖層不顯示
26: var wms_layer_labels = new OpenLayers.Layer.WMS(
27: "Location Labels",
28: "http://vmap0.tiles.osgeo.org/wms/vmap0",
29: { layers: "clabel,ctylabel,statelabel", transparent: true },
30: { visibility: false, opacity: .5 }
31: );
32: //創建stateboundary圖層
33: //layers:stateboundary 向WMS服務請求stateboundary圖層
34: //設置optioins的displayInLayerSwitcher:false使該圖層不顯示在Switcher Control
35: //minScale表示只有達到一定的縮放比例該圖層才會顯示
36: var wms_state_lines = new OpenLayers.Layer.WMS(
37: "State Line Layer",
38: "http://labs.metacarta.com/wms/vmap0",
39: { layers: "stateboundary", transparent: true },
40: { displayInLayerSwitcher: false, minScale: 13841995.078125 }
41: );
42: //創建depthcontour圖層
43: //設置opacity:.8
44: var wms_water_depth = new OpenLayers.Layer.WMS(
45: "Water Depth",
46: "http://labs.metacarta.com/wms/vmap0",
47: { layers: "depthcontour", transparent: true },
48: { opacity: .8 }
49: );
50: //創建一些road圖層,包括一級公路、二級公路和鐵路
51: //設置options的transitionEffect: "resize"，使圖層放大或縮小時產生調整大小的動畫效果
52: var wms_roads = new OpenLayers.Layer.WMS(
53: "Roads",
54: "http://labs.metacarta.com/wms/vmap0",
55: { layers: "priroad,secroad,rail", transparent: true },
56: { transitionEffect: "resize" }
57: );
58: map.addLayers([wms_layer_map, wms_layer_labels, wms_state_lines, wms_water_depth, wms_roads]);
59: //設置地圖的中心位置
60: map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
61: //添加Switcher Control
62: map.addControl(new OpenLayers.Control.LayerSwitcher());
63: }
64: </script>
65: </head>
66: <body onload="init()">
67: <div id="map" style="width: 1000px; height: 600px;">
68: </div>
69: </body>
70: </html>
最后運行，如下圖所示效果
右上角藍色的是Switcher Control，可以看到Location Labels是沒有顯示的，這就是在前面代碼里設置了visibility：false的效果。還有stateboundary圖層沒有顯示在Switcher Control中，這是因為該圖層設置了displayInLayerSwitcher: false。另外縮小地圖，可以看到邊界線消失了，這正是設置minScale的作用，只有達到一定縮放比例邊界線才會顯示出來。
這篇文章就先介紹這些吧，有很多地方沒有涉及全面，不過在后面的文章中會一點一點介紹到的，希望對OpenLayers感興趣的朋友繼續關注，有經驗的多提點建議。