工具的使用步驟請參考
OpenLayers系列(1)——入門示例 一節(jié)。
多圖層地圖的構(gòu)成
多圖層的地圖由兩種圖層構(gòu)成:base layer 和overlay layer 。
Base layer: 任何一個(gè)地圖中都存在至少一個(gè)圖層,否則你的應(yīng)用將呈現(xiàn)空白,我們把最基本的一個(gè)圖層稱為base layer。Base layer不止一種或一個(gè),你可以選擇任意一個(gè)圖層作為應(yīng)用的base layer,但是任何時(shí)候base layer都只能有一個(gè)是turn on的,如果程序在打開一個(gè)base layer時(shí)發(fā)現(xiàn)已經(jīng)存在另一個(gè)打開著的base layer,則應(yīng)用會(huì)關(guān)掉之前的base layer而使用最近打開的一個(gè)。所以base layer在地圖中的概念就像是(radio
button)一個(gè)單選按鈕。
Overlay layer: 非base layer的圖層統(tǒng)稱為overlay layer。應(yīng)用中可使用并同時(shí)打開任何多的overlay layer,你可以使用參數(shù)設(shè)置該層是否顯示。Overlay layer在地圖中的概念就像是(checkbox)多選框。
以上概念你可以在OpenLayers提供的一個(gè)圖層切換器上形象地看到。
示例1
以下是一個(gè)包含兩個(gè)圖層和圖層切換器的示例,該示例在base layer上加上了國家,城市,洲名層:
![](http://image109.360doc.com/DownloadImg/2017/11/1619/116362069_1_2017111607183786.png)
打開圖層切換器:
![](http://image109.360doc.com/DownloadImg/2017/11/1619/116362069_2_20171116071837523.png)
示例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( //定義第一個(gè)層
- 'Base layer',
- 'http://vmap0.tiles./wms/vmap0',
- {layers: 'basic'},//向map server請求basic層
- {isBaseLayer: true}//設(shè)置該層為basic層
- );
-
- var wms_layer_labels = new OpenLayers.Layer.WMS(//定義第二個(gè)層
- 'Location Labels',
- 'http://vmap0.tiles./wms/vmap0',
- {layers: 'clabel,ctylabel,statelabel',
- transparent: true},
- {opacity: .5}//設(shè)置透明度為50%
- );
-
- map.addLayers([wms_layer_map, wms_layer_labels]);//以數(shù)組形式將多個(gè)層加入map對象
-
- map.addControl(new OpenLayers.Control.LayerSwitcher({}));//添加一個(gè)層切換器
-
- if(!map.getCenter()){
- map.zoomToMaxExtent();
- }
- }
-
- </script>
- </head>
-
- <body onload='init();'>
- <div id='map_element' style='width: 500px; height: 500px;'>
- </div>
- </body>
- </html>
示例2
示例2主要展示部分圖層參數(shù)的效果,該示例一共有5個(gè)圖層,第個(gè)圖層有不同效果,可以不斷放大查看。
![](http://image109.360doc.com/DownloadImg/2017/11/1619/116362069_3_20171116071837758.png) ![](http://image109.360doc.com/DownloadImg/2017/11/1619/116362069_4_20171116071838445.png)
代碼如下:
- <!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./wms/vmap0',
- {layers: 'basic'},
- {isBaseLayer: true}
- );
-
- var wms_layer_labels = new OpenLayers.Layer.WMS(//國家,洲,城市名層
- 'Location Labels',
- 'http://vmap0.tiles./wms/vmap0',
- {layers: 'clabel,ctylabel,statelabel',
- transparent: true},
- {visibility: false, opacity:0.5}//默認(rèn)不顯示該層(但可以圖層切換器中打開)
- );
-
- var wms_state_lines = new OpenLayers.Layer.WMS(//洲界層
- 'State Line Layer',
- 'http://labs./wms/vmap0',
- {layers: 'stateboundary',
- transparent: true},
- {displayInLayerSwitcher: false, //設(shè)置該層不顯示在圖層切換器中
- minScale: 13841995.078125}//設(shè)置一個(gè)最小尺度,只有當(dāng)?shù)貓D在縮放時(shí)達(dá)到這個(gè)最小尺度時(shí)才顯示該圖層信息
- );
-
- var wms_water_depth = new OpenLayers.Layer.WMS(
- 'Water Depth',
- 'http://labs./wms/vmap0',
- {layers: 'depthcontour',
- transparent: true},
- {opacity:0.8}
- );
-
- var wms_roads = new OpenLayers.Layer.WMS(
- 'Roads',
- 'http://labs./wms/vmap0',
- {layers: 'priroad,secroad,rail',
- transparent: true},
- {transistionEffect:'resize'}//讓該圖層在縮放時(shí)呈現(xiàn)重新計(jì)算的效果
- );
-
- 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>
|