Openlayers矢量图层

Openlayers矢量图层：

var style = new OpenLayers.StyleMap({
        'default': OpenLayers.Util.applyDefaults(
            {fillColor:"#FF0000",
            strokeColor:"#000000",
            strokeOpacity:0.5},
            OpenLayers.Feature.Vector.style["default"]
        ),
        'select': OpenLayers.Util.applyDefaults(
            {fillColor:"#0000FF",
            strokeColor:"#000000",
            strokeOpacity:0.5},
            OpenLayers.Feature.Vector.style.select
        )
    });//定义样式
var vectorLayer = new OpenLayers.Layer.Vector(layerName, {
    styleMap: style
});
var center = new OpenLayers.Geometry.Point(Math.random()*100,Math.random()*100);
var circleGeo1 = OpenLayers.Geometry.Polygon.createRegularPolygon(center,10,72,0);
var circleFeature1 = new OpenLayers.Feature.Vector(circleGeo1);
var circleGeo2 = OpenLayers.Geometry.Polygon.createRegularPolygon(new OpenLayers.Geometry.Point(Math.random()*100,Math.random()*100),20,72,0);
var circleFeature2 = new OpenLayers.Feature.Vector(circleGeo2);
vectorLayer.addFeatures([circleFeature1,circleFeature2]);
map.addLayer(vectorLayer);

矢量图层添加事件：

var layerListeners = {
        featureclick: function(e) {
            console.log(e.object.name + " says: " + e.feature.id + " clicked.");
            return false;
        },
        nofeatureclick: function(e) {
            console.log(e.object.name + " says: No feature clicked.");
        },
        featureover: function(e) {
            e.feature.renderIntent = "select";
            e.feature.layer.drawFeature(e.feature);
            console.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);
            console.log("Map says: Pointer out " + e.feature.id + " on " + e.feature.layer.name);
        }
    };
    
    var vectorLayer = new OpenLayers.Layer.Vector(layerName, {
        styleMap: style,
        eventListeners: layerListeners
    });
    //或者通过以下方法添加feature事件
    //vectorLayer.events.on(layerListeners);
    var center = new OpenLayers.Geometry.Point(Math.random()*100,Math.random()*100);
    var circleGeo1 = OpenLayers.Geometry.Polygon.createRegularPolygon(center,10,72,0);
    var circleFeature1 = new OpenLayers.Feature.Vector(circleGeo1);
    var circleGeo2 = OpenLayers.Geometry.Polygon.createRegularPolygon(new OpenLayers.Geometry.Point(Math.random()*100,Math.random()*100),20,72,0);
    var circleFeature2 = new OpenLayers.Feature.Vector(circleGeo2);
    vectorLayer.addFeatures([circleFeature1,circleFeature2]);
    map.addLayer(vectorLayer);

通过SelectFeature控件添加事件：

ar vectorLayer = new OpenLayers.Layer.Vector(layerName, {
        styleMap: style
    });
    var center = new OpenLayers.Geometry.Point(Math.random()*100,Math.random()*100);
    var circleGeo1 = OpenLayers.Geometry.Polygon.createRegularPolygon(center,10,72,0);
    var circleFeature1 = new OpenLayers.Feature.Vector(circleGeo1);
    var circleGeo2 = OpenLayers.Geometry.Polygon.createRegularPolygon(new OpenLayers.Geometry.Point(Math.random()*100,Math.random()*100),20,72,0);
    var circleFeature2 = new OpenLayers.Feature.Vector(circleGeo2);
    vectorLayer.addFeatures([circleFeature1,circleFeature2]);
    map.addLayer(vectorLayer);

    vectorLayer.events.on({
        "featureselected": function(e) {
            console.log("selected feature "+e.feature.id+" on Vector Layer "+layerName);
        },
        "featureunselected": function(e) {
            console.log("unselected feature "+e.feature.id+" on Vector Layer"+layerName);
        }
    });
    var selectCtrl =new OpenLayers.Control.SelectFeature([vectorLayer],{hover:true});
    map.addControl(selectCtrl);
    selectCtrl.activate(); 

注意事项：
    1. SelectFeature控件在一个map上只能有一个处于激活状态，否则第二个会将第一个添加的覆盖，从而第一个将不能响应事件。
    2. 当拖动SelectFeature控件上的矢量图层的feature时，地图不能拖动的，即不会响应地图拖动事件。
    3. 当添加了SelectFeature控件时，如果map上再次添加矢量图层，则该矢量图层不会响应事件。

转载自：https://blog.csdn.net/hjhandhf/article/details/51934287