Ajout de photos à un Panoramio OpenLayers Carte

Question

J'ai OpenLayers assez bien intégré carte que je veux ajouter des photos à partir de l'API Panoramio à. Malheureusement, il semble à la fois API sont sous documentés sur ce sujet. J'ai trouvé un bon tutoriel ici http://www.gisandchips.org/ 2010/05/04 / OpenLayers-y panoramio / mais comme je suis nouveau à tout cela, pourrait être la raison pour laquelle je ne peux pas terminer ce moi-même. Je me sens comme même avec ce tutoriel, j'ai beaucoup d'espaces vides dans mon esprit et de ne pas mentionner, les photos ne sont pas comparais sur ma carte: - /

Voici ma partie du code qui illustre mon utilisation de ce tutoriel et ce que j'ai essayé jusqu'à présent:

 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

Dans mon esprit, ce code devrait fonctionner parfaitement. me donner suite à certaines vignettes Panoramio sur ma carte slippy. Malheureusement, il semble que la couche est là, mais blank..When je regarde le texte de réponse à Firebug je peux voir que le JSON est retourné avec les attributs de photos de Panoramio, dans le lieu que je l'ai spécifié (Tibet). Je vous remercie de votre aide et de temps pour examiner mes questions.

Merci,

elshae

Answer 1

Je ne sais pas comment vous maîtrisez OpenLayers, mais le projet est certainement pas underdocumented. Il existe une abondante documentation api et aussi de nombreux exemples qui devraient aider à démarrer.

Mais maintenant à votre problème: probablement, c'est une question de projection. Panoramio retourne WSG-84 (GPS) Coordonnées pour toutes les photos qu'il trouve, et le sous-vêtement de OpenStreetMap de votre carte est en projection Mercator sphérique ( 'EPSG: 900913). Donc, vous devez convertir les coordonnées de WSG-84 à Mercator sphérique en utilisant quelque chose comme

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

et puis utiliser le point converti pour la géométrie