2016-03-24 179 views
0

我試圖讓此應用的角度傳單映射與Leaflet-markercluster和自定義羣集邏輯配合使用。我無法弄清楚iconCreateFunction應該在哪裏生活。帶Markercluster自定義圖標樣式的角度傳單

我試過把它包含在$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 
    } 
    }); 

我找不出我的代碼段處理羣集邏輯?它們正確地羣集,但我想要基於羣集內的數據的自定義顏色/類。有什麼想法嗎?

回答

0

您可以在

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) 
          }); 
         } 
        } 
添加它