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

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

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

1 个答案: