反応チラシ層を動的に追加する

Question

私はリアクションリーフレットを使い始めています。私のアプリケーションでは、ユーザーがGeoJSONを返すレストサービスをリクエストするフォームを入力します。私の地図上の新しいレイヤー。私の質問：リアクションリーフレットでレイヤーを動的に追加する方法を実装するにはどうすればよいですか？

ありがとうございます。

Answer 1

私にも同様の問題があります。私は、マーカーレイヤを動的にクリアして作成したいと考えています。私はあなたが実際のマップビューへの参照を得ることによってそれを行うことができると思います。

<Map ref={Map => this.map = Map}>

後であなたに、通常のリーフレット機能でthis.mapを使用することができます。その他のオプションは、私はマーカーを作成JSX同じようにレイヤーを作成することができること：

{this.props.markers.map((i,index) => { return ( <Marker key={i} position={i}> <Popup> <span>Great marker!</span> </Popup> </Marker>); })}

Answer 2

最善のアプローチは、反応し、リーフレットのためにGeoJSONレイヤーのラッパーを作成することです。反応チラシのplugins sectionで利用可能なクラスタリングを備えたGeoJSONレイヤの同様の実装があります。 次に、このレイヤーをマップコンポーネントに追加し、必要に応じてデータを変更する必要があります。したがって、レイヤーを動的に追加する必要はなく、動的にデータを変更する必要はありません。 リーフレットのGeoJSONの例をチェックして、アイデアをhttp://leafletjs.com/examples/geojson/にしてください。

データが変更されているレイヤーが1つある場合は、このアプローチが有効です。しかし、データセットが異なる場合は、それぞれにGeoJSONレイヤーを追加する必要があります。

<Map ...> 
{this.props.datasets.map((ds, ix) => { 
    return (<GeoJSONOverlay data={ds} key={ix} />); 
})} 
</Map>