在 openlayers 2 中使用 select 和悬停侦听器 - 悬停更改样式

Question

鼠标悬停时的样式功能出现问题。我能够获得事件，但改变风格根本行不通。对于选择它确实如此，但对于 hover/mouseover 它根本没有。谁能帮我解决这个问题。这是我的代码：

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);
});

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

在 openlayers 2 中使用 select 和悬停侦听器 - 悬停更改样式

Using select and hover listener in openlayers 2 - hover change style

javascript

select

mouseover

hover

openlayers