javascript - 将 L.BeautifyMarkers 与 L.MarkerClusters 一起使用

Question

我想使用 Leaflet 插件 beautify-markers 将 markerclusters 与自定义的单个标记一起使用。这些标记是根据来自 geoJson 的名为 EncounterType 的特征属性自定义的。使用 L.circleMarker 时，自定义有效。不幸的是，它不能与插件一起使用，我认为应该可以，因为它没有使用 png 格式。

    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);

如何使用此插件自定义这些单独的标记，同时将它们保持在 MarkerCluster 形式？

Answer 1

使用BeautifyMarker应该没有问题与 Leaflet.markercluster 一起插件插件。

您只是奇怪地在 pointToLayer 选项中创建了您的标记。

icon 选项用于 L.marker工厂，而不是 L.geoJSON。

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

现场演示:https://jsfiddle.net/rbje8v40/