¿Cómo superponer puntos lat / lon en una capa de Google en OpenLayers 2?


13

Estoy atascado agregando un punto vectorial en lat / lon encima de una capa de Google en OpenLayers. El punto se mueve cuando saco el mapa. Esto no sucede si reemplazo la capa de Google con una capa en WGS84. ¿Cómo puedo arreglar esto?

map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());

var gmap = new OpenLayers.Layer.Google(
            "Google Streets", 
            {numZoomLevels: 20}
           );
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

map.addLayers([gmap,pointLayer]);
map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
pointLayer.addFeatures([pointFeature]);

Intenté seguir http://docs.openlayers.org/library/spherical_mercator.html pero sin éxito.


Mi problema está relacionado con el uso de Jquery en la misma página. Funciona bien si recupero todas las referencias a Jquery.

Respuestas:


11

Debe agregar algunos cambios para obtener los resultados requeridos:

  1. Agregue la propiedad sphericalMercator: true a su capa de Google para que las capas vectoriales se muestren correctamente en la parte superior de su capa base de Google (esta es la razón de la geometría cambiante).
  2. Agregue la propiedad maxExtent de su capa de Google, de lo contrario, el centro del mapa no se establecerá correctamente. La extensión que se muestra a continuación es la extensión del mundo en coordenadas de Mercator.
  3. Como dijo user1795, la geometría de su punto debe reproyectarse desde 4326 a Web Mercator para que aparezca correctamente en el mapa.
  4. Esto también se aplica al setCenter LonLat, por lo que también debe transformar esto.

Código de trabajo a continuación:

            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher());

            var proj = new OpenLayers.Projection("EPSG:4326");

            var gmap = new OpenLayers.Layer.Google("Google Streets", {
                sphericalMercator: true,
                'maxExtent': new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
            });
            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

            map.addLayers([gmap, pointLayer]);
            var lonlat = new OpenLayers.LonLat(16.373056, 48.208333);
            lonlat.transform(proj, map.getProjectionObject());
            map.setCenter(lonlat, 5);

            var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
            point = point.transform(proj, map.getProjectionObject());
            //console.log(point);
            var pointFeature = new OpenLayers.Feature.Vector(point, null, null);
            pointLayer.addFeatures([pointFeature]);

Eso funciona muy bien! Parece que OpenLayers no es realmente intuitivo cuando se trata de transformaciones. ¿Es la opción 'spericalMercator' que realmente permite las reproyecciones?
oscuro

1
De acuerdo, no es intuitivo ... la opción sphericalMercator agrega las siguientes funciones que le permiten trabajar con datos en otras proyecciones: dev.openlayers.org/docs/files/OpenLayers/Layer/…
geographika

4

Este es un problema de proyección, debe transformar la proyección del punto en la capa base (mapa de Google aquí). El siguiente código debería funcionar

    map = new OpenLayers.Map('map');
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", 
        {numZoomLevels: 20}
    );
    var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

    map.addLayers([gmap,pointLayer]);
    map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

    var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
    point.transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
    var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
    pointLayer.addFeatures([pointFeature])

Esto se debe a que la proyección predeterminada del mapa de Google (mercator esférico) es 900913 y la de un punto simple en lonlat en 4326.

Asegúrese de que el punto esté configurado como (longitud, latitud) y no como (latitud, longitud).


Agregar la transformación hace que el punto desaparezca en mi mapa. Mi versión OpenLayers es 2.9.1 si hace la diferencia.
oscuro

¡El point.transform me sirvió!
Stefan

1

Cuando trabaje con la API JS de Google Maps, debe tener cuidado con la versión. Hay una opción predeterminada para ir con la versión de desarrollo Google JS Maps API. Consulte la página: http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

Y el equipo de Google Maps JS también corrige errores. Consulta http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

En el futuro, mencione la versión de API de Google Maps en la pregunta. v3.3 no tuvo ningún problema con Openlayers, ya que los desarrolladores lo utilizan principalmente.


Hola, Senthil. No estoy seguro de cómo las versiones de API de Google Maps JS afectan mi problema con OpenLayers.
oscuro

Hola, Underdark, tuve un problema con v3.4 cuando lo usé con Openlayers y luego específicamente con 3.3 y cuando uso la versión troncal de Google Maps, los resultados son impredecibles a medida que avanza el desarrollo. ¿Has probado con el versionado? Aunque esté utilizando capas abiertas, la API de Google Maps subyacente a eso.
Senthil

0

Creo que es un problema de proyección.

¿Has intentado informar el centroide del punto cuando el mapa se desplaza? Es posible que pueda ver si algo está cambiando.

Pero por lo que puedo ver de su código, agregaría el punto WGS84 a un corordsys diferente


Por cierto, ¿has intentado consultar la proyección del mapa que tienes, solo para ver cómo está configurado?
Peludo

y finalmente, lo siento, pero hay una manera de transformar su punto si tiene problemas de proyección: var a = new OpenLayers.LonLat (3,53) .transform (ll, new OpenLayers.Projection ('EPSG: 900913')) ;
Peludo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.