ボタンクリック時にポリラインを追加

Question

私はマップにポリラインを追加したいが、ボタンをクリックしてレンダリングすることはできない。私が現在持っているコードは以下の通りです：

<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> 

ありがとう、

Answer 1

反応リーフレットのコンテキスト外でマップの状態を管理しようとしているようです。 react-leafletパッケージを使用しているのか、リーフレットを持っている自分の反応するWebサイトをロールしてみても分かりません。

実際にreact-leafletを使用している場合は、コンポーネントの状態でレンダリングするポリラインのリスト、または親コンポーネントによって更新されて送信されるプロパティのリストを維持する必要があります。レンダリング機能では、これらのポリラインを繰り返して、それぞれを反応チラシポリラインとしてレンダリングします。

このような何か：

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

また、ポイントはマップ上でクリックされた後にマーカーを追加して同様の反応 - リーフレットアプリケーションの例over hereを参照してください。