在 Angular 和 leaflet 中隱藏縮小標記

Question

我想在縮小時隱藏標記。 我單擊以在我的 map 上添加一個標記，如果我縮放，該標記不會被隱藏。

如果我查看 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 ，在組上添加標記，然后在每次 map 單擊時在 map 上添加標記。 當您縮小時，通過調用clearLayers方法將它們從 map 中移除。

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

演示