OpenLayers簡單介紹以及簡單實例

時間 2019-11-11

標籤 openlayers 簡單介紹以及實例简体版

原文原文鏈接

OpenLayers是一個強大的JavaScript包，能夠從它的官網免費下載。OpenLayers包含了不少強大的網頁地圖展現與操做功能，而且可以將不一樣源的圖層展現在同一張地圖中，支持各類第三方的地圖API（如：Google,Yahoo,Bing,OSW,Baidu以及天地圖等），固然OL也支持由你本身服務器（如Geoserver）發佈的一些地圖服務（WMS,WFS等）。javascript

下載好OL的包，將解壓後文件夾中的OpenLayers.js文件、theme文件夾和img文件夾拷貝出來，放在你網頁文件的同一個目錄下（或其餘你網頁能夠調用到的位置）。而後就能夠新建一個html文件用於地圖展現了。html

先來一段示例代碼：java

 1 <!DOCTYPE html>
 2 <html lang='en'>
 3 <head>
 4     <meta charset='utf-8' />
 5     <title>My OpenLayers Map</title>
 6     <script type='text/javascript' src='OpenLayers.js'></script>
 7     <script type='text/javascript'>
 8 
 9     var map;
10 
11     function init() {
12        map = new OpenLayers.Map('map_element', {
13        
14        });
15        var wms = new OpenLayers.Layer.WMS(
16            'wmsL',
17             'http://vmap0.tiles.osgeo.org/wms/vmap0',
18             {layers: 'basic'},
19             {IsBaseLayer: 'true'}
20     );
21 
22      map.addLayer(wms);
23      if(!map.getCenter()){
24       map.zoomToMaxExtent();
25      }
26 }
27 
28     </script>
29 </head>
30 <body onload='init();'>
31     <div id='map_element' style='width: 1000px; height: 500px;'></div>
32 </body>
33 </html>

以上有幾個點須要注意：api

1.第6行爲引用下載的OpenLayers.js包的標籤語句，其中src屬性表示的即是OpenLayers包的位置，此處爲相對路徑。固然也能夠引用絕對路徑或官網的路徑（要聯網哦），引用OL官網路徑的方式以下：服務器

<script type='text/javascirpt'     src='http://openlayers.org/api/OpenLayers.js'></script>

2.注意OL中map和layer的概念，map是用來展現地圖的容器，layer是來自服務器的圖層，每一個map能夠加載0個，1個或多個layer。由於JavaScript是面向對象的語言，因此上面說的map和layer都是類，須要聲明對象來實例化。layer有不少的子類，每種子類表明一種類型的圖層，好比本例中的OpenLayers.Layer.WMS它用於顯示WMS服務的圖層，還有其餘子類如：OpenLayers.Layer.Google（用於顯示谷歌地圖），OpenLayers.Layer.Vector（用於展現矢量圖層）等等，這些類的具體屬性以及初始化所需的參數，能夠經過OpenLayers文檔查詢，本例中的OpenLayers.Layer.WMS的構造函數有四個參數，分別爲WMS圖層的名字、請求WMS服務的url（能夠加上一些request參數）、這是一個包含多個鍵值對的匿名對象（這個對象裏的鍵值對會做爲參數傳遞給服務器）以及wms layer本身的一些屬性設置（也是一些鍵值對組成的匿名對象）。本例中WMS圖層的初始化過程爲：ide

1  var wms = new OpenLayers.Layer.WMS(
2           'wmsL',
3           'http://vmap0.tiles.osgeo.org/wms/vmap0',
4           {layers: 'basic'},
5           {IsBaseLayer: 'true'}
6  );

第一個參數爲圖層名，第二個爲服務器url，第三個爲發給服務器的參數（本例中只有一個，表示請求的圖層叫basic，能夠有不少個，參見API文檔），第四個參數爲layer在客戶端的一些屬性，本例中表示這個圖是基礎圖層。函數

3.剛纔說了OpenLayers中map能夠添加多個layer，那麼有幾種添加方法呢？本例中使用了map類的addLayer方法，除了這種方法還能夠在map初始化時將已經聲明好的layer做爲其參數：ui

var map =new OpenLayers.Map('map_element',{layers:[Layer1,Layer2,...]});

4.要注意，map構造函數的第一個參數是未來要顯示這個map的html標籤的id（通常狀況下使用div標籤顯示地圖），第二個參數爲包含map屬性的匿名對象。url

好了，一個簡單的OL網頁就須要注意這些了。spa

參考文獻：OpenLayers 2.10 Beginner's Guide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。