Включить / выключить все маркеры в нескольких группах по отдельности и все группы сразу на карте листовки?

Question

У меня есть три группы маркеров, и я хотел бы, чтобы они включались / выключались по отдельности, и все сразу. Я пытаюсь передать функцию из примера, но я не знаю, как сделать это правильно для моих групп маркеров. Буду благодарен за ответ. Пример: https://jsfiddle.net/qkvo7hav/7/ Моя карта: http://breamap.hostronavt.ru/

// Marker group
    var Group_1 = L.layerGroup(); 
    // Group_1 markers
    var Group_2 = L.layerGroup(); 
    // Group_2 markers
    var Group_3 = L.layerGroup(); 
    // Group_3 markers

    var Markers_overlays = {
        "1": Group_1,};
        "2": Group_2,};
        "3": Group_3,};

    // empty LayerGroup that will be used to emulate adding/removing all markers 
    var allPointsLG = L.layerGroup();
        Markers_overlays["All Points"] = allPointsLG;

    // control.layers
    var Markers_control_topright = L.control.layers(null, Markers_overlays, {collapsed: true, position: 'topright'}).addTo(map);        
        Markers_overlays["1"].addTo(map);
        Markers_overlays["2"].addTo(map);   
        Markers_overlays["3"].addTo(map);

    // adding/removing all markers method from https://jsfiddle.net/qkvo7hav/7/

Answer 1

Конечно, это не совсем так, как должно быть, но для хорошего старта этого должно быть достаточно;)

let citiesA = L.layerGroup();
let citiesB = L.layerGroup();
let test = L.layerGroup();

L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(citiesA),
  L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(citiesA),
  L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(citiesA),
  L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(citiesA);

L.marker([39.81, -105.09]).bindPopup('This is Littleton, CO.').addTo(citiesB),
  L.marker([39.64, -104.99]).bindPopup('This is Denver, CO.').addTo(citiesB),
  L.marker([39.63, -104.8]).bindPopup('This is Aurora, CO.').addTo(citiesB),
  L.marker([39.57, -105.23]).bindPopup('This is Golden, CO.').addTo(citiesB);


let mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';


let grayscale = L.tileLayer(mbUrl, {
    id: 'mapbox.light',
    attribution: mbAttr
  }),
  streets = L.tileLayer(mbUrl, {
    id: 'mapbox.streets',
    attribution: mbAttr
  });

let map = L.map('map', {
  center: [39.73, -104.99],
  zoom: 10,
  layers: [grayscale]
});

let baseLayers = {
  Grayscale: grayscale,
  Streets: streets
};

let overlays = {
  CitiesA: citiesA,
  CitiesB: citiesB,
  'All cities': test
};

overlays['All cities'].on('add', function() {
 setTimeout(function() {
  for (let overlay in overlays) {
    overlays[overlay].addTo(map);
  }
 }, 0);
});

overlays['All cities'].on('remove', function() {
 setTimeout(function() {
  for (let overlay in overlays) {
    map.removeLayer(overlays[overlay]);
  }
 }, 0);
});

let control = L.control.layers(baseLayers, overlays).addTo(map);

html,
body {
  height: 100%;
  margin: 0;
}

#map {
  width: 600px;
  height: 400px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>

<div id='map'></div>