Угловая листовка MarkerCluster от GeoJSON

Question

Я хочу, чтобы показать листовку MarkerCluster на карте, и проблема заключается в извлечении данных из GeoJSON:

{ 
    "type": "FeatureCollection", 
    "features": 
    [ 
     { 
      "type": "Feature", 
      "id": "sto", 
      "properties": { 
       "name": "Stoke" 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [ 
        -0.0731, 
        51.5615 
       ] 
      } 
     }, 
     { 
      "type": "Feature", 
      "id": "dal", 
      "properties": { 
       "name": "Dalston" 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [ 
        -0.070, 
        51.545 
       ] 
      } 
     }, 
     { 
      "type": "Feature", 
      "id": "wan", 
      "properties": { 
       "name": "Wandsworth" 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [ 
        -0.1924, 
        51.4644 
       ] 
      } 
     }, 
     { 
      "type": "Feature", 
      "id": "batt", 
      "properties": { 
       "name": "Battersea" 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [ 
        -0.1677, 
        51.4638 
       ] 
      } 
     } 
    ] 
} 

Я попытался воспроизвести ту же ситуацию в двух примерах:

1. Working MarkerCluster, but without geojson data
2. Second with geojson, but MarkerCluster doesn't work

Кто-нибудь знает, почему MarkerCluster во втором примере не отображается? Я пропустил какой-то атрибут в geojson?

Answer 1

Вы можете попробовать что-то вроде этого (обсуждение и фрагменты кода here)

// Get the countries geojson data from a JSON 
$http.get("test.geojson").success(function(data, status) { 
    addGeoJsonLayerWithClustering(data); 

    function addGeoJsonLayerWithClustering(data) { 
     var markers = L.markerClusterGroup(); 
     var geoJsonLayer = L.geoJson(data, { 
      onEachFeature: function (feature, layer) { 
       layer.bindPopup(feature.properties.Nome.value); 
      } 
     }); 
     markers.addLayer(geoJsonLayer); 
     leafletData.getMap().then(function(map) { 
      map.addLayer(markers); 
      map.fitBounds(markers.getBounds()); 
     }); 
    } 

});