zoukankan html css js c++ java

OpenLayersVector图层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                     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

查看全文

相关阅读:
HTML5之Canvas绘图(二) ——应用篇之七巧板
 Mock分页
 ant design pro 实战 : 使用 ztree
echarts 实战 : 怎么写出和自动生成的一样的 tooltip ?
react实战 : react 与 canvas
react实战 : react 与 svg
echarts 踩坑 : 为什么效果出不来？看看有没有正确引入
 react实战 : 用矩阵思想做一个自适应布局容器组件
 echarts 踩坑 : 为什么触摸柱状图的时后柱子不见了？原来是color的锅！
echarts 实战 : 图表竖着或横着是怎样判定的？

原文地址：https://www.cnblogs.com/marsprj/p/2916039.html