获取屏幕上显示的标记数据

Question

我开发了一个Openlayers 3的网站，需要你的帮助。 我的网页共有两部分：列表显示和地图显示。

我已创建由群集动画的标记。

var features = []; 
 
    $.ajax({ 
 
     url: urlUpdate, 
 
\t dataType: 'json', 
 
\t async: false, 
 
\t success: function(json1){ 
 
      $.each(json1, function (key, data) { 
 
       if (key === 'features') { 
 
        $.each(data, function (k, v) { 
 
         if (v.type === 'Feature') { 
 
          if (v.geometry.coordinates.length > 1){ 
 
           features[k] = new ol.Feature({ 
 
               geometry: new ol.geom.Point(ol.proj.transform(v.geometry.coordinates, 'EPSG:4326', 'EPSG:3857')), 
 
               id: v.properties.id, 
 
               name: v.properties.name, 
 
               lieu: v.properties.lieu, 
 

 
              }); 
 
          } 
 
\t \t \t } 
 
        }); 
 
\t \t } 
 
      }); 
 
\t } 
 
    });   
 

 
    
 
    var source = new ol.source.Vector({ 
 
     features: features 
 
    }); 
 
    
 
    
 

 
    var clusterSource = new ol.source.Cluster({ 
 
     distance: 40, 
 
     source: source 
 
    }); 
 
    
 
    var clusters = new ol.layer.Vector({ 
 
     source: clusterSource, 
 
     style: ajouterStyle 
 
    }); 
 
    
 
    var oldMarkers = map.getLayers().a[2]; 
 
    
 
    map.removeLayer(oldMarkers);  
 

 
    map.addLayer(clusters);

的列表显示需要更新地图显示，并且反之亦然。

map.getView().on('change:resolution', function(evt){ 
 
    var myLayer = map.getLayers().getArray()[2]; 
 
     myLayer.getSource().forEachFeature(function(feature){ 
 
     var geom = feature.getGeometry(); 
 
     var coord = geom.getCoordinates(); //this is valid for a ol.geom.Point 
 
     var nb = feature.get('features').length; 
 
      var content = ''; 
 
      if(nb === 1){ 
 
       var name = feature.get('features')[0].get("name"); 
 
       var date = feature.get('features')[0].get("date"); 
 
       var id = feature.get('features')[0].get("id"); 
 
       var content = '<li class="events">\n\ 
 
            <div class="content_events">\n\ 
 
             '<a href="?event=' + id +'" >' + name + "</a>\n\ 
 
             <p>" + date + "</p>\n\ 
 
            </div>\n\ 
 
           </li>"; 
 
      } else{ 
 
       for(i=0; i< nb; i++){ 
 
        var name = feature.get('features')[i].get("name"); 
 
        var date = feature.get('features')[i].get("date"); 
 
        var id = feature.get('features')[i].get("id"); 
 
        content += '<li class="events">' + 
 
            '<div class="content_events">\n\ 
 
             '<a href="?event=' + id + '" >' + name + "</a>"+ 
 
             "<p>" + date + "</p>\n\ 
 
            </div>\n\ 
 
           </li>"; 
 
       } 
 
    $("#listing_events").html('<ul class="list-event">' + content + '</ul>') 
 
     
 
    });

用这种方法我得到的所有标记的信息，我需要在屏幕上显示的标记。 感谢您的帮助。

Answer 1

我必须解决我的问题：

var source = new ol.source.Vector({ features: features }); var bb = source.getExtent(); map.getView().fitExtent(bb, map.getSize());

感谢