Verwendung von L.BeautifyMarkers mit L.MarkerClusters

Question

Ich möchte Markercluster mit benutzerdefinierten individuellen Markern verwenden, indem ich die Leaflet-Plugin-Verschönerungsmarker verwende. Die Markierungen werden basierend auf einer Feature-Eigenschaft namens EncounterType von einem GeoJson angepasst. Bei der Verwendung von L.circleMarker hat die Anpassung funktioniert. Leider funktioniert es nicht mit dem Plugin und ich denke es sollte, da es kein PNG-Format verwendet.

var brownmarker = { 
     icon: 'paw', 
     iconShape: 'marker', 
     borderColor: '#b3334f', 
     textColor: '#b3334f' 
     }; 

    var redmarker = { 
     icon: 'bullseye', 
     iconShape: 'marker', 
     borderColor: 'Red', 
     textColor: 'Black', 
    }; 

    var bluemarker = { 
     icon: 'camera-retro', 
     iconShape: 'marker', 
     borderColor: 'Blue', 
     textColor: 'Black', 
    }; 

    var Red = L.BeautifyIcon.icon(redmarker); 
    var Blue = L.BeautifyIcon.icon(bluemarker); 
    var Brown = L.BeautifyIcon.icon(brownmarker); 


    var markers = L.markerClusterGroup(); 
    function style(feature){ 
     switch (feature.properties.EncounterType) { 
      case 'Shooting' || 'Hunting': 
      return { 
       Red 
      }; 
      case 'Sighting': 
      return { 
       Blue 
      }; 
      case 'Attack' || 'livestock' || 'Chased' : 
      return { 
       Brown 
      }; 
      default: 
      return { 
       Blue 
      } 
     } 
     } 


    var geoJsonLayer= L.geoJSON(storer, { 
     pointToLayer: function (geoJsonPoint, latlng) { 
     return L.marker(latlng); 
     }, 
      onEachFeature: onEachFeature, 
      icon: style 
     }); 


    markers.addLayer(geoJsonLayer); 
    map.addLayer(markers); 

Wie kann ich diese einzelnen Marker mithilfe dieses Plugins anpassen, während sie in MarkerCluster Form bleiben?

Answer 1

Es sollte kein Problem bei der Verwendung BeautifyMarker Plugin zusammen mit Leaflet.markercluster Plugin sein.

Sie erstellen nur seltsam Ihre Marke in pointToLayer Option.

Die Option icon ist für L.marker Factory, nicht L.geoJSON.

var geoJsonLayer = L.geoJSON(storer, { 
    pointToLayer: function(geoJsonPoint, latlng) { 
     return L.marker(latlng, { 
     icon: style(geoJsonPoint) 
     }); 
    } 
    /*, 
     onEachFeature: onEachFeature, 
     icon: style*/ 
}); 

Live-Demo: https://jsfiddle.net/rbje8v40/