Сумма отфильтрованных точек и результат в Layer Control Leaflet - PullRequest
Новая
       6

Сумма отфильтрованных точек и результат в Layer Control Leaflet

0 голосов
/ 16 сентября 2018

У меня есть файл GeoJSON с тысячами точек, которые я отфильтрую и стилизую, а затем выведу в несколько групп слоев.

Мне нужен способ суммировать количество точек, отфильтрованных для каждой группы слоев, и затем показать это вместе с именованным слоем в элементе управления слоями, например:

АЗС (всего. 47)

Это код, который я использую для точечного слоя.

Как реализовать это в Layers Control с именем слоя и в скобках, показывающих сумму точек, отфильтрованных для этого слоя? 

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);
});
...