OpenLayers-Vector图层Feature选择工具
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