OpenLayers-Vector图层Feature选择工具

by · 2019-04-03

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