Add Polylinie auf Knopf klicken

Question

Ich möchte eine Polylinie zu meiner Karte hinzufügen, aber es scheint nicht zu bekommen, es auf Knopfdruck zu rendern. Hier ist der Code, den ich derzeit haben:

<button onClick={ 
        function(){ 
         console.log(asset.past); 
         var pathLine = new L.Polyline(asset.past, { 
         color: 'red', 
         weight: 3, 
         opacity: 0.5, 
         smoothFactor: 1 
         } 
        ); 
        leafletMap.addLayer(pathLine);} 
        } 
        className="btn btn-info eachBtn">Go</button> 

Danke, Ed.

Answer 1

Es scheint, dass Sie versuchen, den Kartenstatus außerhalb des Kontexts des Reaktionsblatts zu verwalten. Ich bin nicht einmal sicher, ob Sie das react-leaflet-Paket verwenden oder versuchen, Ihre eigene Reagieren-Website zu rollen, die zufällig eine Broschüre hat.

Wenn Sie tatsächlich react-leaflet verwenden, sollten Sie eine Liste von Polylinien pflegen, die Sie im Status der Komponente rendern möchten, oder eine Eigenschaft, die von einer übergeordneten Komponente aktualisiert und gesendet wird. Dann würden Sie in Ihrer Renderfunktion über diese Polylinien iterieren und jede davon als Polygonzüge reaktivieren.

Etwas wie folgt aus:

render() { 
    return (
    <Map 
     center={[51.505, -0.09]} 
     zoom={13} 
     > 
     <TileLayer 
     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
     /> 
     {this.state.polylines.map((positions, idx) => 
     <Polyline key={`polyline-${idx}`} positions={positions} /> 
    )} 
    </Map> 
); 
} 

Auch finden Sie im Beispiel over here eines ähnlichen reagieren-Faltblatt-Anwendung, die Marker fügt nach Punkten auf der Karte angeklickt werden.