Открытые слои - фотографии как значок точки не отображаются - PullRequest
Новая
       5

Открытые слои - фотографии как значок точки не отображаются

0 голосов
/ 27 ноября 2018

Это мой первый набег на javascript и openlayers после покупки книги Packt Open Layers.

В итоге я хочу вернуть миниатюры фотографий с привязками к маркерам на карте аналогичным образом.аналогично этому примеру (http://dev.openlayers.org/examples/georss-flickr.html) с использованием примера кода из книги.

Я изменил сценарий из книги на

  1. , используя flickr.photos.searchAPI;
  2. создал URL-адреса фотографий из составных частей фотографий ('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg')

, оба из которых работают нормально и работают при использовании стандартной точкиmarker.

Часть, на которой я застрял - это отображение миниатюр с географической привязкой в ​​виде маркеров. Я считаю, что правильно создал массив (Long, lat) для назначения каждой фотографии, но миниатюры не отображаютсякак задумано, несмотря на все мои усилия.

Спасибо за любые советы по отображению миниатюр!

Мой код выглядит следующим образом: 

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