OpenLayers支持通過WMS的GetFeatureInfo(參考WMS說明)方法來實現地圖上的點擊查詢。
1.定義MapClick事件響應函數
1 function onMapClick(e){ 2 var params = { 3 REQUEST: "GetFeatureInfo", // WMS GetFeatureInfo 4 BBOX: map.getExtent().toBBOX(), // 地圖的地圖范圍 5 WIDTH: map.size.w, // 地圖的寬度 6 HEIGHT: map.size.h, // 地圖高度 7 X: e.xy.x, // 屏幕坐標X 8 Y: e.xy.y, // 屏幕坐標X 9 QUERY_LAYERS: map.layers[0].params.LAYERS, // 定義要查詢的圖層 10 INFO_FORMAT: "text/html", // GetFeatureInfo返回格式 11 FEATURE_COUNT: 50, // 最大返回的Feature個數 12 Layers: wms_layer, // WMS 圖層列表 13 Styles: "", // 圖層樣式 14 format: "image/png" // 地圖格式 15 EXCEPTIONS: "application/vnd.ogc.se_xml" // Exception 類型 16 }; 17 OpenLayers.loadURL(wms_url, params, this, onComplete, onFailure); 18 OpenLayers.Event.stop(e);
1) 定義請求GetFeatureInfo請求參數
onMapClick使用一個json數據結定義了WMS GetFeatureInfo的參數。
onMapClick的參數e，可以或得到當前鼠標點擊位置的屏幕坐標x,y。GetFeatureInfo通過屏幕坐標x,y和地圖的寬度高度，計算當前坐標的地圖坐標位置mapX,mapY，然后再通過mapY和mapY查詢圖元。
4~9行的參數定義了查詢的參數，10行定義可返回數據的格式。
2. 發送請求
然后再通過OpenLayers.loadURL方法向服務器端發送WMS GetFeatureInfo請求。
OpenLayers.loadURL使用異步通訊，需要定義請求成功和請求失敗的兩個事件響應函數
3. 定義請求成功響應函數
1 // 事件完成函數 2 function onComplete (response){ 3 document.getElementById('click_response').innerHTML = response.responseText; 4 }
請求成功后，將返回的結果顯示在id為click_response的div標簽中。
4. 定義請求失敗響應函數
1 // 事件失敗響應函數 2 function onFailure (response){ 3 document.getElementById('click_response').innerHTML = response.responseText; 4 }
請求成功后，將返回的結果顯示在id為click_response的div標簽中。
5. 注冊map click事件
1 map.events.register("click", map, onMapClick);
完整的代碼
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> OpenLayers : Click Select </TITLE> 5 <link rel="stylesheet" href="./OpenLayers-2.10/theme/default/style.css" type="text/css" /> 6 <link rel="stylesheet" href="css/style.css" type="text/css" /> 7 <style type="text/css"> 8 #wrapper 9 { 10 width: 800px; 11 } 12 #screen_xy { 13 float: left; 14 } 15 #map_xy { 16 float: right; 17 } 18 </style> 19 <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script> 20 <script type="text/javascript"> 21 22 var map = null; 23 var wms_url = "http://192.168.111.156:8080/geoserver/wms?"; 24 var wms_layer = "world:country"; 25 var wms_format = 'image/png'; 26 27 function init() 28 { 29 //創建map對象， 30 map = new OpenLayers.Map("map"); 31 var layer = new OpenLayers.Layer.WMS("WMS Country", wms_url, 32 { 33 layers: wms_layer, 34 format: wms_format, 35 singleTile: true 36 }); 37 // 添加圖層 38 map.addLayer(layer); 39 40 // 注冊map事件 41 map.events.register("click", map, onMapClick); 42 43 // 放大到全屏 44 map.zoomToMaxExtent(); 45 } 46 47 function onMapClick(e){ 48 var params = { 49 REQUEST: "GetFeatureInfo", // WMS GetFeatureInfo 50 BBOX: map.getExtent().toBBOX(), // 地圖的地圖范圍 51 WIDTH: map.size.w, // 地圖的寬度 52 HEIGHT: map.size.h, // 地圖高度 53 X: e.xy.x, // 屏幕坐標X 54 Y: e.xy.y, // 屏幕坐標X 55 QUERY_LAYERS: map.layers[0].params.LAYERS, // 定義要查詢的圖層 56 INFO_FORMAT: "text/html", // GetFeatureInfo返回格式 57 FEATURE_COUNT: 50, // 最大返回的Feature個數 58 Layers: wms_layer, // WMS 圖層列表 59 Styles: "", // 圖層樣式 60 format: "image/png" // 地圖格式 61 EXCEPTIONS: "application/vnd.ogc.se_xml" // Exception 類型 62 }; 63 OpenLayers.loadURL(wms_url, 64 params, 65 this, 66 onComplete, //完成處理函數 67 onFailure); //失敗處理函數 68 OpenLayers.Event.stop(e); 69 } 70 71 function onComplete(response) 72 { 73 alert(response.responseText); 74 document.getElementById('click_response').innerHTML = response.responseText; 75 } 76 function onFailure(response) 77 { 78 alert("onFailure"); 79 document.getElementById('click_response').innerHTML = response.responseText; 80 } 81 </script> 82 83 </HEAD> 84 85 <BODY onload="init()"> 86 <div id="map" class="smallmap"></div> 87 <div id="click_response"></div> 88 </BODY> 89 </HTML>