Comment superposer des points lat / lon sur une couche Google dans OpenLayers 2?

13

Je suis bloqué en ajoutant un point vectoriel en lat / lon au-dessus d'une couche Google dans OpenLayers. Le point bouge lorsque je déplace la carte. Cela ne se produit pas si je remplace la couche Google par une couche dans WGS84. Comment puis-je réparer cela?

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]);

J'ai essayé de suivre http://docs.openlayers.org/library/spherical_mercator.html mais sans succès.

obscur
la source
Mon problème est lié à l'utilisation de Jquery sur la même page. Fonctionne bien si je récupère toutes les références à Jquery.

Réponses:

11

Vous devez ajouter quelques modifications pour obtenir les résultats requis:

  1. Ajoutez la propriété sphericalMercator: true à votre couche Google afin que les couches vectorielles soient affichées correctement au-dessus de votre couche de base Google (c'est la raison du déplacement de la géométrie).
  2. Ajoutez la propriété maxExtent de votre couche Google, sinon le centre de la carte ne sera pas défini correctement. L'étendue indiquée ci-dessous est l'étendue du monde en coordonnées Mercator.
  3. Comme l'a indiqué user1795, la géométrie de votre point doit être reprojetée de 4326 à Web Mercator pour apparaître correctement sur la carte.
  4. Cela s'applique également au setCenter LonLat, vous devez donc également le transformer.

Code de travail ci-dessous:

            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]);
geographika
la source
Cela fonctionne très bien! On dirait qu'OpenLayers n'est pas vraiment intuitif en ce qui concerne les transformations. Est-ce l'option «spericalMercator» qui permet réellement les reprojections?
underdark
1
D'accord, ce n'est pas intuitif .. l'option sphericalMercator ajoute les fonctions suivantes qui lui permettent de travailler avec des données dans d'autres projections - dev.openlayers.org/docs/files/OpenLayers/Layer/…
geographika
4

C'est un problème de projection, il faut transformer la projection du point en celle de la couche de base (google map ici). Le code suivant devrait fonctionner

    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])

En effet, la projection par défaut de google map (mercator sphérique) est 900913 et celle d'un simple point à lonlat en 4326.

Veuillez vous assurer que le point est défini comme (longitude, latitude) et non comme (latitude, longitude).

Vikash Talanki
la source
L'ajout de la transformation fait disparaître le point sur ma carte. Ma version d'OpenLayers est 2.9.1 si cela fait une différence.
underdark
Le point.transform a fait l'affaire pour moi!
Stefan
1

Lorsque vous travaillez avec l'API Google Maps JS, vous devez faire attention à la version. Il existe par défaut une version de développement de l'API Google JS Maps. Consultez la page: http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

Et l'équipe Google Maps JS corrige également des bugs. Vérifiez http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

À l'avenir, mentionnez la version de l'API Google Maps dans la question. La v3.3 n'a eu aucun problème avec Openlayers car principalement utilisé par les développeurs.

Senthil
la source
Bonjour Senthil, je ne sais pas comment les versions de Google Maps JS API affectent mon problème avec OpenLayers.
underdark
Salut Underdark, j'ai eu un problème avec la v3.4 lorsque j'ai utilisé avec Openlayers et ensuite spécifiquement avec 3.3 et lorsque j'utilise la version de tronc de google maps, les résultats sont imprévisibles au fur et à mesure du développement. Avez-vous essayé de versionner? Même si vous utilisez des couches ouvertes, l'API Google Maps sous-jacente à cela.
Senthil
0

Je pense que c'est un problème de projection.

Avez-vous essayé de signaler le centre de gravité du point lorsque la carte se déplace? Vous pourrez peut-être voir si quelque chose change.

Mais d'après ce que je vois sur le code yuor, vous ajouteriez un point WGS84 à un autre corordsys

Poilu
la source
Au fait, avez-vous essayé d'interroger la projection de la carte que vous avez, juste pour voir comment elle est réellement définie?
Hairy
et enfin, désolé, mais il existe un moyen de transformer votre point si vous avez des problèmes de projection: var a = new OpenLayers.LonLat (3,53) .transform (ll, new OpenLayers.Projection ('EPSG: 900913')) ;
Hairy