Leaflet - перекрывающиеся маркеры при переключении события с переключателя - PullRequest
Новая
       61

Leaflet - перекрывающиеся маркеры при переключении события с переключателя

1 голос
/ 27 сентября 2019

В настоящее время я работаю над ионным 4-угловым проектом с листовкой для отображения прогноза погоды на карте. В то же время меняю событие в радиогруппе, чтобы изменить погоду на карте, например, ветер, дождь ... и т.д., у меня есть перекрывающиеся маркерыкарта .

gif image

enter image description here

Как очистить все маркеры при изменении данных для отображения новых данных?

Код 

 leafletMap() {
    // In setView add latLng and zoom
    this.map = new Map('mapId').setView([33, 44], 6);
    tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
      minZoom: 5,
      maxZoom: 6
    }).addTo(this.map);

    this.getData(event)

  } 

// markers 

  async getData(event) {
    console.log(event);

  if (event.detail.value="weather") {

  this.http.get("xxxxxxxx)
    .subscribe(data => {
      let f = data["vt1observation"]

        new L.Marker([this.cities.duhok.lat, this.cities.duhok.lng], {
          icon: new L.DivIcon({
            className: 'my-div-icon',
            html: `<div style="width: 45px";>
        <img src="assets/icon/${f.icon}.png"/ style="width:20px;">
        <span style="color:white">${f.temperature}C</span></div>`
          })
        }).addTo(this.map);

    })

    }  else if (event.detail.value="wind") {

  this.http.get("xxxxxxxx)
    .subscribe(data => {
      let f = data["vt1observation"]

        new L.Marker([this.cities.duhok.lat, this.cities.duhok.lng], {
          icon: new L.DivIcon({
            className: 'my-div-icon',
            html: `<div style="width: 45px";>
        <img src="assets/icon/${f.icon}.png"/ style="width:20px;">
        <span style="color:white">${f.wind}</span></div>`
          })
        }).addTo(this.map);

    })

HTML 

      <ion-item>
        <ion-label>forecast</ion-label>
        <ion-radio slot="start" value="weather" checked></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>wind</ion-label>
        <ion-radio slot="start" value="wind" ></ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>humd</ion-label>
        <ion-radio slot="start" value="h"></ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>rain</ion-label>
        <ion-radio slot="start" value="rain"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>

1 Ответ

1 голос
/ 27 сентября 2019

Вместо добавления всех маркеров непосредственно на карту, вы можете добавить маркеры в отдельный слой, добавить свои маркеры в layerGroup и добавить layerGroup на карту.Вы можете удалить маркеры, используя метод clearLayers (). 

var markers = L.layerGroup([marker1, marker2]).addTo(map);
markers.clearLayers();
...