OpenLayers-Vector圖層Feature選擇工具

本文轉載自查看原文 2013-02-19 11:49 15689 OpenLayers/ WebGIS

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
 63                                                           });
 64         map.addControl(select_control);
 65         select_control.activate();
 66     }
 67 
 68     function addFeature(wkt, layer) 
 69     {
 70         var geometry = toGeometryFromWkt(wkt);
 71         if(wkt!=null)
 72         {
 73             layer.addFeatures(geometry);
 74         }
 75     }
 76     
 77     function toGeometryFromWkt(wkt)
 78     {
 79         var geometry = null;
 80         if(wkt_reader==null)
 81         {
 82             wkt_reader = new OpenLayers.Format.WKT();
 83         }
 84         geometry = wkt_reader.read(wkt);
 85         return geometry;
 86     }
 87 
 88     // Feature 選中事件響應
 89     function onFeatureSelect(feature) 
 90     {
 91         selectedFeature = feature;
 92         popup = new OpenLayers.Popup.FramedCloud("chicken", 
 93                                  feature.geometry.getBounds().getCenterLonLat(),
 94                                  null,
 95                                  "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",
 96                                  null, true, onPopupClose);
 97         feature.popup = popup;
 98         map.addPopup(popup);
 99         
100     }
101 
102     // Feature取消選中事件響應
103     function onFeatureUnselect(feature) 
104     {
105         map.removePopup(feature.popup);
106         feature.popup.destroy();
107         feature.popup = null;
108     }    
109 
110     function onPopupClose(evt) {
111         select_control.unselect(selectedFeature);
112     }
113 
114 
115   </script>
116 
117  </HEAD>
118  <BODY onload="init()">
119     <div>
120       <div id="map" class="smallmap"></div>
121     </div>
122  </BODY>
123 </HTML>
124

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 OpenLayers-Vector圖層上添加Feature OpenLayers學習筆記（五）— 拖拽Feature圖層 OpenLayers 3根據屬性選擇並高亮feature OpenLayers元素選擇工具 OpenLayers圖層 openlayers 聚合圖層點擊事件--點擊feature展示相關信息操作 openlayers 各種圖層，持續更新【05】openlayers 網格圖層 OpenLayers 圖層(Layers) 詳解 OpenLayers 3 的圖層控制控件