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.


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

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


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.


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


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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.