我有一个很好集成的OpenLayers地图,我想将Panoramio API中的照片添加到其中。不幸的是,似乎两个API都未对此主题进行记录。我在http://www.gisandchips.org/2010/05/04/openlayers-y-panoramio/上找到了一个很棒的教程,但是由于我不熟悉所有这些,可能就是为什么我不能自己完成此教程。我觉得即使使用本教程,我的脑海中也有很多空白,更不用说,照片没有出现在地图上:-/
这是我的代码部分,展示了我对该教程的使用以及到目前为止的尝试:
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
在我看来,这段代码应该可以完美地工作。给我一些滑地图上的Panoramio缩略图的结果。不幸的是,似乎该层在那里,但是是空白的。当我在Firebug中查看响应文本时,我可以看到JSON返回的是Panoramio的照片属性,位于我指定的位置(西藏)。感谢您的帮助和时间考虑我的问题。
谢谢,
艾尔莎
最佳答案
我不知道您对OpenLayers的熟练程度,但是该项目肯定没有文档不足。有大量的api文档,还有许多示例可以帮助您入门。
但是现在回到您的问题:可能是投影问题。 Panoramio对找到的所有照片返回WSG-84(GPS)坐标,并且地图的openstreetmap基本层位于球形墨卡托投影('EPSG:900913')中。
因此,您必须使用以下方法将WSG-84的坐标转换为球形墨卡托
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'));
然后将转换后的点用于您的几何
关于javascript - 将Panoramio照片添加到OpenLayers map ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4196310/