Leaflet: Polygon-Center-Objekte, die von MarkerCluster verwendet werden können

Question

Gibt es eine Möglichkeit, mit .getCenter() erstellte Centerpoints innerhalb eines onEachFeature-Ereignisses (siehe unten) einem L.Marker oder ähnlichen Objekt hinzuzufügen, das enthält der Centerpoints, die für dieses Event erstellt wurden und die von Leaflet.Markercluster verwendet werden können?

Ich dachte mit FeatureGroup könnte die Lösung sein, aber anscheinend nicht.

Ich kann Unclustered Centerpoints auf der Karte über die AddTo (map) -Methode auf L.Marker oder L.FeatureGroup zeigen, aber leider, wenn ich versuche, markerCluster auf die Objekte entweder von diesen beiden zu erstellen, die Die Karte wird leer angezeigt. Auf der Konsole im Browser erscheinen keine Fehlermeldungen.

Ich bin immer noch ziemlich grün bei JS, also habe ich eine Ahnung, dass etwas Grundlegendes fehlt, vielleicht über L.Markercluster selbst, und ich entschuldige mich für alle noob Fehler hier.

Bibliotheken:

<!-- Leaflet --> 

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" 
    integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" 
    crossorigin=""/> 
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" 
    integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" 
    crossorigin=""></script> 

<!-- ESRI Leaflet --> 

<script src="https://unpkg.com/esri-leaflet@2.0.4/dist/esri-leaflet.js"></script> 

<!-- Leaflet-markercluster --> 

<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.6/dist/MarkerCluster.css"></script> 
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.6/dist/MarkerCluster.Default.css"></script> 
<script src="https://unpkg.com/leaflet.markercluster@1.0.6/dist/leaflet.markercluster.js"></script> 

<!-- Leaflet.MarkerCluster.LayerSupport --> 

<script src="https://unpkg.com/leaflet.markercluster.layersupport@1.0.5/dist/leaflet.markercluster.layersupport.js"></script> 

Script:

<script> 

    var map = L.map('map', { 
    center: [42.389810, -72.524684], 
    zoom: 5 
    }); 

    var esriTopo = L.esri.basemapLayer('Topographic').addTo(map); 

    var ProjectMap = L.esri.featureLayer ({ 
    url: 'https://services.arcgis.com/2gdL2gxYNFY2TOUb/arcgis/rest/services/NECSC_Test_Data/FeatureServer/1', 
    //cheap hack to making the polygons invisible 
    weight: 0, 
    fillOpacity: 0, 

    // creating the centerpoints 
    onEachFeature: function(feature,layer){ 
     if (feature.geometry.type = 'Polygon') { 
     var bounds = layer.getBounds(); 
     var center = bounds.getCenter(); 

     var centerpoints = L.marker(center); 
     centerpointlayer.addLayer(centerpoints); 
     // centerpointlayer defined below as global variable 
     }; 
    }; 
    }).addTo(map); 

    var centerpointlayer = L.featureGroup(); 
    // 

    var clusters = L.markerClusterGroup.layerSupport(); 
    clusters.addTo(map); 
    clusters.checkIn(centerpointlayer); 

    map.zoomIn(5); 
    map.zoomOut(5); 

</script> 

</body> 
</html> 

Answer 1

Gah ... Ich stellte sich heraus, war die Umsetzung L.Markercluster falsch (das heißt, es in der API-Dokumentation nicht wie sagt). Die letzten Codezeilen vor/Skript am Ende sollten lauten:

var centerpointlayer = L.layerGroup(); 
var clusters = L.markerClusterGroup.layerSupport(); 
clusters.addLayer(centerpointlayer); 
map.addLayer(clusters);