在openlayers 2中使用选择和悬停监听器-悬停更改样式

Question

我在鼠标悬停的样式设置功能方面遇到了一些问题。我可以获得活动，但改变风格根本不起作用。对于选择，它会，但对于悬停/鼠标悬停，它根本不会。有人能帮我吗。这是我的代码：

var map, vectorLayer, wmsLayer, selectControl;
window.onload = function() {
map = new OpenLayers.Map('map');
wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {
layers: 'basic'
}, {
'attribution': 'Provided by OSGeo'
}
);
vectorLayer = new OpenLayers.Layer.Vector("My Layer Name", {
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: "#ff0000",
strokeOpacity: .7,
strokeWidth: 1,
fillColor: "#ff0000",
fillOpacity: 0,
'pointRadius': 30
}),
"temporary": new OpenLayers.Style({
strokeColor: "#ffff33",
strokeOpacity: .9,
strokeWidth: 2,
fillColor: "#ffff33",
fillOpacity: .3,
cursor: "pointer",
'pointRadius': 20
}),
"select": new OpenLayers.Style({
strokeColor: "#0033ff",
strokeOpacity: .7,
strokeWidth: 2,
fillColor: "#0033ff",
fillOpacity: 0,
graphicZIndex: 2,
'pointRadius': 10
})
})
});

map.addLayers([wmsLayer, vectorLayer]);
map.zoomToMaxExtent();
vectorLayer.addFeatures([
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(10, 10)
)
]);

var selectControlClicks = new OpenLayers.Control.SelectFeature(vectorLayer, {
onSelect: function(feature) {
console.log('select: number of selected features: ' + vectorLayer.selectedFeatures.length);
},
onUnselect: function(feature) {
console.log('unselect: number of selected features: ' + vectorLayer.selectedFeatures.length);
}
});
var selectControlHover = new OpenLayers.Control.SelectFeature(vectorLayer, {
hover: true,
highlightOnly: true,
renderIntent: 'temporary',
overFeature: function(feature) {
console.log('hover: number of selected features: ' + vectorLayer.selectedFeatures.length);
},
outFeature: function(feature) {
console.log('hover out: number of selected features: ' + vectorLayer.selectedFeatures.length);
},
});
map.addControl(selectControlHover);
selectControlHover.activate();
map.addControl(selectControlClicks);
selectControlClicks.activate();
}

http://jsfiddle.net/eW8DV/80/

也许我的洞方法是错误的，也许我应该只使用一个SelectControl？

欢呼

Answer 1

我认为您的问题在于overFeature和outFeature的声明。

实际上，虽然onSelect和onUnselect是模板方法，设计为overriden，但overFeature和outFeature不是。覆盖这些方法会导致覆盖默认行为(layer.drawFeature(feature，style)；)。

无论如何，我建议您使用事件。尝试

selectControlHover.events.register('featurehighlighted', null, function(e) {
console.log('feature selected ', e.feature);
});

此外，我很确定你可以使用一个单独的控件，而不是两个，但由于不知道你想做什么，我不能建议你使用另一种方法。