How can I do feature selection on WMS layer (added JSFiddle example)

Question

I have WMS layer with roads serverd from Geoserver (MS SQL View Layer)

http://jsfiddle.net/Alophind/5pSrJ/

I want the user to be able to click on a line and "highlight" it , set it selected so he can use edit tools (split,union) to edit it.

How can it be done ?

Answer 1

This is a late answer, but here is why your code won't work:

• With Geoserver, by deafult the WMS and WFS urls are different. Hence OpenLayers.Protocol.WFS.fromWMSLayer won't work directly. You need to use the OWS Service endpoint, which is the same for WMS & WFS.
• Secondly, even if you did manage to get the correct protocol, you will run into cross domain issues, and without a proxy, OpenLayers won't be able to make a XHR query for the WFS service. Hence you need to use a proxy, if your App is on webserver, different than your geoserver.

By making these two changes, I was able to get the app running. (Since this requires a proxy, it can't work on jsfiddle.) My code is as follows:

var map, trips;
function init(){
OpenLayers.ProxyHost = "/cgi-bin/proxy_Open.cgi?url="; 
    var zoom = 15, lon=34.798819, lat=31.2611;
    var geographic = new OpenLayers.Projection("EPSG:4326");
    var mercator = new OpenLayers.Projection("EPSG:3857");
    var GeoServerURL = "http://109.226.63.153/geoserver/ows"

map = new OpenLayers.Map('map', {
    units: 'm',
    numZoomLevels: 16,
    controls: [
    new OpenLayers.Control.PanZoomBar(),
    new OpenLayers.Control.Navigation(),
    new OpenLayers.Control.ScaleLine(),
    new OpenLayers.Control.MousePosition(),
    new OpenLayers.Control.LayerSwitcher()],
    projection: mercator
});

trips = new OpenLayers.Layer.WMS(
    "ViewTrips", GeoServerURL, {
    LAYERS: 'Taskir:ViewTrips',
    transparent: 'true',
    format: 'image/png'            
    }, {
        isBaseLayer: false,
        singleTile: true
    });


select = new OpenLayers.Layer.Vector("Selection", {
    styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
});
hover = new OpenLayers.Layer.Vector("Hover");
var osm = new OpenLayers.Layer.OSM();


map.addLayers([osm, trips, hover, select]);
var pt=new OpenLayers.Geometry.Point(lon, lat).transform(geographic,mercator ); //project the location
map.setCenter(new OpenLayers.LonLat(pt.x, pt.y), zoom); // Set the Map at the given point

control = new OpenLayers.Control.GetFeature({
    protocol: OpenLayers.Protocol.WFS.fromWMSLayer(trips),
    box: true,
    hover: true,
    multipleKey: "shiftKey",
    toggleKey: "ctrlKey"
});
control.events.register("featureselected", this, function (e) {
    select.addFeatures([e.feature]);
});
control.events.register("featureunselected", this, function (e) {
    select.removeFeatures([e.feature]);
});
control.events.register("hoverfeature", this, function (e) {
    hover.addFeatures([e.feature]);
});
control.events.register("outfeature", this, function (e) {
    hover.removeFeatures([e.feature]);
});
map.addControl(control);
control.activate();

var vector_style = new OpenLayers.Style({
        'fillColor': '#ff0000',
        'strokeColor': '#ff0000',
        'strokeWidth': 10
        });

var vector_style_map = new OpenLayers.StyleMap({
        'default': vector_style
        });

//set the style for both the Hover & Select
hover.styleMap = vector_style_map; 
select.styleMap = vector_style_map;
}

I have found that the hovering creates too many requests. For a better User Experience, you could consider disabling hover, and keeping only the select.