Question

这是我在购买Packt Open Layers书之后首次涉足javascript和openlayers。

总而言之，我希望通过使用本书中的代码示例，以类似于本示例（http://dev.openlayers.org/examples/georss-flickr.html）的方式将经过地理处理的照片的缩略图返回到地图上的标记。

我将书中的脚本修改为

使用flickr.photos.search API；
1. 从照片组成部分中创建照片网址（'https://farm'+ item.farm +'。staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg'）

在使用标准点标记器时，两者似乎都可以正常工作。

我卡住的那部分是作为标记的地理参考缩略图的显示。我相信我已经适当地创建了一个（经度，纬度）数组以分配给每张照片，但是尽管我已尽力而为，但缩略图并未按预期显示。

感谢您提供有关显示缩略图的任何建议！

我的代码如下：

    <!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>

打开图层-图片不显示为点图标

0 个答案: