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上再次添加矢量图层，则该矢量图层不会响应事件。