Leaflet-Fehler: ClearLayers ist keine Funktion

Question

Ich verwende eine Leaflet-Offline-Map mit React, wo ich manuell eine countries.js GeoJSON-Datei mit jedem Land der Welt lade. Ich färbe dann jedes Land abhängig von Daten, die von this.props.data empfangen werden, die anfänglich funktioniert.

Jedoch kommt die Frage aus, die Farben zu aktualisieren, wenn neue this.props.data in kommt

Ich habe versucht, es in diesen beiden Komponenten zu verwalten:.

componentWillReceiveProps(nextProps) { 
    if(this.props.data) { 
     let map = this.map; 
     console.log(map); // It shows the leaflet object! 
     console.log(nextProps.data); // It's logged 
     console.log(this.props.data); // Also logged 
     if (nextProps.data !== this.props.data) { 
      map.clearLayers(); // Error comes here? 
      console.log("New data doesn't match old!"); // This logs correctly 
     } 
    } 
}, 

componentDidUpdate(prevProps, prevState) { 
    if(this.props.data){ 
     let map = this.map; 
     if (prevProps.data !== this.props.data) { 
      L.geoJson(this.countries, { // from import 
      }).addTo(map); 
     } 
    } 
}, 

Was mache ich falsch? Die Bedingung ist erfüllt, wenn die alten Daten nicht mit den neuen übereinstimmen, sollte die Karte alle Schichten mit clearLayers(); löschen. Ich könnte diesen Fehler verstehen, wenn die Karte nicht gefunden werden konnte; aber ich greife darauf mit this.map, so scheint es nicht ein Problem zu sein.

Answer 1

clearLayers() ist a method of L.LayerGroup, nicht eine Methode von L.Map.

Speichern Sie die Instanz L.GeoJson, die Sie erstellen, wenn L.geoJson(...) ausgeführt wird, und implementieren Sie feinere Kontrolle darüber, wann es aus der Karte hinzugefügt/entfernt wird.