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

  • 首先我们还是先把所有要用到类实例化出来，参考代码：
View Code 
1 var map=new OpenLayers.Map("map");
2 var vectorLayer = new OpenLayers.Layer.Vector();
3 map.addLayer(vectorLayer);
  • 矢量要素的单击事件，仅需在实例化类时注册onSelect事件即可，参考代码：
View Code 
1 var sf=new OpenLayer.Control.SelectFeature(vectorLayer,{onSelect:function(currentFeature){//todo}});
2 map.addControl(sf);
  • 矢量要素的鼠标移入事件，需要实例化时注册onSelect事件，同时设置hover属性为true，参考代码：
View Code 
1 var sf=new OpenLayer.Control.SelectFeature(vectorLayer,{onSelect:function(currentFeature){todo},hover:true});
2 map.addControl(sf);
  • 矢量要素的鼠标各种事件的混合操作，如需要鼠标移入、移出、单击、双击等事件，参考代码：
View Code 
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事件永不触发：
View Code 
 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);