OpenLayers.Control.GetFeature
HTML
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<body onload="init()">
<div id "map">
</div>
</body>
CSS
#map
{
width:500px;
height:500px;
border: 1px solid red;
}
JavaScript
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) {
...