Markerclusterカスタムアイコンスタイリング付き角度リーフレット

Question

私は、このアプリケーションのリーフレット地図をリーフレット - マーマークラスターとカスタムクラスターロジックで動作させようとしています。 iconCreateFunctionはどこに住んでいるのかわかりません。

私は$scope.markers[id] = {}ブロックに加えて、それを次のブロックに含めるように試みました。

var bingRoad = { bingRoad: { name: 'Bing Road', type: 'bing', key: bing_key, layerOptions: { type: 'Road', } } }; 
    var bingAerialWithLabels = { bingAerialWithLabels: { name: 'Bing Aerial With Labels', type: 'bing', key: bing_key, layerOptions: { type: 'AerialWithLabels', position: 'front' } } }; 
    var baselayers = { bingRoad: bingRoad.bingRoad, bingAerialWithLabels: bingAerialWithLabels.bingAerialWithLabels }; 

    angular.extend($scope, { 
    center: { 
     lat: someLat, 
     lng: someLong, 
     zoom: 7 
    }, 
    icons: local_icons, 
    markers: {}, 
    layers: { 
     baselayers: baselayers 
    } 
    }); 

私のコードのどのセクションがクラスタリングロジックを処理するのか分かりませんか？それらは正しくクラスタリングされますが、クラスタ内のデータに基づいてカスタムの色/クラスが必要です。何かご意見は？

Answer 1

あなたは

layerOptions: { 
         showCoverageOnHover: false, 
         disableClusteringAtZoom: 12, 
         iconCreateFunction: function (cluster) { 
          var className = ''; 
          _($scope.songs).forEach(function(song) { 
           switch (song.genre) { 
            case 3: 
             className = 'red'; 
             break; 
            case 2: 
             className = 'yellow'; 
             break; 
            default: 
             className = 'green'; 
             break; 
           } 
          }); 


          return new L.DivIcon({ 
           className: className, 
           iconSize: new L.Point(40, 40) 
          }); 
         } 
        } 

でそれを追加することができます