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 "
Feature: " + feature.id +"
Area: " + feature.geometry.getArea()+"
", 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和面积 

OpenLayers-Vector图层Feature选择工具_第1张图片

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

 OpenLayers-Vector图层Feature选择工具_第2张图片

 

完整代码

复制代码
  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 

转载于:https://www.cnblogs.com/hanhuibing/articles/4177659.html

你可能感兴趣的:(javascript,ViewUI)