Como sobrepor pontos lat / lon em uma camada do Google no OpenLayers 2?

13

Estou preso adicionando um ponto de vetor em lat / lon em cima de uma camada do Google no OpenLayers. O ponto está se movendo quando eu movo o mapa. Isso não acontece se eu substituir a camada do Google por uma camada no WGS84. Como posso consertar isso?

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

Eu tentei seguir http://docs.openlayers.org/library/spherical_mercator.html, mas sem sucesso.

underdark
fonte
Meu problema está relacionado ao uso do Jquery na mesma página. Funciona bem se eu recuperar todas as referências ao Jquery.

Respostas:

11

Você precisa adicionar algumas alterações para obter os resultados necessários:

  1. Adicione a propriedade sphericalMercator: true à sua camada do Google, para que as camadas vetoriais sejam mostradas corretamente na parte superior da camada base do Google (esse é o motivo da alteração da geometria).
  2. Adicione a propriedade maxExtent da sua camada do Google, caso contrário, o centro do mapa não será definido corretamente. A extensão mostrada abaixo é a extensão do mundo nas coordenadas do Mercator.
  3. Como o usuário 1795 declarou, a geometria do seu ponto deve ser reprojetada do 4326 para o Web Mercator para aparecer corretamente no mapa.
  4. Isso também se aplica ao setCenter LonLat, portanto você também precisa transformar isso.

Código de trabalho abaixo:

            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
fonte
Isso funciona muito bem! Parece que o OpenLayers não é realmente intuitivo quando se trata de transformações. É a opção 'spericalMercator' que realmente permite reprojeções?
Underdark
1
Concordo que não é intuitive..the opção sphericalMercator acrescenta as seguintes funções que lhe permitem trabalhar com dados em outras projeções - dev.openlayers.org/docs/files/OpenLayers/Layer/...
geographika
4

Este é um problema de projeção, você deve transformar a projeção do ponto na camada base (mapa do Google aqui). O código a seguir deve 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])

Isso ocorre porque a projeção padrão do google map (esférico mercator) é 900913 e a de um ponto simples em lonlat em 4326.

Verifique se o ponto está definido como (longitude, latitude) e não como (latitude, longitude).

Vikash Talanki
fonte
Adicionar a transformação faz com que o ponto desapareça no meu mapa. Minha versão do OpenLayers é 2.9.1 se faz a diferença.
Underdark
A point.transform fez o truque para mim!
Stefan
1

Ao trabalhar com a API JS do Google Maps, você deve ter cuidado com a versão. Não há padrão para ir com a versão de desenvolvimento Google JS Maps API. Verifique a página: http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

E a equipe JS do Google Maps também corrige bugs. Verifique http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

No futuro, mencione a versão da API do Google Maps na pergunta. A v3.3 não teve problemas com o Openlayers, principalmente usado pelos desenvolvedores.

Senthil
fonte
Olá, Senthil, não tenho certeza de como as versões da API JS do Google Maps afetam meu problema com o OpenLayers.
Underdark
Oi, Underdark, tive um problema com a v3.4 quando usei com Openlayers e, em seguida, usando especificamente 3.3 e quando usar a versão de tronco do google maps, os resultados são imprevisíveis conforme o desenvolvimento em andamento. Você já tentou com versionamento? Mesmo que você esteja usando openlayers, o Google mapeia a API subjacente a isso.
Senthil
0

Eu acho que é uma questão de projeção.

Você já tentou relatar o centróide do ponto quando o mapa se move? Você pode ver se algo está mudando.

Mas pelo que posso ver do seu código, você adicionaria o ponto WGS84 a um corordsys diferente

Peludo
fonte
A propósito, você tentou consultar a projeção do mapa que possui, apenas para ver como ele está realmente definido?
peludo
e, finalmente, desculpe, mas existe uma maneira de transformar seu ponto de vista, se você tiver problemas de projeção: var a = new OpenLayers.LonLat (3,53) .transform (ll, new OpenLayers.Projection ('EPSG: 900913')) ;
peludo