javascript - 具有总和(未计数)的聚类传单标记总计 : how to get consistent round red shape and label format like in unclustered markers

Question

我想修改传单分组功能的行为以进行分组总计并保留取决于值的圆形红色气泡形状。

我的数据包含列:

经纬度 sales_ytd

我想使用 clusterOptions =markerClusterOptions(iconCreateFunction=JS(sum.formula)) 根据缩放情况对数据进行聚类

这是我的功能。我不懂 JS，但我尝试了很多例子，该函数通过对分组值求和来工作。

 sum.formula  = JS("function (cluster) {    
        var markers = cluster.getAllChildMarkers();
        var sum = 0; 
        for (i = 0; i < markers.length; i++) {
          sum += Number(markers[i].options.mag);
    //      sum += 1;
        }
          var size = sum/30000;

        return new L.DivIcon({ html:  sum ,  iconSize: L.point(size, size)});
      }")

显然 L.DivIcon() 返回一个正方形...有没有办法让它返回圆形红色气泡？

然后我尝试在一个 Shiny 的应用程序中使用它(R 代码)。

renderLeaflet({
  leaflet(df_summary_towns()) %>% 
  addTiles() %>%
  addCircleMarkers(
    radius = ~sales_ytd/30000,
    color = 'red',
    stroke = FALSE, 
    fillOpacity = 0.5,
    options = markerOptions(mag = ~ sales_ytd),
    clusterOptions = markerClusterOptions(iconCreateFunction=JS(sum.formula))
  ) %>% 
    addLabelOnlyMarkers(
      ~lon, ~lat, 
      options = markerOptions(mag = ~ sales_ytd),
      label =  ~scales::number(sales_ytd),
      labelOptions = labelOptions(noHide = T, direction = 'center', textOnly = T),
      clusterOptions = markerClusterOptions(iconCreateFunction=JS(sum.formula)))
})

分组在某种程度上有效，对聚类数据的值进行总计，如果我单击它们，传单会缩放并显示各个点(内部有值的漂亮红色圆圈)。但分组标记是白色方 block ，而不是像各个点那样的红色圆形。我也不知道如何实现数字的一致格式。在 R 中这很容易，但分组标记的定义现在在 JS 中。如何实现:取决于未分组和分组标记中的值以及一致的数字格式的一致的形状、颜色和大小？还可以看到我尝试在 R 中规范化大小，并在 JS 中划分 size/1000 - 我不知道如何将 data.frame 列的总和传递给 JS。

Answer 1

对于标记/层的总数，您可以使用 getLayers() 函数，它将返回该集群的所有组件层的数组。

var testCluster = L.markerClusterGroup();
L.marker([event.latlng.lat, 
event.latlng.lng]).addTo(testCluster);
testCluster.getLayers();

它将返回每个标记的数组作为图层。

或者您可以使用这个:

map.eachLayer(function (layer) {
        if (layer.getChildCount){     
            console.log(layer._childClusters.length)        
            console.log(layer._childCount);  
            }
    });