过滤点总和并在“图层控制”传单中显示结果

Question

我有一个GeoJSON文件，它具有成千上万个点，可以对其进行过滤和样式化，然后输出到多个图层组。

我正在寻找一种汇总每个图层组过滤点的数量，然后在图层控件中将其与命名图层一起显示的方法，例如：

  

加油站（共47个）

这是我用于点层的代码。

如何在“图层控制”中使用图层名称以及在括号内显示此图层已过滤点总和的方法来实现这一点？

var prod_points = new L.layerGroup();
var hub1 = new L.layerGroup();
var hub2 = new L.layerGroup();
var dip1 = new L.layerGroup();
var bok1 = new L.layerGroup();

$.getJSON("../data/places.geojson", function(json) {

  // base Circle object
  // predefine all the others
  function prodCircle(fillColor) {
    this.fillColor = fillColor
    this.radius = 5
    this.fill = true
    this.color = "#000000"
    this.weight = 0.5
    this.opacity = 1
    this.fillOpacity = 1
  }

  // Now you can make all your circles easily
  // and they can be referenced with prodCirkel[0],
  // prodCirkel[1], etc...
  let prodCirkels = [
    new prodCirkel('#000000'), //0 Black
    new prodCirkel('#808080'), //1 Gray
    new prodCirkel('#cc0099'), //2 Wine-red
    new prodCirkel('#0000cc'), //3 Blue
    new prodCirkel('#ffffff'), //4 White
    new prodCirkel('#0000ff') //5 Blue

  ]


  const colors = {
    HUB_01: '#ffffff', //White
    HUB_02: '#ff9900', //Orange
    DIP_01: '#ffffff', //White
    BOK_01: '#ffffff', //White
  }
  const weights = {
    HUB_01: 4,
    HUB_02: 3,
    DIP_01: 3,
    BOK_01: 2
  }
  const radius = {
    HUB_01: 16,
    HUB_02: 12,
    DIP_01: 12,
    BOK_01: 8
  }
  const fillOpacity = {
    HUB_01: 0.4,
    HUB_02: 0.4,
  }

  geoLayer = L.geoJson(json, {
    //onEachFeature: function(feature, layer) {

    pointToLayer: function(feature, latlng) {
      var id = feature.properties.KonceptID;

      var prod;

      // forEach will loop through all the cirkels and perform a function
      prodCirkels.forEach(cirk => cirk.color = colors[id] || "#000000")
      prodCirkels.forEach(w => w.weight = weights[id] || 0.5)
      prodCirkels.forEach(r => r.radius = radius[id] || 5)
      prodCirkels.forEach(f => f.fillOpacity = fillOpacity[id] || 1)
      //console.log("colors: ", prodCirkels[1].color, prodCirkels[2].color)

      // Filtrering
      if (id === 'HUB_01' || id === 'HUB_02') {
        prod = new L.circleMarker(latlng, prodCirkels[0]).addTo(hub1);
      } else if (id === 'DIP_01') {
        prod = new L.circleMarker(latlng, prodCirkels[2]).addTo(dip1);
      } else if (id === 'BOK_01') {
        prod = new L.circleMarker(latlng, prodCirkels[3]).addTo(bok1);
      } else {
        prod = null
      }
      return prod;
    },


    onEachFeature: function(feature, layer) {
      var popupText = "Places: " + '<b>' + feature.properties.koncept + '</b>' +
        "<br>Name: " + '<b>' + feature.properties.Name + '</b>' +
        "<br>Address: " + '<b>' + feature.properties.Address + '</b>, ' + '<b>' + feature.properties.ZipCode + '</b>, ' + '<b>' + feature.properties.City + '</b>' +
        "<br>Date: " + '<b>' + feature.properties.Date + '</b>';
      /* "<br><a href='" + feature.properties.dip + "'>More info</a>";*/

      layer.bindPopup(popupText, {
        closeButton: true,
        offset: L.point(0, -20)
      });
      layer.on('click', function() {
        layer.openPopup();
      });
    },
  }).addTo(prod_points);
});