带有 Markercluster 自定义图标样式的 Angular-Leaflet

Question

我正在尝试让这个应用程序的 angular-leaflet 地图与 Leaflet-markercluster 和自定义集群逻辑一起使用。我不知道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)
                            });
                        }
                    }