OpenLayers是一個javascript編寫的開源WebGIS客戶端軟件，后端可連接標准的OGC WMS/WFS/WCS的WebGIS服務以及Google Map，Microsoft Virtual Earth等空間數據。
OpenLayers具有豐富的功能，可用來開發WebGIS客戶端應用程序，目前的穩定版本是2.12。
下面利用在GeoServer發布WMS/WFS服務中發布的WMS服務，來實現一個簡單的加載和現實WMS服務數據的OpenLayers程序。
1.下載OpenLayers
OpenLayers可以在http://www.openlayers.org/download/OpenLayers-2.12.zip處下載。解壓后放到tomcat的webapps目錄下，OpenLayers的目錄結構為
2. 創建map-wms.html文件，並存在tomcat下的OpenLayers目錄下
3. 添加OpenLayers庫的js引用
1 <script src="./OpenLayers/lib/OpenLayers.js"></script>
4. 添加OpenLayers的css引用
1 <link rel="stylesheet" href="./theme/default/style.css" type="text/css" /> 2 <link rel="stylesheet" href="./css/style.css" type="text/css" />
5.定義wms參數
1 <script type="text/javascript"> 2 //定義wms url地址 3 var wms_url = "http://127.0.0.1:8080/geoserver/world/wms?"; 4 //定義wms圖層 5 var wms_layer = "world:country,world:cities"; 6 //定義wms map圖片格式 7 var wms_format = 'image/png'; 8 </script>
6. 定義html初始化函數，在這個函數中加載wms layer並顯示
1 <script type="text/javascript"> 2 //定義OpenLayers map對象 3 var map = null; 4 function init() 5 { 6 //創建map對象， 7 map = new OpenLayers.Map("map"); 8 //創建WMS layer對象 9 var layer = new OpenLayers.Layer.WMS("WMS Country", wms_url, 10 { 11 layers: wms_layer, 12 format: wms_format, 13 singleTile: true 14 }); 15 // 添加圖層 16 map.addLayer(layer); 17 // 放大到全屏 18 map.zoomToMaxExtent(); 19 } 20 </script>
7. 設置html onload函數為init()
1 <body onload="init()"> 2 … 3 </body>
8.定義OpenLayers的map容器
1 <body onload="init()"> 2 <div id="map" class="smallmap"></div> 3 </body>
9. 在瀏覽器中鍵入http://127.0.0.1:8080/OpenLayers/map-wms.html，顯示OpenLayer界面
完整的代碼如下
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> OpenLayers : WMS </TITLE> 5 6 <link rel="stylesheet" href="./theme/default/style.css" type="text/css" /> 7 <link rel="stylesheet" href="./css/style.css" type="text/css" /> 8 9 <script src="./lib/OpenLayers.js"></script> 10 11 <script type="text/javascript"> 12 13 //定義OpenLayers map對象 14 var map = null; 15 16 //定義wms url地址 17 var wms_url = "http://127.0.0.1:8080/geoserver/world/wms?"; 18 //定義wms圖層 19 var wms_layer = "world:country,world:cities"; 20 //定義wms map圖片格式 21 var wms_format = 'image/png'; 22 23 function init() 24 { 25 //創建map對象， 26 map = new OpenLayers.Map("map"); 27 //創建WMS layer對象 28 var layer = new OpenLayers.Layer.WMS("WMS Country", wms_url, 29 { 30 layers: wms_layer, 31 format: wms_format, 32 singleTile: true 33 }); 34 // 添加圖層 35 map.addLayer(layer); 36 // 放大到全屏 37 map.zoomToMaxExtent(); 38 } 39 40 </script> 41 42 </HEAD> 43 44 <body onload="init()"> 45 <div id="map" class="smallmap"></div> 46 </body> 47 </HTML>