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

【问题标题】：Get markers data displayed on the screen获取屏幕上显示的标记数据
【发布时间】：2015-07-20 13:36:49
【问题描述】：

我用 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>')
        
    });

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

【问题讨论】：

我已经解决了我的问题： var source = new ol.source.Vector({ features: features }); var bb = source.getExtent(); map.getView().fitExtent(bb, map.getSize());

标签： javascript google-maps openlayers-3

【解决方案1】：

我已经解决了我的问题：

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

谢谢

【讨论】：