[GIS] How to do selection with a WFS source in OpenLayers

openlayers-2wfs

One of my students wants to style a WFS layer and have selections too. I got as far as this code http://ian01.geog.psu.edu/geoserver/www/wfs/wfs-sld2.html which styles the WFS (though with out the text labels) and while the selection control seems to be working (i.e. the box is blue not red) nothing is actually selected.

Best Answer

Looks like you're on your way to getting this to work. Though, I know this selection thing can be tricky so I thought i'd share my code which does selection and hover highlighting. Using a control to highlight and a control for selection:

    var handler_featurehighlighted = function (e) {
        MyCompany.UI.Map.Results.Handlers.Events.Feature_MouseOver(MyCompany.UI.Map.Results.Layer.features.indexOf(e.feature));
    };
    var handler_featureunhighlighted = function (e) {
        MyCompany.UI.Map.Results.Handlers.Events.Feature_MouseOut(MyCompany.UI.Map.Results.Layer.features.indexOf(e.feature));
    };
    var handler_featureselected = function (e) {
        MyCompany.UI.Map.Results.Handlers.Events.Feature_Select(MyCompany.UI.Map.Results.Layer.features.indexOf(e.feature));
    };
    var handler_featureunselected = function (e) {
        MyCompany.UI.Map.Results.Handlers.Events.Feature_UnSelect(MyCompany.UI.Map.Results.Layer.features.indexOf(e.feature));
    };

    MyCompany.UI.Map.Results.highlightControl = new OpenLayers.Control.SelectFeature(MyCompany.UI.Map.Results.Layer, {
        hover: true,
        highlightOnly: true,
        renderIntent: "temporary",
        eventListeners: {
            featurehighlighted: handler_featurehighlighted,
            featureunhighlighted: handler_featureunhighlighted
        }
    });

    MyCompany.UI.Map.Results.selectControl = new OpenLayers.Control.SelectFeature(MyCompany.UI.Map.Results.Layer,
        {
            hover: false,
            multiple: true,
            toggle: true,
            eventListeners: {
                featurehighlighted: handler_featureselected,
                featureunhighlighted: handler_featureunselected
            }
            //multipleKey: "shiftKey"
        }
    );

    MyCompany.UI.Map.getMap().addControl(MyCompany.UI.Map.Results.highlightControl);
    MyCompany.UI.Map.getMap().addControl(MyCompany.UI.Map.Results.selectControl);

    MyCompany.UI.Map.Results.highlightControl.activate();
    MyCompany.UI.Map.Results.selectControl.activate();

// don't let results cover region
    MyCompany.UI.Map.getMap().raiseLayer(MyCompany.UI.Map.Results.Layer, -2);
    MyCompany.UI.Map.getMap().resetLayersZIndex();
Related Question