angular - Mapbox に新しいマーカーを追加する前に前のマーカーを削除する

Question

GeoJson データを介してマップが読み込まれるときに、その場所にマーカーを表示するコードを以下に示します。それは完全に機能しており、新しいマーカーを追加するときに以前のマップマーカーを削除したい. 完全に機能するように変更を加える必要がある場所。

ここに完全な機能があります

prepareGeoJsonData(data) {
    let features = [];
    let counter = 0;

    for (let val of data) {
      features.push({
        type: "Feature",
        geometry: val.address.geometry.border,
        center: val.address.geometry.center,
        properties: {
          center: val.address.geometry.center.coordinates,
          landUnitId: val.memberOf.parcel[0]
        },
        id: counter++,
      });
      //
code for marker customization
//
        let marker = new mapboxgl.Marker(el)
          .setLngLat(cords)
          // .setPopup(popup)
          .addTo(this._mapRef);
        this.markers.push(marker);
      }
    };
    return {
      type: "FeatureCollection",
      features: features
    };
  }

現在の流れ:

ページの読み込み -> 地図の読み込み -> マーカーの表示 -> フィルターの適用 -> 新しいマーカーの追加 -> 以前のマーカーがまだ存在する

必要なフロー:

ページの読み込み -> 地図の読み込み -> マーカーの表示 -> フィルターの適用 -> 新しいマーカーの追加 -> 前のマーカーの非表示