javascript - 在 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 是模板方法，旨在被重写，但 overFeature 和 outFeature 却不是。覆盖这些方法会导致覆盖默认行为(layer.drawFeature(feature, style);)。

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

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

另外，我很确定您可以使用一个控件而不是两个，但不知道您要做什么，我不能建议您使用另一种方法。