array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v；报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树（Expression）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例：事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 OpenLayers-Vector图层Feature选择工具 - 爱码网

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和面积 

OpenLayers-Vector图层Feature选择工具

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

 OpenLayers-Vector图层Feature选择工具

 

完整代码

  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

 

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode