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

Question

У меня есть довольно хорошо интегрированная карта 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

Answer 1

Я не знаю, как опытный вы в OpenLayers, но проект, конечно, не underdocumented. Существует обширная документация 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')); 

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