OpenLayers-2.13.1 要素的4个事件绑定featureclick nofeatureclick featureover featureout

  
    
    
    
    
    
    
    
  
  
    
Feature Events Example

    

        feature, select, hover
    

    
Feature hover and click events

    

    

        
在地图上悬停或者点击要素.

        
This example shows how to use the 'featureclick', 'nofeatureclick',
            'featureover' and 'featureout' events to make features interactive.
            Look at the feature-events.js source
            code to see how this is done.
        
        
Note that these events can be registered both on the map and on
            individual layers. If many layers need to be observed, it is
            recommended to register listeners once on the map for performance
            reasons.
    
    
    
  

JS脚本的内容：

//声明图层监听事件
var layerListeners = {
    featureclick: function(e) {
        log(e.object.name + " says: " + e.feature.id + " clicked.");
        return false;
    },
    nofeatureclick: function(e) {
        log(e.object.name + " says: No feature clicked.");
    }
};
//定义矢量图层中要素的样式
var style = new OpenLayers.StyleMap({
    'default': OpenLayers.Util.applyDefaults(
        {label: "${l}", pointRadius: 10},
        OpenLayers.Feature.Vector.style["default"]
    ),
    'select': OpenLayers.Util.applyDefaults(
        {pointRadius: 10},
        OpenLayers.Feature.Vector.style.select
    )
});
//定义矢量图层1 样式style 和监听事件 layerListeners
var layer1 = new OpenLayers.Layer.Vector("Layer 1", {
    styleMap: style,
    eventListeners: layerListeners
});
//矢量图层1填充要素
layer1.addFeatures([
    new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 -1)"), {l:1}),
    new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 1)"), {l:1})
]);
//定义矢量图层2
var layer2 = new OpenLayers.Layer.Vector("Layer 2", {
    styleMap: style,
    eventListeners: layerListeners
});
//矢量图层2填充要素
layer2.addFeatures([
    new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 1)"), {l:2}),
    new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 -1)"), {l:2})
]);

var map = new OpenLayers.Map({
    div: "map",
    allOverlays: true,
    layers: [layer1, layer2],
    zoom: 6,
    center: [0, 0],
    eventListeners: {
		//鼠标悬停在要素上面
        featureover: function(e) {
            e.feature.renderIntent = "select";
            e.feature.layer.drawFeature(e.feature);
            log("Map says: Pointer entered " + e.feature.id + " on " + e.feature.layer.name);
        },
		//鼠标离开要素
        featureout: function(e) {
            e.feature.renderIntent = "default";
            e.feature.layer.drawFeature(e.feature);
            log("Map says: Pointer left " + e.feature.id + " on " + e.feature.layer.name);
        },
		//鼠标点击要素
        featureclick: function(e) {
            log("Map says: " + e.feature.id + " clicked on " + e.feature.layer.name);
        }
    }
});
//记录函数
function log(msg) {
    if (!log.timer) {
        result.innerHTML = "";
        log.timer = window.setTimeout(function() {delete log.timer;}, 100);
    }
    result.innerHTML += msg + "
";
}