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

Question

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

我创建了由群集设置动画的标记。

    var features = [];
    $.ajax({
        url: urlUpdate, 
	dataType: 'json',
	async: false,
	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, 

                                            });   
                            }
			}
                    });
		}
            });
	}
    });        

    
    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() ); 

由于