Скрыть маркер при уменьшении Angular с листовкой

Question

Я хотел бы скрыть маркеры при уменьшении масштаба. Я нажимаю, чтобы добавить маркер на мою карту, и если я увеличиваю, маркер не скрывается.

Если я смотрю в файле console.log, маркер не определен.

ngOnInit() {

  var map = L.map("map").setView([this.latitude, this.longitude], this.zoom);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  map.on('zoomend',function(e){
    console.log(map.getZoom());
    if (map.getZoom()>13) {
      if(this.saveLat !== undefined) {
        this.marker = L.marker([this.saveLat, this.saveLon], this.markerIcon).addTo(map);
      }
    }else {
      console.log(this.marker);
      if(this.marker !== undefined) {
        this.marker.remove();
      }
    }
  });

  map.on("click", e => {
      console.log(e.latlng); // get the coordinates
      if(this.marker !== undefined) {
        this.marker.remove()
        console.log(this.marker);
      }
      this.marker = L.marker([e.latlng.lat, e.latlng.lng], this.markerIcon).on('click', this.markerOnClick).addTo(map); // add the marker onclick
      console.log(this.marker);
      this.saveLat = e.latlng.lat;
      this.saveLon = e.latlng.lng;
      console.log(this.saveLat);
    });
}

Answer 1

Создайте layerGroup, добавьте маркеры в группу и следуйте по карте при каждом нажатии карты. При уменьшении масштаба удалите их с карты, вызвав метод clearLayers.

map;
layerGroup: L.LayerGroup = L.layerGroup();

ngOnInit() {
    this.map = L.map("map").setView([51.505, -0.09], 13);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    this.map.on("click", (e: any) => {
      const {
        latlng: { lat, lng }
      } = e;
      const marker = L.marker([lat, lng], { icon });
      this.layerGroup.addLayer(marker).addTo(this.map);
    });

    this.map.on("zoomend", (e: Event) => {
      // clear the markers here
      this.layerGroup.clearLayers();
    });
  }

Демо