[OpenLayers-Users] WFS selection layer deformed
Peter Becker
pbecker at itee.uq.edu.au
Mon Jul 13 20:08:15 EDT 2009
Hello all,
I'm trying to let the user select polygons on a map and started creating some
JavaScript based on http://openlayers.org/dev/examples/getfeature-wfs.html
As opposed to the example everything I use is in WGS84, so I don't need all
the extra projection options. The polygons I have are served from a local
Geoserver instance (1.7.5). The OpenLayers version is the hosted one (BTW: may
I recommend adding a version number into the URL and then setting all cache
headers so clients don't have to hit the server for 304s all the time? That
tends to make a huge difference for client-side performance and also takes load
of the server. I can dig out a detailed explanation if wanted.)
I encountered two problems: at first both the WMS layer and the selection layer
where vertically squashed. Somehow I fixed that by adding the {singleTile:
true} option for that layer, but I don't understand why that should be needed
or why it helps. But even after that change the selection layer is still in
the old form, i.e. the highlights don't match the map. They tend to be higher,
the difference seems to be in screen coordinates, not in the geospatial
coordinates. The selection itself seems to work correctly in every case:
wherever I click I seem to select the polygon that should be there,
independent of what is or is not displayed in the location.
Why is this happening? How do I fix it? Is there any documentation I might have
missed to explain this type of frontend? It would be very useful if it works.
Code below.
TIA,
Peter
<script type="text/javascript">
var map, styleMap;
function init(){
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
var bounds = new OpenLayers.Bounds(151.5516558, -28.48572915,
153.6472702, -25.87920985);
var options = {
controls: [],
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map('map', options);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: G_SATELLITE_MAP, numZoomLevels: 20}
);
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets",
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: G_HYBRID_MAP, numZoomLevels: 20}
);
var ehmpLayer = new OpenLayers.Layer.WMS(
"ehmp:catchments", "http://localhost:8080/geoserver/wms",
{
layers: 'ehmp:catchments92',
styles: 'catchments',
srs: 'EPSG:4326',
transparent: true,
tiled: false,
format: "image/png"
},
{singleTile: true} // needed, otherwise catchments are
vertically squashed
);
var select = new OpenLayers.Layer.Vector("Selection", {styleMap:
new
OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
});
map.addLayers([gsat, gphy, gmap, ghyb, ehmpLayer, select]);
// build up all controls
map.addControl(new OpenLayers.Control.PanZoomBar({
position: new OpenLayers.Pixel(2, 15)
}));
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element:
$('location')}));
map.addControl(new OpenLayers.Control.LayerSwitcher());
var control = new OpenLayers.Control.GetFeature({
protocol: OpenLayers.Protocol.WFS.fromWMSLayer(ehmpLayer),
box: false,
hover: false,
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]);
});
map.addControl(control);
control.activate();
map.zoomToExtent(bounds);
}
</script>
More information about the Users
mailing list