問題タブ [react-leaflet]

私は反応リーフレットを使用しており、市場を出現させることができます。は機能していません。

サンプルコードをコピーしただけです。他のパッケージと競合する可能性はありますか? または、これを機能させるには、特定のバージョンのリーフレット、反応、および反応 dom が必要ですか?

地図上でマウスオーバーしてもカーソルが変化しません。

マップとマーカーが正しくレンダリングされるように、正しい css があることを確認しました。

どんな助けでも大歓迎です。私はこれにかなり慣れていないので、ばかげたエラーである可能性があります。

プロジェクトで React-Leaflet と (callemall)Material-UI を使用しています。<Popup></Popup>React-Leaflet のコンポーネント内で Material-UI Card コンポーネントをレンダリングしようとしています。コンポーネントとしてポップアップにプルしようとしましたが、ポップアップではコンポーネントが正常に機能しません。具体的には、カード コンポーネントにはそれを展開するボタン要素がありますが、残念ながら、ポップアップでクリックできません。オーバーライドする必要がある CSS-y がいくつかあると確信していますが、ポップアップ コンポーネントを独自のコンポーネントに置き換えるだけの簡単なオプションがあると思いますが、どうすればよいかわかりません。どんな洞察も大歓迎です:)

私のコードは次のようになります。

インポートされたコンポーネントは次のようになります: (読みやすくするために、スタイルと重要でない詳細を削除しました)

Leaflet の Choropleth チュートリアル
http://leafletjs.com/examples/choropleth.htmlに従い 、react-leaflet を使用しています。元のソース コードを変更せずに setStyle に成功し、動作しました。

レイヤーには setStyle プロパティがあります。今私が問題を抱えているresetStyleに。

でアクセスしてみました

resetHighlight(e) { this.refs.geojson.resetStyle(e.target); }

GeoJsonを持ちながら

ただし、resetStyleプロパティはありません

誰でも react-leaflet でスタイルをリセットする別の方法を提案できますか?

マップが読み込まれたときに開いているマップ上に複数のポップアップを表示したいのですが、この回答の例は1つのポップアップで機能しています:

マーカーでポップアップを常に開く

しかし、私が複数のポップアップを持っている場合、ロード時に1つだけが開いていて、1つを開くともう1つが閉じます.しかし、react-leaflet でそれを再現する方法がわかりません:

https://jsfiddle.net/37uo2cp5/

MarkerClusterコンテキスト初期化からリーフレットマップを使用して再利用可能なコンポーネントを作成し、ネストされたマップコンポーネントを更新したいと思います。MyMapから動的アクションを実行するためにコンポーネントに直接埋め込む必要はありませんreact-routerが、ネストされたマーカーMarkerClusterがshouldComponentUpdate === false更新されない場合。この問題はissueに関連している可能性があることがわかりましたが、私の場合、これを回避する方法が見つかりませんでした。shouldComponentUpdate を true に設定するだけでなく、より良い解決策があると今でも信じています。私の 2 つの例の動作の違いを説明していただけますか? それともMarkerCluster、React の方法でコンテキストなしで再利用可能なコンポーネントを構築する方が良い解決策でしょうか?

デモ：

以下の例が機能し、上記の例が機能しないのはなぜですか?

はreact-leaflet-marker-layer、マップを拡大/縮小しても更新されません。

マップ コンテンツのズーム レベルが変更されても、同じままです。

これは、マウス スクロールと +/- ボタンを使用したズーム中に発生します。

注: これは関連している可能性があります。マップのレンダリングが非常に遅く、一部のタイルの読み込みに非常に時間がかかることに気付きました。ズームイン/アウトすると、それらを即座にロードできます。