OpenLayers系列(2)——多個圖層
阿新 • • 發佈：2019-01-29
多圖層地圖的構成
多圖層的地圖由兩種圖層構成：base layer 和overlay layer 。
Base layer: 任何一個地圖中都存在至少一個圖層，否則你的應用將呈現空白，我們把最基本的一個圖層稱為base layer。Base layer不止一種或一個，你可以選擇任意一個圖層作為應用的base layer，但是任何時候base layer都只能有一個是turn on的，如果程式在開啟一個base layer時發現已經存在另一個開啟著的base layer，則應用會關掉之前的base layer而使用最近開啟的一個。所以base layer在地圖中的概念就像是(radio button)一個單選按鈕。
Overlay layer: 非base layer的圖層統稱為overlay layer。應用中可使用並同時開啟任何多的overlay layer，你可以使用引數設定該層是否顯示。Overlay layer在地圖中的概念就像是(checkbox)多選框。
以上概念你可以在OpenLayers提供的一個圖層切換器上形象地看到。
示例1
以下是一個包含兩個圖層和圖層切換器的示例，該示例在base layer上加上了國家，城市，洲名層：
開啟圖層切換器：
示例1程式碼：
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <title>My OpenLayers Map</title> <script type='text/javascript' src='OpenLayers.js'></script> <script type='text/javascript'> var map; function init() { map = new OpenLayers.Map('map_element', {});//初始化map物件 var wms_layer_map = new OpenLayers.Layer.WMS( //定義第一個層 'Base layer', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'basic'},//向map server請求basic層 {isBaseLayer: true}//設定該層為basic層 ); var wms_layer_labels = new OpenLayers.Layer.WMS(//定義第二個層 'Location Labels', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'clabel,ctylabel,statelabel', transparent: true}, {opacity: .5}//設定透明度為50% ); map.addLayers([wms_layer_map, wms_layer_labels]);//以陣列形式將多個層加入map物件 map.addControl(new OpenLayers.Control.LayerSwitcher({}));//新增一個層切換器 if(!map.getCenter()){ map.zoomToMaxExtent(); } } </script> </head> <body onload='init();'> <div id='map_element' style='width: 500px; height: 500px;'> </div> </body> </html>
示例2
示例2主要展示部分圖層引數的效果，該示例一共有5個圖層，第個圖層有不同效果，可以不斷放大檢視。
程式碼如下：
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <title>My OpenLayers Map</title> <script type='text/javascript' src='OpenLayers.js'></script> <script type='text/javascript'> var map; function init() { map = new OpenLayers.Map('map_element', {}); var wms_layer_map = new OpenLayers.Layer.WMS(//base layer 'Base layer', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'basic'}, {isBaseLayer: true} ); var wms_layer_labels = new OpenLayers.Layer.WMS(//國家，洲，城市名層 'Location Labels', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'clabel,ctylabel,statelabel', transparent: true}, {visibility: false, opacity:0.5}//預設不顯示該層(但可以圖層切換器中開啟) ); var wms_state_lines = new OpenLayers.Layer.WMS(//洲界層 'State Line Layer', 'http://labs.metacarta.com/wms/vmap0', {layers: 'stateboundary', transparent: true}, {displayInLayerSwitcher: false, //設定該層不顯示在圖層切換器中 minScale: 13841995.078125}//設定一個最小尺度，只有當地圖在縮放時達到這個最小尺度時才顯示該圖層資訊 ); var wms_water_depth = new OpenLayers.Layer.WMS( 'Water Depth', 'http://labs.metacarta.com/wms/vmap0', {layers: 'depthcontour', transparent: true}, {opacity:0.8} ); var wms_roads = new OpenLayers.Layer.WMS( 'Roads', 'http://labs.metacarta.com/wms/vmap0', {layers: 'priroad,secroad,rail', transparent: true}, {transistionEffect:'resize'}//讓該圖層在縮放時呈現重新計算的效果 ); map.addLayers([ wms_layer_map, wms_layer_labels, wms_state_lines, wms_water_depth, wms_roads]); map.addControl(new OpenLayers.Control.LayerSwitcher({})); if(!map.getCenter()){ map.zoomToMaxExtent(); } } </script> </head> <body onload='init();'> <div id='map_element' style='width: 500px; height: 500px;'> </div> </body> </html>