`
eric_hwp
  • 浏览: 126704 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

OpenLayers.Control.SelectFeature

 
阅读更多

转载链接:http://www.cnblogs.com/wanghl-GIS/archive/2012/10/31/2748300.html

 

在OpenLayers中,控件SelectFeature主要用于操作(鼠标移入、移出、单击、双击)矢量图层(OpenLayers.Layer.Vector)的要素。那么它是如何实现的呢,还是让我们看代码吧。

  • 首先我们还是先把所有要用到类实例化出来,参考代码:
1 var map=new OpenLayers.Map("map");
2 var vectorLayer = new OpenLayers.Layer.Vector();
3 map.addLayer(vectorLayer);
  • 矢量要素的单击事件,仅需在实例化类时注册onSelect事件即可,参考代码:
1 var sf=new OpenLayer.Control.SelectFeature(vectorLayer,{onSelect:function(currentFeature){//todo}});
2 map.addControl(sf);
  • 矢量要素的鼠标移入事件,需要实例化时注册onSelect事件,同时设置hover属性为true,参考代码:
1 var sf=new OpenLayer.Control.SelectFeature(vectorLayer,{onSelect:function(currentFeature){todo},hover:true});
2 map.addControl(sf);
  • 矢量要素的鼠标各种事件的混合操作,如需要鼠标移入、移出、单击、双击等事件,参考代码:
复制代码
1 var callbacks = {
2     over:function(currentFeature){},
3     out:function(currentFeature){},
4     dblclick:function(currentFeature){}
5 };
6 var sf = new OpenLayers.Control.SelectFeature(vectorLayer,{
7     onSelect:function(currentFeature){},
8 });
9 map.addControl(sf);
复制代码
  • 对于事件的混合操作行为,我们不能在callbacks对象中同时注册click和dblclick事件,这样的话单击事件会屏蔽双击事件。对于下述代码,dblclick事件永不触发:
复制代码
 1 var callbacks = {
 2      over:function(currentFeature){},
 3      out:function(currentFeature){},
 4      click:function(currentFeature){},
 5      dblclick:function(currentFeature){}
 6 };
 7 var sf = new OpenLayers.Control.SelectFeature(vectorLayer,{
 8      onSelect:function(currentFeature){},
 9  });
10 map.addControl(sf);
复制代码

 

分享到:
评论

相关推荐

    openLayers_geoserver常见问题.

    OpenLayers 提供了多种方式来实现字段标注,例如使用 `OpenLayers.Control.SelectFeature` 或 `OpenLayers.Control.GetFeatureInfo`。以下代码示例使用 `OpenLayers.Control.SelectFeature` 实现字段标注: ```...

    OpenLayers.mobile.debug.js

    OpenLayers.mobile.debug.js

    OpenLayers.debug.js

    OpenLayers.debug.js

    openlayersAPI研究文档

    OpenLayers.Control.LayerSwitcher 是一个继承自 OpenLayers.Control 的类,用于提供图层切换的功能。通过 OpenLayers.Class() 方法可以定义一个类,并继承自其他类。OpenLayers.Class() 方法的第一个参数是父类,第...

    OpenLayers.zip

    在提供的压缩包“OpenLayers.zip”中,有两个主要的子文件:v6.2.1.zip和v6.2.1-dist.zip。这表明我们获取的是OpenLayers库的两个不同版本。其中,v6.2.1.zip通常包含完整的源代码,这对于开发者来说非常重要,因为...

    openlayers 教程

    map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); map.addControl(new OpenLayers.Control.Permalink()); ``` 加载地图数据 使用 Geoserver 加载 WMS 地图数据。首先,需要在 ...

    Packt.OpenLayers.3.x.Cookbook.2nd.Edition.2016.3.pdf

    ### OpenLayers 3.x Cookbook 第二版 知识点概览 #### 一、书籍基本信息与版权信息 - **书名**:《OpenLayers 3.x Cookbook》第二版 - **出版时间**:2016年3月 - **出版社**:Packt Publishing - **作者**: - ...

    最全最新的中文openLayers_api

    - 添加控制:`map.addControl(new OpenLayers.Control.ScaleLine());` - 自定义事件监听:`layer.events.register("click", layer, function(e) {...});` 6. **矢量对象** - 创建点、线、面:`new OpenLayers....

    Openlayers使用地图数据.docx

    通过`new OpenLayers.Control.SelectFeature(layer)`创建了一个选择特征的控制,并将其添加到地图中,激活后用户可以与地图上的对象交互。 在文档中提到了坐标转换,这在处理地理坐标时非常重要。WGS1984是一种广泛...

    Openlayers经典例子.doc

    var modifyControl = new OpenLayers.Control.ModifyFeature(vectorLayer); map.addLayers([vectorLayer]); map.addControl(modifyControl); modifyControl.activate(); ``` #### 四、鹰眼 “鹰眼”通常指...

    OpenLayers.2.10.Beginners.Guide (英文版)

    《OpenLayers 2.10 Beginners Guide》是一本专为初学者设计的开源地图库OpenLayers的指南。这本书深入浅出地介绍了如何使用OpenLayers这一强大的JavaScript库来创建交互式的Web地图应用。OpenLayers是一个流行的...

    vue整合openlayers.zip

    在“vue整合openlayers.zip”中,我们可以预期包含的资源将指导我们如何在Vue项目中集成OpenLayers,并通过GeoServer获取和展示地理信息数据。下面,我们将深入探讨这三个技术的整合以及可能涉及的知识点: 1. **...

    OpenLayers 类分析(一)

    本篇将对OpenLayers 源码中的一些核心类进行分析,特别是与事件处理相关的类,如OpenLayers.Events、OpenLayers.Control等。阅读本文之前,建议读者具备一定的 OpenLayers 使用经验。 首先,我们来看OpenLayers....

    OpenLayers中文API

    - `OpenLayers.Control.LayerSwitcher`允许用户在地图上切换显示和隐藏图层,方便用户定制视图。 11. **标记(Markers)** - `OpenLayers.Marker`用于在地图上放置标记,通常与`OpenLayers.Icon`一起使用,自定义...

    openlayers开发用到的js库.zip

    OpenLayers 是一个强大的开源JavaScript库,专用于在Web上创建交互式地图应用。它支持多种数据源,包括WMS、WFS、KML、GeoJSON等,并且兼容各种浏览器,包括移动设备。这个"openlayers开发用到的js库.zip"压缩包很...

    openlayers热力图用heatmap.js

    `heatmap.js` 是基础库,而`heatmap-openlayers.js` 可能是专门为OpenLayers定制的一个版本,它可能包含了将heatmap.js集成到OpenLayers的特定函数或适配器。 下面是如何使用OpenLayers和heatmap.js创建热力图的...

Global site tag (gtag.js) - Google Analytics