OpenLayers-Vector图层Feature选择工具

最新推荐文章于 2024-08-17 15:58:59 发布

韩慧兵

最新推荐文章于 2024-08-17 15:58:59 发布

阅读量1.8k

点赞数

分类专栏： WebGIS-Openlayers专题

本文链接：https://blog.csdn.net/xiaohan2826/article/details/49510217

版权

WebGIS-Openlayers专题专栏收录该内容

32 篇文章 3 订阅

订阅专栏

1、创建Vector图层

1 var vlayer = new OpenLayers.Layer.Vector("Vector Layer");
2 map.addLayer(vlayer);

2、创建Select Tool

1 // 创建select control
2 var sf = new OpenLayers.Control.SelectFeature(vlayer); 3 // 将select control添加到map上 4 map.addControl(sf ); 5 // 激活select control，否则select control不可用 6 sf.activate();

3、定义Select/UnSelect事件响应函数

 1 // Feature 选中事件响应
 2 function onFeatureSelect (feature)  3 {  4 alert("onFeatureSelect");  5 }  6 // Feature取消选中事件响应  7 function onFeatureUnselect (feature)  8 {  9 alert("onFeatureUnselect"); 10 }

4、注册事件

1 // 注册Select事件
2 sf.onSelect = onSelectFeature;
3 // 注册取消Select事件 4 sf.onUnselect = onUnSelectFeature;

5、更新onFeatureSelect函数，实现选中Feature时，弹出属性框功能

 1 function onFeatureSelect (feature) {
 2     selectedFeature = feature;
 3 popup = new OpenLayers.Popup.FramedCloud("chicken",  4  feature.geometry.getBounds().getCenterLonLat(),  5 null,  6 "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",  7 null,  8 true,  9  onPopupClose); 10 feature.popup = popup; 11  map.addPopup(popup); 12 }

定义关闭Popup框的响应函数，在这个函数中，取消选中图元的选择。

1 function onPopupClose (evt) {
2      // 取消选择 3  select_control.unselect(selectedFeature); 4 }

6、更新取消选择事件响应函数

图元取消选择后，就删除弹出的对话框

1 // Feature取消选中事件响应
2 function onFeatureUnselect (feature) 3 { 4  map.removePopup(feature.popup); 5  feature.popup.destroy(); 6 feature.popup = null; 7 }

下图为鼠标点击选中图元，弹出对话框，显示图元的ID和面积

下图为鼠标点击空白区域，需要选择，删除原来的对话框

完整代码

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2 <HTML>  3 <HEAD>  4 <TITLE> OpenLayer : Feature 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 <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script>  8 <script type="text/javascript">  9  10 var map = null;  11 var wms_url = "http://192.168.111.156:8080/geoserver/wms?";  12 var wms_version = "1.3.0";  13 var layer_name = 'country';  14  15 var wms_layer = null;  16 var vector_layer = null;  17 var select_control = null; // SelectFeature Control  18  19 var wkt_reader = null;  20 var point = "POINT(-10 -10)";  21 var line = "LINESTRING(-180 90, 0 0)";  22 var polygon = "POLYGON(0 0,0 90,180 90,180 0,0 0)";  23  24 function init()  25  {  26 //创建map对象，  27  map = new OpenLayers.Map("map");  28  wms_layer = new OpenLayers.Layer.WMS("OpenLayers WMS",  29  wms_url,  30  {layers: layer_name, version: wms_version},  31  {singleTile: true});  32  33  vector_layer = new OpenLayers.Layer.Vector("Vector");  34  35 // 添加图层  36  map.addLayers([wms_layer, vector_layer]);  37  map.addControl( new OpenLayers.Control.LayerSwitcher() );  38  39 // 在Vector图层上添加图元element  40  addFeature(point , vector_layer);  41  addFeature(line , vector_layer);  42  addFeature(polygon, vector_layer);  43  44  addSelectControl(map, vector_layer);  45  46 // 放大到全屏  47  map.zoomToMaxExtent();  48  }  49  50 function addSelectControl(map, vector_layer)  51  {  52 if(select_control!=null)  53  {  54 return ;  55  }  56  alert("addSelectControl");  57  select_control =  58 new OpenLayers.Control.SelectFeature(vector_layer,  59  {  60  hover: false,  61  onSelect: onFeatureSelect,  62  onUnselect: onFeatureUnselect