[OpenLayers-Users] WFS selection layer deformed
Peter Becker
pbecker at itee.uq.edu.au
Tue Jul 14 03:50:22 EDT 2009
Hi Adrian,
Your code didn't work, but it gave me the right hints. Somehow I was assuming
that Google Maps used WGS84, too. I managed to get it working with this bit of
code:
var options = {
controls: [],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34)
};
map = new OpenLayers.Map('map', options);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: G_SATELLITE_MAP, numZoomLevels: 20,
'sphericalMercator': true}
);
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: G_PHYSICAL_MAP, numZoomLevels: 20, 'sphericalMercator':
true}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets",
{numZoomLevels: 20, 'sphericalMercator': true}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: G_HYBRID_MAP, numZoomLevels: 20, 'sphericalMercator':
true}
);
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"
}
);
Note that the srs on the WMS layer is still the same and there is no
projection option. Now I just have to find out how to transform my bounding box
into the new projection :-)
The new settings are based on another example of the website:
http://openlayers.org/dev/examples/spherical-mercator.html -- it seems it is
all in the examples, but for someone new to GIS it is hard to find the right
one. Maybe it's just me.
Cheers,
Peter
On Tue, 14 Jul 2009 03:24:24 pm Adrian Popa wrote:
> Hi Peter,
>
> It seems you're trying to use google maps as base layer with your data
> overlaid on top. The problem is google maps uses spherical mercator
> projection, while your layer (and map) uses EPSG:4326.
> To get the layers to overlap, you need to use the same projection
> everywhere - try setting your map and layer projection to:
>
> var lonlat = new OpenLayers.Projection("EPSG:4326");
> var sphericalMercator = new OpenLayers.Projection("EPSG:900913");
> var options = { *projection: sphericalMercator, displayProjection:
> lonlat,* units: "m", numZoomLevels: 18, ...};
> ...
> var google_street = new OpenLayers.Layer.Google( 'Google Streets',
> {*'sphericalMercator': true*} );
>
> var ehmpLayer = new OpenLayers.Layer.WMS(
> "ehmp:catchments",
> "http://localhost:8080/geoserver/wms", {
> layers: 'ehmp:catchments92',
> styles: 'catchments',
> *srs: 'EPSG:900913', //hopefully!*
> transparent: true,
> tiled: false,
> format: "image/png"
> },
> {singleTile: true,
> *projection: sphericalMercator*
> } // needed, otherwise catchments are
> vertically squashed
> );
>
> Your layer should support this type of projection server-side for this
> to work.
>
> The singleTile problem comes most likely from a projection issue.
>
> Good luck,
> Adrian
>
> Peter Becker wrote:
> > 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>
> >
> > _______________________________________________
> > Users mailing list
> > Users at openlayers.org
> > http://openlayers.org/mailman/listinfo/users
More information about the Users
mailing list