Open Layers - Φωτογραφίες ως σημείο Icon δεν εμφανίζει

ψήφοι
0

Αυτή είναι η πρώτη μου επιδρομή σε δύο javascript και OpenLayers μετά την αγορά του Packt Open Layers βιβλίο.

Εν ολίγοις Ψάχνω να επιστρέψει μικρογραφίες της γεωαναφοράς φωτογραφίες με τους δείκτες στο χάρτη, με παρόμοιο τρόπο παρόμοιο με αυτό το παράδειγμα ( http://dev.openlayers.org/examples/georss-flickr.html ) με τη χρήση του κωδικού παράδειγμα από το βιβλίο.

Άλλαξα το σενάριο από το βιβλίο για να

  1. χρησιμοποιήστε το flickr.photos.search API?
    1. δημιούργησε τα urls φωτογραφία από τα μέρη φωτογραφίες συστατικών (» https: // αγρόκτημα “ + item.farm +”staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg «)

δύο εκ των οποίων φαίνεται να δουλεύουν μια χαρά και εργάστηκε κατά τη χρήση τυποποιημένου δείκτη σημείο.

Το κομμάτι είμαι κολλημένος στο είναι η οθόνη των γεωαναφοράς εικονίδια ως δείκτες. Πιστεύω ότι δημιούργησε σωστά μια σειρά από (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>
Δημοσιεύθηκε 27/11/2018 στις 17:41
πηγή χρήστη
Σε άλλες γλώσσες...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more