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.