angulaire Brochure MarkerCluster de GeoJSON

Question

Je veux montrer la notice MarkerCluster sur la carte, et le problème est à la récupération de données à partir 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 
       ] 
      } 
     } 
    ] 
} 

J'ai essayé de reproduire la même situation dans deux exemples:

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

Est-ce que quelqu'un sait pourquoi MarkerCluster dans le deuxième exemple ne montre pas? Est-ce que j'ai manqué un attribut dans geojson?

Answer 1

Vous pouvez essayer quelque chose comme ça (la discussion et des extraits de code 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()); 
     }); 
    } 

});