Ajout de photos panoramiques à une carte OpenLayers

Question

J'ai une carte OpenLayers assez bien intégrée à laquelle je souhaite ajouter des photos de l'API Panoramio. Malheureusement, il semble que les deux 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 pourquoi je ne peux pas le faire seul. J'ai l'impression que même en utilisant ce tutoriel j'ai beaucoup d'espaces vides dans mon esprit et pour ne pas mentionner, les photos n'apparaissent pas sur ma carte: -/

Voici ma partie du code qui démontre mon utilisation de cette 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. En me donnant un résultat de quelques vignettes Panoramio sur ma carte glissante. Malheureusement, il semble que la couche est là, mais vide .. Lorsque je regarde le texte de réponse dans Firebug, je peux voir que le JSON est retourné avec des attributs de photos de Panoramio, à l'endroit que j'ai spécifié (Tibet). J'apprécie votre aide et votre temps pour examiner mes problèmes.

Merci,

elshae

Answer 1

Je ne sais pas comment vous maîtrisez OpenLayers, mais le projet est certainement pas underdocumented. Il existe une documentation complète sur l'API et de nombreux exemples qui devraient vous aider à démarrer.

Mais revenons maintenant à votre problème: il s'agit probablement d'un problème de projection. Panoramio renvoie les coordonnées WSG-84 (GPS) pour toutes les photos trouvées, et la couche de base openstreetmap de votre carte est en projection Spherical Mercator ('EPSG: 900913'). 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')); 

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