[OpenLayers-Dev] Please,
help with vectors projection over google layer (really desperate)
Eric Lemoine
eric.c2c at gmail.com
Fri Jun 6 11:01:53 EDT 2008
On Fri, Jun 6, 2008 at 4:41 PM, Oscar Fonts <oscar.fonts.lists at gmail.com> wrote:
> Eric, you're faster. Catched them all while I tested...
Oh your code looks code, thanks for putting it together...
>
> Esteban, esta es la función init() resultante, por si la quieres aprovechar:
>
> function init() {
> var g = new OpenLayers.Projection("EPSG:4326");
> var p = new OpenLayers.Projection("EPSG:900913");
>
> var options = {
> projection: p,
> displayProjection: g,
> units: "m",
> maxResolution: 156543.0339,
> maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
> 20037508, 20037508.34)
> };
> map = new OpenLayers.Map('map', options);
>
> var layergoogle = new OpenLayers.Layer.Google("Google Normal",
> {type: G_NORMAL_MAP, 'sphericalMercator': true});
> var vectores = new OpenLayers.Layer.Vector("Vector Features");
> map.addLayers([layergoogle, vectores]);
>
> //line near Barcelona, spain, for example
> var p1 = new OpenLayers.Geometry.Point(2, 41);
> var p2 = new OpenLayers.Geometry.Point(41, 2);
> var lineString = new
> OpenLayers.Geometry.LineString([p1,p2]).transform(g, p);
> var lineFeature = new OpenLayers.Feature.Vector(lineString,
> null, null);
> vectores.addFeatures([lineFeature]);
>
> var lonLat = new OpenLayers.LonLat(2, 41).transform(g, p);
> map.setCenter(lonLat, 7);
> }
>
>
> 2008/6/6 Eric Lemoine <eric.c2c at gmail.com>:
>>
>> 2008/6/6 Esteban olm <esteban.olm at gmail.com>:
>> > Hello,
>> >
>> > I need help! I can not understand why I can not see a line in
>> > openlayers.
>> > If I don't use projections, I can see it, but then the line is not
>> > properly
>> > drawn in Firefox (but yes in Explorer).
>> > I know that problem is a projection problem (I have read a lot in
>> > Internet),
>> > I know Google use Mercator, but I don't know how to solve it.
>> >
>> > Please help !! There is something I can not find.
>> > Here is the entire HTML page from what I think is the best approximation
>> > (but it doesn't draw the line):
>>
>> See my comments in the code.
>>
>>
>>
>> >
>> > ----------------------------------------------------------------------------------------------------------------------
>> > <html>
>> > <head>
>> > <title>prueba</title>
>> >
>> > <!-- this google key is fo HTTP://LOCALHOST, so it should go in your
>> > PC
>> > -->
>> > <script
>> >
>> > src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAdktgbP3W_jzENycyyxYmhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQAmpwRv0-s77497-2GnWVaa_ulwA"
>> > type="text/javascript"></script>
>> > <script src="http://openlayers.org/dev/OpenLayers.js"></script>
>> >
>> > <script type="text/javascript">
>> > var lat=42.508;
>> > var lon=1.118;
>> > var map; //complex object of type OpenLayers.Map
>> >
>> > function init() {
>> >
>> > //Initialise the 'map' object
>> > map = new OpenLayers.Map ("map", {
>> > controls:[
>> > new OpenLayers.Control.Navigation(),
>> > new OpenLayers.Control.PanZoomBar(),
>> > new OpenLayers.Control.Attribution()],
>> > maxExtent: new
>> > OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
>> > maxResolution: 156543.0399,
>> > units: 'm',
>> > projection: new OpenLayers.Projection("EPSG:900913")
>> > } );
>> > var layergoogle = new OpenLayers.Layer.Google("Google
>> > Normal",
>> > { type: G_NORMAL_MAP },
>> > {
>> > 'sphericalMercator': true,
>> > 'projection': new
>> > OpenLayers.Projection("EPSG:900913")
>> > }
>>
>> Place the 'type' and 'sphericalMercator' properties in the same
>> object. Remove the 'projection' property.
>>
>> {
>> 'type': G_NORMAL_MAP,
>> 'sphericalMercator': true
>> }
>>
>> > );
>> > var vectores = new OpenLayers.Layer.Vector ("Vector
>> > Features",
>> > { 'projection': new OpenLayers.Projection("EPSG:4326"),
>> > 'displayProjection': new
>> > OpenLayers.Projection("EPSG:900913")
>> > }
>> > );
>>
>> You do not need any options for the vector layer:
>>
>> var vectores = new OpenLayers.Layer.Vector ("Vector Features");
>>
>>
>> > map.addLayer(layergoogle);
>> > map.addLayer(vectores);
>> >
>> > //line near Barcelona, spain, for example
>> > var p1 = new OpenLayers.Geometry.Point(2, 41);
>> > var p2 = new OpenLayers.Geometry.Point(41, 2);
>> > var points = [p1,p2];
>> > var lineString = new OpenLayers.Geometry.LineString(points);
>>
>> Reproject your line string before creating the feature with it:
>>
>> lineString.transform(
>> new OpenLayers.Projection("EPSG:4326"),
>> new OpenLayers.Projection("EPSG:900913")
>> );
>>
>> > var lineFeature = new OpenLayers.Feature.Vector(lineString,
>> > null, null);
>> > features = [lineFeature];
>> > vectores.addFeatures( [features] );
>> >
>> > var lonLat = new OpenLayers.LonLat(2, 41)
>>
>> Either pass mercator coordinates to the LonLat constructor or
>> reproject it before passing to setCenter:
>>
>> lonLat.transform(
>> new OpenLayers.Projection("EPSG:4326"),
>> new OpenLayers.Projection("EPSG:900913")
>> );
>>
>> > map.setCenter(lonLat, 7);
>> > }
>> > </script>
>> > </head>
>> > <body onload="init();">
>> > <div style="width:500px; height:300px" id="map"></div>
>> > </body>
>> > </html>
>>
>> Hope this helps,
>>
>> Note that I haven't tested anything so there might still be errors
>> lurking.
>> --
>> Eric
>> _______________________________________________
>> Dev mailing list
>> Dev at openlayers.org
>> http://openlayers.org/mailman/listinfo/dev
>
>
More information about the Dev
mailing list