react-leafletを使用してレイヤーを追加または削除する方法

フェルナンドフェレイラ

2つの異なる反応コンポーネントをレンダリングしたいと思います。

  1. リーフレットマップ

  2. GeoJSONレイヤーを有効/無効にするチェックボックスのリストをレンダリングするサイドバーコンポーネント。

私はreact-leafletパッケージを使用しています。また、マップにレンダリングする可能性のあるすべてのレイヤーのリストを保持するために、リフラックスストアを使用しています。

onChangeイベントのチェックボックスを使用して、オンデマンドでレイヤーを追加するための最良のアプローチを知りたいです。ありがとう

Keegan Teetaert

チェックボックスイベントでは、ストアの「レイヤートグル」値を更新します。正しく設定されていると仮定すると、この値はページの更新をプッシュするはずです。したがって、ストアに保存されている「レイヤートグル」値に基づいて、条件付きでページをレンダリングするだけです。

さらに説明が必要な場合はお知らせください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Reactフックを使用してCookieまたはローカルストレージを追加する方法

分類Dev

geojsonレイヤー内で(小道具を介して)react-leafletポップアップを手動で制御する方法は?

分類Dev

react-arcgis npmによってarcgisマップにレイヤーを追加する方法は?

分類Dev

React-Nativeを使用してMapboxのShapeSourceおよびCircleレイヤーを使用して動的に取得されたGeoJSONを表示する方法

分類Dev

react-fontawesomeでレイヤーを使用する方法

分類Dev

Create React Appを使用してReactに画像(SVGまたはPNG)をインポートする方法

分類Dev

陸橋レイヤーコードをアップグレードして、react-leafletv2を使用します

分類Dev

react-leaflet:TopoJSONレイヤーの追加

分類Dev

React-Konvaでノードを複製して別々のレイヤーに追加する

分類Dev

Typescript、React、Webpackを使用してSCSSまたはCSSモジュールをインポートする方法

分類Dev

reactでopenlayerを使用してvertorレイヤーを表示できません

分類Dev

Reactを使用して100Kマルチプレイヤータイルゲームを作成する

分類Dev

Reactを使用してさまざまなレイアウトをレンダリングする方法は?

分類Dev

NPMまたはヤーン?React Nativeプロジェクトを開始してパッケージを管理する標準的な方法は何ですか?

分類Dev

react-leafletでレイヤーをホバーするとポップアップを表示する

分類Dev

Reactを使用してDBからデータを削除し、phpとmysqlを使用して作成したREST APIにアクセスする方法は?

分類Dev

reactで状態配列からアイテムを追加または削除する方法

分類Dev

React Routerを使用してページをリダイレクトする最良の方法は何ですか?

分類Dev

react-leafletのマーカーにバッジを追加する方法はありますか?

分類Dev

React-RouterでJavascriptを使用してページをリダイレクトする方法は?

分類Dev

React Leaflet:マーカーを動的に追加します

分類Dev

react-map-glを使用して地図上にpngと座標をオーバーレイする方法はありますか?

分類Dev

React-context.routerを使用してページをリダイレクトすることはできません

分類Dev

reactでaxiosを使用して単一のアイテムを削除する方法

分類Dev

React Native-React Nativeアプリでvimeoビデオプレーヤーを使用する方法はありますか?

分類Dev

react-leafletでOverlappingMarkerSpiderfierを使用してLeafletのFeatureGroupを使用するにはどうすればよいですか?

分類Dev

'テキストコンポーネントを削除する方法は、ReactKonvaでは現在サポートされていません。あなたのテキストは次のとおりです:react-konvaとreact-google-maps / apiを使用して "Loading ..." '?

分類Dev

バックエンドとして使用するためにreactサーバー側のレンダリングに高速ルートを追加する方法

分類Dev

React-Leaflet / React-Routing-Machine:ルートとウェイポイントを削除します

Related 関連記事

  1. 1

    Reactフックを使用してCookieまたはローカルストレージを追加する方法

  2. 2

    geojsonレイヤー内で(小道具を介して)react-leafletポップアップを手動で制御する方法は?

  3. 3

    react-arcgis npmによってarcgisマップにレイヤーを追加する方法は?

  4. 4

    React-Nativeを使用してMapboxのShapeSourceおよびCircleレイヤーを使用して動的に取得されたGeoJSONを表示する方法

  5. 5

    react-fontawesomeでレイヤーを使用する方法

  6. 6

    Create React Appを使用してReactに画像(SVGまたはPNG)をインポートする方法

  7. 7

    陸橋レイヤーコードをアップグレードして、react-leafletv2を使用します

  8. 8

    react-leaflet:TopoJSONレイヤーの追加

  9. 9

    React-Konvaでノードを複製して別々のレイヤーに追加する

  10. 10

    Typescript、React、Webpackを使用してSCSSまたはCSSモジュールをインポートする方法

  11. 11

    reactでopenlayerを使用してvertorレイヤーを表示できません

  12. 12

    Reactを使用して100Kマルチプレイヤータイルゲームを作成する

  13. 13

    Reactを使用してさまざまなレイアウトをレンダリングする方法は?

  14. 14

    NPMまたはヤーン?React Nativeプロジェクトを開始してパッケージを管理する標準的な方法は何ですか?

  15. 15

    react-leafletでレイヤーをホバーするとポップアップを表示する

  16. 16

    Reactを使用してDBからデータを削除し、phpとmysqlを使用して作成したREST APIにアクセスする方法は?

  17. 17

    reactで状態配列からアイテムを追加または削除する方法

  18. 18

    React Routerを使用してページをリダイレクトする最良の方法は何ですか?

  19. 19

    react-leafletのマーカーにバッジを追加する方法はありますか?

  20. 20

    React-RouterでJavascriptを使用してページをリダイレクトする方法は?

  21. 21

    React Leaflet:マーカーを動的に追加します

  22. 22

    react-map-glを使用して地図上にpngと座標をオーバーレイする方法はありますか?

  23. 23

    React-context.routerを使用してページをリダイレクトすることはできません

  24. 24

    reactでaxiosを使用して単一のアイテムを削除する方法

  25. 25

    React Native-React Nativeアプリでvimeoビデオプレーヤーを使用する方法はありますか?

  26. 26

    react-leafletでOverlappingMarkerSpiderfierを使用してLeafletのFeatureGroupを使用するにはどうすればよいですか?

  27. 27

    'テキストコンポーネントを削除する方法は、ReactKonvaでは現在サポートされていません。あなたのテキストは次のとおりです:react-konvaとreact-google-maps / apiを使用して "Loading ..." '?

  28. 28

    バックエンドとして使用するためにreactサーバー側のレンダリングに高速ルートを追加する方法

  29. 29

    React-Leaflet / React-Routing-Machine:ルートとウェイポイントを削除します

ホットタグ

アーカイブ