整理轉自：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="width: 500px;height: 500px"></div> 52 </body> 53 </html>
顯示效果
我們可以使用圖層選擇器來完成覆蓋層的顯示。值得注意的是我們雖然看到圖層顯示器里面雖然只顯示兩個圖層，但這只是OpenLayers的概念，
實際上他使用了server端4個圖層。大家嘗試可以使用FireBug觀察和檢查代碼。