問題タブ [react-leaflet]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

1029 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
5062 参照

javascript - 反応リーフレットを使用して、マーカー内に動的 JSX 要素を実装する

私は、react-leafletを介してLeafletを使用している React アプリを持っています。どちらも非常に便利なライブラリです。

このアプリには、次のようにレンダリングする必要がある座標のグループがあります。

  1. ズームアウトすると、次のように座標をマーカー クラスターにクラスター化します。 ここに画像の説明を入力

  2. ズームインすると、各マーカーには

    1. その下の動的カウントダウンタイマー
    2. その周りの動的な SVG カウントダウン時計 ここに画像の説明を入力

クラスタリングには、静的コンテンツの表示に最適なreact-leaflet-markerclusterプラグインを使用しています。

しかし、各マーカー内に動的コンテンツを表示する必要がある場合、 を送信するオプションはありません。ここでJSX利用可能な例からわかるように、静的 HTML の準備しかありません。

この状況を処理する方法はありますか? 静的 HTML マーカーの代わりに JSX マーカーを作成するにはどうすればよいですか?

PS：私はReactDOM.renderToStringすでに使ってみましたが、それは醜いハックであり、毎回マーカーを再レンダリングする必要があります.

ティア!!

解決策を考えている場合に試してみるためのWebpackBinのサンプルを次に示します。

0 投票する
1 に答える
1318 参照

javascript - GeoJSON のカスタム リーフレット レンダラー

デフォルトで Leaflet が提供するものとは異なる方法で GeoJSON をレンダリングしたいと考えています。残念ながら、style()作成中のベクター グラフィックスをより詳細に制御する必要があるため、関数を変更するだけでは不十分です。

これを行う慣用的な方法は何ですか？にあるデフォルトの SVG レンダラーの多くの部分を再利用できると思いますsrc/layers/vector/SVG.js。ただし、1 つの GeoJSON レイヤー / 1 つの FeatureGroup に対してのみ置き換えたいと思います。これらはいずれも から継承されPathていないため、これは不可能と思われます。

SVG クラスを非常に基本的な方法で拡張してみました。

リーフレットの初期化中にレンダラーとして設定しますが、これは a で失敗しますTypeError: max2 is undefined(これは、私が を使用したことに起因する未処理のプロミス拒否ですreact-leaflet)。

私が見逃しているのは何ですか？


12345678910