javascript - 使用angular-leaflet-directive时如何自定义markercluster图标

Question

Leaflet 文档概述了一种使用 iconCreateFunction 指定 MarkerClusterGroup 的方法，您可以在其中自定义集群图标的外观。我想知道是否有通过 angular-leaflet-directive 公开的东西也允许这样做，或者是否有一种方法可以在使用指令时深入到较低级别的 Leaflet API 来执行此操作。基本上，我只是想改变颜色改变的值而不是 10 和 100，我也想改变不同值的图标直径。类似于 Google MarkerClusterer。

谢谢

Answer 1

在您指定标记集群的叠加层中，您可以添加选项。像这样的东西:

layerOptions: {
                            showCoverageOnHover: false,
                            disableClusteringAtZoom: 12,
                            iconCreateFunction: function (cluster) {
                                    var childCount = cluster.getChildCount();

                                    var c = ' marker-cluster-';
                                    if (childCount < 10) {
                                        c += 'small';
                                    } else if (childCount < 100) {
                                        c += 'medium';
                                    } else {
                                        c += 'large';
                                    }

                                    return new L.DivIcon({ html: '<div><span>' + "CUSTOM" + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
                                }
                        }