Как наложить точки широты / долготы на слой Google в OpenLayers 2?


13

Я застрял, добавляя векторную точку в широте / долготе поверх слоя Google в OpenLayers. Точка движется, когда я панорамирую карту. Этого не произойдет, если я заменю слой 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: true к своему слою Google, чтобы векторные слои правильно отображались поверх базового слоя Google (это является причиной смещения геометрии).
  2. Добавьте свойство maxExtent вашего слоя Google, иначе центр карты не будет установлен правильно. Показанный ниже экстент - это экстент мира в координатах Меркатора.
  3. Как указал пользователь 1795, геометрия вашей точки должна быть перепроецирована с 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', которая фактически позволяет репроекции?
Подземье

1
Согласитесь, это не интуитивно понятно: опция sphericalMercator добавляет следующие функции, которые позволяют ему работать с данными в других проекциях - dev.openlayers.org/docs/files/OpenLayers/Layer/…
geographika

4

Это проблема проецирования, вы должны преобразовать проекцию точки в базовый слой (карта Google здесь). Следующий код должен работать

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

Это связано с тем, что проекция по умолчанию для карты Google (сферический меркатор) составляет 900913, а для простой точки в lonlat - 4326.

Пожалуйста, убедитесь, что точка установлена ​​как (долгота, широта), а не как (широта, долгота).


Добавление преобразования заставляет точку исчезнуть на моей карте. Моя версия OpenLayers - 2.9.1, если она имеет значение.
Подземье

Point.transform сделал свое дело для меня!
Стефан

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, так как в основном они использовались разработчиками.


Привет, Сентил, я не уверен, как версии API Карт Google JS влияют на мою проблему с OpenLayers.
Подземье

Привет Подземье, у меня были проблемы с v3.4, когда я использовал Openlayers, а затем специально использовал 3.3, а при использовании магистральной версии карт Google, результаты непредсказуемы, так как разработка продолжается. Вы пробовали с версионированием? Несмотря на то, что вы используете openlayers, Google Maps API лежит в основе этого.
Senthil

0

Я думаю, что это вопрос проекции.

Вы пытались сообщить центр тяжести точки, когда карта поворачивается? Вы можете увидеть, если что-то меняется.

Но из того, что я могу увидеть в вашем коде, вы добавили бы точку WGS84 к другому corordsys


Кстати, вы пытались запросить проекцию карты, которая у вас есть, просто чтобы посмотреть, как она на самом деле установлена?
Волосатые

и, наконец, извините, но есть способ изменить свою точку зрения, если у вас возникли проблемы с проекцией: var a = new OpenLayers.LonLat (3,53) .transform (ll, новый OpenLayers.Projection ('EPSG: 900913')) ;
Волосатые
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.