La adición de Panoramio fotos en un mapa OpenLayers

Question

Tengo un OpenLayers bastante bien integrados mapa que quiero añadir fotos desde el Panoramio API a. Por desgracia, parece que tanto la API de están bajo documentado sobre este tema. He encontrado un gran tutorial aquí http://www.gisandchips.org/ 2010/05/04 / openlayers-y-Panoramio / pero como soy nuevo en todo esto, podría ser por qué no puedo completar esto por mi cuenta. Siento que incluso utilizando este tutorial tengo una gran cantidad de espacios en blanco en mi mente y no mencionar, las fotos no aparecen en mi mapa: - /

Esta es mi parte del código que demuestra mi uso de ese tutorial y lo que he intentado hasta ahora:

 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

En mi mente este código debe funcionar a la perfección. me da un resultado de algunas miniaturas Panoramio en mi mapa resbaladizo. Por desgracia, parece que la capa está ahí, pero blank..When miro el texto de respuesta en Firebug que se puede ver que el JSON se volvió con los atributos de las fotos de Panoramio, en el lugar que he especificado (Tíbet). Agradezco su ayuda y tiempo para considerar mis problemas.

Gracias,

elshae

Answer 1

No sé cómo competentes se encuentra en OpenLayers, pero el proyecto no es ciertamente poco documentadas. Existe una extensa documentación de la API y también numerosos ejemplos que debería ayudar a empezar.

Pero ahora de nuevo a su problema: Probablemente, esto es una cuestión de proyección. Panoramio vuelve WSG-84 (GPS) Coordenadas para todas las fotos que se ha encontrado, y la capa de base openstreetmap de su mapa se encuentra en la proyección de Mercator esférica ( 'EPSG: 900913'). Así que hay que convertir las coordenadas de WSG-84 a Mercator esférica usando algo como

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

y luego utilizar el punto convertida para su geometría