代码之家  ›  专栏  ›  技术社区  ›  toto lebete

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

  •  -1
  • toto lebete  · 技术社区  · 10 年前

    我用Openlayers 3开发了一个网站,需要你的帮助。 我的网页由两部分共享:列表显示和地图显示。 My website

    我已经创建了由簇设置动画的标记。

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

    通过这种方法,我得到了所有标记的信息,我需要得到屏幕上显示的标记。 谢谢你的帮助。

    1 回复  |  直到 10 年前
        1
  •  0
  •   toto lebete    10 年前

    我通过以下方式解决了我的问题:

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

    谢谢

    推荐文章