OpenLayers 2에서 Google 레이어에 위도 / 경도 포인트를 오버레이하는 방법은 무엇입니까?


13

OpenLayers의 Google 레이어 위에 위도 / 경도로 벡터 포인트를 추가하는 데 어려움이 있습니다. 지도를 이동하면 포인트가 이동합니다. Google 레이어를 WGS84의 레이어로 바꾸면 이런 일이 발생하지 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

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

http://docs.openlayers.org/library/spherical_mercator.html 을 따르려고 했지만 성공하지 못했습니다.


내 문제는 같은 페이지에서 Jquery를 사용하는 것과 관련이 있습니다. Jquery에 대한 모든 참조를 검색하면 정상적으로 작동합니다.

답변:


11

필요한 결과를 얻으려면 몇 가지 변경 사항을 추가해야합니다.

  1. 추가 사실 : sphericalMercator 벡터 레이어가 구글베이스 층의 상부에 제대로 표시되도록 (이것은 이동 기하학의 이유입니다) 귀하의 Google 레이어에 속성을.
  2. Google 레이어의 maxExtent 속성에 추가하지 않으면지도의 중심이 올바르게 설정되지 않습니다. 아래 표시된 범위는 메르카토르 좌표에서 전 세계의 범위입니다.
  3. user1795가 지적했듯이 포인트 지오메트리는 4326에서 Web Mercator로 다시 투영하여 맵에 올바르게 나타나야합니다.
  4. 이는 setCenter LonLat에도 적용되므로이를 변환해야합니다.

아래의 작업 코드 :

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

잘 작동합니다! OpenLayers는 변형과 관련하여 실제로 직관적이지 않은 것처럼 보입니다. 실제로 재 투영을 활성화하는 것이 'spericalMercator'옵션입니까?
underdark


4

이것은 투영 문제이므로 점의 투영을 기본 레이어의 투영으로 변환해야합니다 (Google Map here). 다음 코드가 작동합니다

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

구글 맵 (구면 메르카토르)의 기본 투영은 900913이고 4326의 lonlat의 단순한 점의 투영이기 때문입니다.

점이 (위도, 경도)가 아닌 (경도, 위도)로 설정되어 있는지 확인하십시오.


변형을 추가하면 내지도에서 포인트가 사라집니다. 차이가 나는 경우 OpenLayers 버전은 2.9.1입니다.
underdark

point.transform은 나를 위해 속임수를 썼습니다!
Stefan

1

Google Maps JS API로 작업 할 때는 버전에주의해야합니다. 개발 버전 Google JS Maps API와 함께 기본적으로 제공됩니다. 페이지를 확인하십시오 : http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

Google Maps JS 팀도 버그를 수정했습니다. http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog 확인

앞으로 질문에 Google Maps API 버전을 언급하십시오. v3.3에는 개발자가 주로 사용하는 Openlayers에 문제가 없었습니다.


안녕하세요, Senthil, Google Maps JS API 버전이 OpenLayers 문제에 어떤 영향을 미치는지 잘 모르겠습니다.
underdark

안녕하세요 Underdark, Openlayers와 함께 사용할 때 특히 3.3을 사용하고 Google지도 트렁크 버전을 사용할 때 v3.4에 문제가 발생하여 개발이 진행됨에 따라 결과를 예측할 수 없습니다. 버전 관리를 사용해 보셨습니까? 오픈 레이어를 사용하더라도 Google은 API를 기반으로합니다.
Senthil

0

프로젝션 문제라고 생각합니다.

지도가 이동하는 시점의 중심을보고하려고 했습니까? Someting이 변경되고 있는지 확인할 수 있습니다.

그러나 유어 코드에서 볼 수 있듯이 WGS84 포인트를 다른 코드에 추가하면


그건 그렇고, 실제로 어떤지도 설정되어 있는지 확인하기 위해 가지고 있는지도의 투영을 쿼리 해 보셨습니까?
털이

마지막으로, 죄송합니다. 투영 문제가있는 경우 포인트를 변환하는 방법이 있습니다. var a = new OpenLayers.LonLat (3,53) .transform (ll, new OpenLayers.Projection ( 'EPSG : 900913')) ;
털이
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.