如何用内部标记的颜色填充聚类的颜色？

Question

我正在尝试从群集内部的标记的颜色构建函数来填充群集图标的背景色。例如，如果一个群集具有7个绿色标记和2个红色标记，则以77％的绿色填充群集，否则以红色填充。

我正在同时使用markerCluster插件和出色的标记插件。

目前，这是我得到的：

var clusters = L.markerClusterGroup({
  spiderfyOnMaxZoom: false,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: true,
  iconCreateFunction: function (cluster) {
    var markers = cluster.getAllChildMarkers();
    console.log(markers);
    markers.forEach(function (m) {
      var color = m.defaultOptions.icon.options.markerColor;
      console.log(color);
    });
    var html =
      '<span class="circle circle-' + markers[0].feature.properties["Examen"] +
      '">' + markers.length + "</span>";
    return L.divIcon({ html: html, className: "marker-cluster", iconSize: L.point(32, 32) });
  },
});

我看到我可以得到每个簇内的标记数和相关的颜色，就像这样。

所以，我的问题是，如何从中遍历“颜色”以获取群集内每种颜色的百分比？

然后我的目标是使用此百分比来填充群集的背景色..以获得类似的内容？

[我看到了很多与此相关的示例，例如hereherehere here和here，但我想知道如果没有像这些示例中那样的大量复杂代码，我是否无法拥有类似的东西？

编辑：

好吧，感谢@IvanSanchez的帮助，我将提供的代码复制到了我的项目中。为了使其能够正常工作，我必须对其进行一些更改，然后尝试使用图标渐变和线性渐变。这是我最后的culsterGroup函数，并且显示了两个版本的完整示例here（图标css）和here（线性梯度）。很抱歉，我无法在此处发布它，因为此编辑器的代码太长了：)

实施后，我不得不写：

stops.push(color + ' ' + startPercent + '%');
stops.push(color + ' ' + endPercent + '%');

而不是

 stops.push(color[i] + ' ' + startPercent + '%');
 stops.push(color[i] + ' ' + endPercent + '%');

因为我只得到颜色的第一个字母，所以css无法正常工作。

此外，某些颜色的混合不再适用于此技术：例如，如果我使用红色和浅红色，则该簇从地图上消失了。

最后，我必须将html var中的跨度更改为div，因为标记-群集css默认情况下应用于div。

var clusters = L.markerClusterGroup({
        spiderfyOnMaxZoom: false,
        showCoverageOnHover: false,
        zoomToBoundsOnClick: true,

        iconCreateFunction: function (cluster) {
            var markers = cluster.getAllChildMarkers();
            var childCount = cluster.getChildCount();
            console.log(markers);
            var stops = [];

            for (let i=0, l=markers.length; i<l; i++) {
                var color = markers[i].defaultOptions.icon.options.markerColor;         
                let startPercent = 100 * (i/l);
                let endPercent = 100 * (i+1)/l;
                stops.push(color + ' ' + startPercent + '%');
                stops.push(color + ' ' + endPercent + '%');     
            }
            var html = '<div class="circleMarker" style="background: linear-gradient(to right,' + stops.join(',') + '" >' + markers.length + "</div>";
            return L.divIcon({ html: html, className: "marker-cluster", iconSize: L.point(40, 40) });

          },
    });

Answer 1

因为您已经明确提到了聚类标记的背景色，所以我建议您利用conic-gradient CSS function，这是CSS渐变的一种特殊类型。如conic-gradient中所述，使用具有重复光阑的渐变可以在这种渐变中创建清晰的边缘。

例如像...

MDN article about using CSS gradients

...看起来像：

<div style='width:50px; height:50px;
  background:  linear-gradient(to right, 
    lime 0%, lime 25%, 
    red 25%, red 50%,
    cyan 50%, cyan 75%, 
    yellow 75%, yellow 100% ); 
'></div>

还有类似...

...看起来像...

<div style='width:50px; height:50px;
  border-radius:25px;
  background:  conic-gradient(
    lime 0%, lime 40%, 
    red 40%, red 60%,
    cyan 60%, cyan 88%, 
    yellow 88%, yellow 100% ); 
'></div>

因此，假设您有一个表示CSS颜色的字符串数组，可以进行一些字符串操作，以将其转换为表示CSS函数的渐变字符串，例如：

...这将创建一个

let colours = ['red','red','red','purple','green','green'];

let stops = [];

for (let i=0, l=colours.length; i<l; i++) {
  let startPercent = 100 * (i/l);
  let endPercent = 100 * (i+1)/l;
  stops.push(colours[i] + ' ' + startPercent + '%');
  stops.push(colours[i] + ' ' + endPercent + '%');
}

let gradient = "conic-gradient(" + stops.join(',') + ")";

变量，其中包含类似...的字符串

gradient

...并且当应用于网页中的元素时，它将看起来像：

conic-gradient(red 0%,red 16.666666666666668%,red 16.666666666666664%,red 33.333333333333336%,red 33.33333333333333%,red 50%,purple 50%,purple 66.66666666666667%,green 66.66666666666666%,green 83.33333333333333%,green 83.33333333333334%,green 100%)

请参见。

---

您可能需要稍作调整，以使该技术适应您的代码，但我建议使用类似的东西：

working demo here

---

[请注意，在撰写本文时，

var stops = [];

for (let i=0, l=markers.length; i<l; i++) {
    var color = m.defaultOptions.icon.options.markerColor;
    let startPercent = 100 * (i/l);
    let endPercent = 100 * (i+1)/l;
    stops.push(colours[i] + ' ' + startPercent + '%');
    stops.push(colours[i] + ' ' + endPercent + '%');    
});
var html = '<span ' +
    'class="circle circle-' + markers[0].feature.properties["Examen"] + '" ' +
    'style="background: conic-gradient(' + stops.join(',') + '" ' +
>' + markers.length + "</span>";

不一致。因此，至少暂时不要使用此技术，如果您想让东西与使用Firefox的人一起使用。