来自geoj​​son的Angular Leaflet MarkerCluster

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

你可以试试这样的（讨论和代码sn-ps 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());
        });
    }

});