L'aggiunta di Panoramio foto a un OpenLayers Mappa

Question

Ho un OpenLayers abbastanza ben integrati mappa che voglio aggiungere foto dal Panoramio API a. Purtroppo, sembra sia API sono sotto documentato su questo argomento. Ho trovato un ottimo tutorial qui http://www.gisandchips.org/ 2010/05/04 / OpenLayers-y-Panoramio / ma come io sono nuovo a tutto questo, potrebbe essere il motivo per cui non riesco a completare questo per conto mio. Mi sento come anche utilizzando questo tutorial ho un sacco di spazi vuoti nella mia mente e per non parlare, le foto non sono visualizzati sul mappa: - /

Ecco la mia parte del codice che dimostra il mio uso di tale tutorial e quello che ho tentato finora:

 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

Nella mia mente questo codice dovrebbe funzionare perfettamente. dandomi un risultato di alcune miniature Panoramio sul mio slippy map. Purtroppo sembra che il livello è lì, ma blank..When guardo il testo di risposta in Firebug vedo che il JSON viene restituito con gli attributi di foto da Panoramio, nel percorso che ho specificato (Tibet). Apprezzo il vostro aiuto e il tempo di prendere in considerazione i miei problemi.

Grazie,

elshae

Answer 1

Non so quanto abile siete in OpenLayers, ma il progetto non è certamente underdocumented. V'è una vasta documentazione delle API e anche numerosi esempi che dovrebbe aiutare a iniziare.

Ma ora di nuovo al vostro problema: probabilmente, questo è un problema di proiezione. Panoramio ritorna WSG-84 (GPS) Coordinate per tutte le immagini che ha trovato, e la baselayer OpenStreetMap della mappa è in proiezione sferica Mercatore ( 'EPSG: 900913'). Quindi, è necessario convertire le coordinate da WSG-84 a sferica Mercator utilizzando qualcosa di simile

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

e quindi utilizzare il punto e propone la geometria