Hinzufügen von Panoramio Fotos zu einer Openlayers Karte

Question

Ich habe einen ziemlich gut integriert Openlayers Karte, dass ich Fotos von dem Panoramio-API hinzufügen möge. Leider scheint es, sowohl die APIs sind unter zu diesem Thema dokumentiert. Ich fand ein großes Tutorial hier http://www.gisandchips.org/ 2010/05/04 / Openlayers-y-panoramio / aber, wie ich all dies bin hier, könnte sein, warum ich nicht auf meinem eigenen abschließen können. Ich fühle mich wie auch dieses Tutorial ich mit vielen Leerstellen in meinem Kopf habe und nicht zu vergessen, die Fotos nicht angezeigt auf meiner Karte: - /

Hier ist mein Teil des Codes, der meine Verwendung dieses Tutorial zeigt, und das, was ich bisher versucht:

 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

In meinem Kopf soll dieser Code perfekt funktionieren. Geben Sie mir ein Ergebnis von einigen Panoramio Thumbnails auf meiner slippy Karte. Leider scheint es, dass die Schicht ist, aber blank..When ich Blick auf dem Antworttext in Firebug kann ich sehen, dass die JSON mit Attributen von Fotos von Panoramio zurückgeführt wird, in der Lage I angegeben habe (Tibet). Ich schätze Ihre Hilfe und Zeit, um meine Probleme zu berücksichtigen.

Danke,

elshae

Answer 1

Ich weiß nicht, wie kompetent Sie in Openlayers sind, aber das Projekt ist sicherlich nicht underdocumented. Es gibt eine umfangreiche Dokumentation api und auch zahlreiche Beispiele, die Ihnen helfen sollen, zu beginnen.

Aber nun zurück zu Ihrem Problem: wahrscheinlich ist dies eine Projektion Problem. Panoramio kehrt WSG-84 (GPS) Koordinaten für alle die Fotos gefunden, und die openstreetmap Schichtunterlage Ihrer Karte ist in Spherical Mercator-Projektion ( "EPSG: 900913). So können Sie die Koordinaten von WSG-84 Spherical Mercator konvertieren müssen mit so etwas wie

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

und verwenden Sie dann die konvertierte Punkt für Ihre Geometrie