OpenLayers-点击查询

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,                      //

转载自:https://blog.csdn.net/xiaohan2826/article/details/49510205

You may also like...