Добавление фотографий Panoramio на карту OpenLayers - PullRequest
Новая
       75

Добавление фотографий Panoramio на карту OpenLayers

1 голос
/ 16 ноября 2010

У меня есть довольно хорошо интегрированная карта OpenLayers, в которую я хочу добавить фотографии из API Panoramio. К сожалению, похоже, что оба API недостаточно документированы по этому вопросу. Я нашел один замечательный учебник здесь http://www.gisandchips.org/2010/05/04/openlayers-y-panoramio/, но, поскольку я новичок во всем этом, может быть, поэтому я не могу завершить это самостоятельно. Я чувствую, что даже используя этот учебник, у меня в голове много пустых мест, и не говоря уже о том, что фотографии НЕ появляются на моей карте: - /

Вот моя часть кода, которая демонстрирует мое использование этого учебника и то, что я пытался сделать до сих пор: 

 var url = "http://www.panoramio.com/map/get_panoramas.php";
                var parameters = {
                   order:'popularity',
                   set:'full',
                   from:0,
                   to:20,
                   minx: 84.05,
                   miny: 31.36,
                   maxx: 91.89,
                   maxy: 32.30,
                   size:'thumbnail'
                }//end parameters

                OpenLayers.loadURL(url, parameters, this, displayPhotos);

                function displayPhotos(response) {
                    var json = new OpenLayers.Format.JSON();
                    var panoramio = json.read(response.responseText);
                    var features = new Array(panoramio.photos.length);

                    for (var i = 0; i < panoramio.photos.length; i++)
                    {
                        var upload_date = panoramio.photos[i].upload_date;
                        var owner_name = panoramio.photos[i].owner_name;
                        var photo_id = panoramio.photos[i].photo_id;
                        var longitude =panoramio.photos[i].longitude;
                        var latitude = panoramio.photos[i].latitude;
                        var pheight = panoramio.photos[i].height;
                        var pwidth = panoramio.photos[i].width;
                        var photo_title = panoramio.photos[i].photo_title;
                        var owner_url = panoramio.photos[i].owner_url;
                        var owner_id = panoramio.photos[i].owner_id;
                        var photo_file_url = panoramio.photos[i].photo_file_url;
                        var photo_url = panoramio.photos[i].photo_url;


                        var fpoint = new OpenLayers.Geometry.Point(longitude,latitude);

                        var attributes = {
                               'upload_date' : upload_date,
                               'owner_name':owner_name,
                               'photo_id':photo_id,
                               'longitude':longitude,
                               'latitude':latitude,
                               'pheight':pheight,
                               'pwidth':pwidth,
                               'pheight':pheight,
                               'photo_title':photo_title,
                               'owner_url':owner_url,
                               'owner_id':owner_id,
                               'photo_file_url':photo_file_url,
                               'photo_url':photo_url
                        }//end attributes

                        features[i] = new OpenLayers.Feature.Vector(fpoint,attributes);

                    }//end for

                    var panoramio_style2 = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
                        pointRadius: 7,
                        fillColor: "red",
                        fillOpacity: 1,
                        strokeColor: "black",
                        externalGraphic: "panoramio-marker.png"
                    }, OpenLayers.Feature.Vector.style["default"]));

                    var vectorPano = new OpenLayers.Layer.Vector("Panoramio Photos", {
                           styleMap: panoramio_style2
                    });

                    vectorPano.addFeatures(features);
                    map.addLayer(vectorPano);

                }//end displayPhotos

На мой взгляд, этот код должен работать идеально. Дает мне результат нескольких миниатюр Panoramio на моей скользкой карте. К сожалению, кажется, что слой есть, но пустой. Когда я смотрю на текст ответа в Firebug, я вижу, что JSON возвращается с атрибутами фотографий из Panoramio в указанном мной месте (Тибет). Я ценю вашу помощь и время, чтобы рассмотреть мои проблемы.

Спасибо,

elshae

1 Ответ

2 голосов
/ 02 декабря 2010

Я не знаю, насколько вы опытны в OpenLayers, но проект определенно не недооценен.Существует обширная документация API, а также многочисленные примеры, которые должны помочь вам начать работу.

Но теперь вернемся к вашей проблеме: вероятно, это проблема проекции.Panoramio возвращает координаты WSG-84 (GPS) для всех найденных фотографий, а базовый слой openstreetmap вашей карты находится в сферической проекции Меркатора («EPSG: 900913»).Таким образом, вы должны преобразовать координаты из WSG-84 в сферический меркатор, используя что-то вроде 

var curPic = panoramio.photos[i];

var panLonLat = new OpenLayers.LonLat(curPic.longitude, curPic.latitude);
panLonLat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection('EPSG:900913'));

, а затем использовать преобразованную точку для вашей геометрии

...