这是我在购买Packt Open Layers书之后首次涉足javascript和openlayers。
总而言之,我希望通过使用本书中的代码示例,以类似于本示例(http://dev.openlayers.org/examples/georss-flickr.html)的方式将经过地理处理的照片的缩略图返回到地图上的标记。
我将书中的脚本修改为
在使用标准点标记器时,两者似乎都可以正常工作。
我卡住的那部分是作为标记的地理参考缩略图的显示。我相信我已经适当地创建了一个(经度,纬度)数组以分配给每张照片,但是尽管我已尽力而为,但缩略图并未按预期显示。
感谢您提供有关显示缩略图的任何建议!
我的代码如下:
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol4/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="photo-info"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../assets/ol4/js/ol-debug.js"></script>
<script>
var flickrSource = new ol.source.Vector();
var cache = {};
function photoStyle(feature, scale) {
console.log(feature)
var url = feature.get('url');
var key = scale + url;
if (!cache[key]) {
cache[key] = new ol.style.Style({
image: new ol.style.Icon({
scale: scale,
src: url
})
});
}
return cache[key];
}
function flickrStyle(feature) {
return [photoStyle(feature, 0.10)];
}
function selectedStyle(feature) {
return [photoStyle(feature, 0.50)];
}
var flickrLayer = new ol.layer.Vector({
source: flickrSource,
style: flickrStyle
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = ol.proj.transform([-8159524.043141224, 5036079.453856719], 'EPSG:4326', 'EPSG:4326');
var view = new ol.View({
center: center,
zoom: 12
});
var map = new ol.Map({
renderer: 'canvas',
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function photoContent(feature) {
var content = $('#photo-template').html();
var keys = ['url','owner','date_taken','latitude','longitude','tags','title','description'];
for (var i=0; i<keys.length; i++) {
var key = keys[i];
var value = feature.get(key);
content = content.replace('{'+key+'}',value);
}
return content;
}
var select = new ol.interaction.Select({
layers: [flickrLayer],
style: selectedStyle
});
map.addInteraction(select);
var selectedFeatures = select.getFeatures();
selectedFeatures.on('add', function(event) {
var feature = event.target.item(0);
var content = photoContent(feature);
$('#photo-info').html(content);
});
selectedFeatures.on('remove', function(event) {
$('#photo-info').empty();
});
function successHandler(data) {
var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
data.photos.photo.forEach(function(item) {
var feature = new ol.Feature(item);
var longurl=document.createTextNode('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg');
var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
item["url"] = longurl;
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
flickrSource.addFeature(feature);
});
}
// the only change is to point at the remote URL for the feed
$.ajax({
url: 'https://api.flickr.com/services/rest/',
type: 'GET',
data: {
api_key:'8aeb07270bee5086ce1a08605fc22c6f',
method: 'flickr.photos.search',
format: 'json',
tags: 'bird',
per_page: 100,
extras:'geo,date_taken,tags,description',
bbox:'-73.48965402624748,41.088712779781275,-73.10684915564202,41.23268393804162',
page: 1},
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrApi',
success: successHandler
});
</script>
<script type="text/html" id="photo-template">
<a href="{link}" target="_blank" title="Click to open photo in new tab"><img src="{url}" style="float: left"></a><br>
<p>Taken by <a href="http://www.flickr.com/people/{author_id}" target="_blank" title="Click to view author details in new tab">{author}</a> on {date_taken} at lat: {latitude} lon: {longitude}</p><br>
<p>Tagged in <b>{tags}</b></p>
</script>
</body>
</html>