問題タブ [react-leaflet]

https接続でreact-leafletを使用することは可能ですか?

HTTP プロトコルと HTTPS プロトコルを切り替えることができないようで、警告が表示されます。

混合コンテンツ: 「https://localhost/map」のページが HTTPS 経由で読み込まれましたが、安全でない画像「http://b.tile.osm.org/10/510/340.png」が要求されました。このコンテンツは、HTTPS 経由でも提供する必要があります。

誰かが回避策を知っているかもしれません。

react-leaflet（バージョン1.0.0-rc.2で）使ってみましcreate-react-appたが、マーカー画像が404になっています。

生成された画像 src はhttp://{server_host}:3000/static/media/marker-icon.2273e3d8.png")marker-icon.png

変な を取り除けば")marker-icon.png、イメージは良いです。

影の画像でも同じ問題が発生しましたが、「実際の」画像 src を推測できませんでした。

ここでバグを再現し、ここでコードを確認できます

ありがとう

react-leaflet地図を表示するために使用しようとしています。私は動作しているこのフィドルのコードを使用していますが、私のコンピューターではこの出力があります

これが私のコードです:

DeviceMap.js

DeviceTabs.js

スタイル.scss

コンソールにエラーは表示されず、どこを検索すればよいかわかりません。フィドルは機能しているので、バグではありません。私は何か見落としてますか ？

私は反応リーフレットを使用していますが、これまでのところマップは正常に表示されています。<GeoJson>ポリゴンのオーバーレイにも成功しました。

現在、中心とズームの値をハードコーディングしていますが、GeoJSON ポリゴン全体が表示されるようにデフォルトのズームを設定したいと考えています。ウェブで見つけたドキュメント/回答に苦労しています（私は初心者/中級のJSです）。

ここに私のコンポーネントがあります:

アップデート：

React 開発ツールを使用するときは、<MapHolder>コンポーネントを選択し、コンソールに切り替えて実行します

$r.refs.foo.leafletElement.fitBounds($r.refs.geojson.leafletElement.getBounds());

すべてが期待どおりに機能します。ただし、私のコードでは

this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds());

戻り値Uncaught TypeError: Cannot read property 'leafletElement' of undefined

私はとても近いです！私は何が欠けていますか？

React プロジェクトで Leaflet を使用しようとしています。私の目標は、実際には非常に基本的なものです。openstreetMap レイヤーを表示するだけです (マーカーなどなし)。

これが私のコードです：

マップを表示する保存の問題が発生するたびに、次のようになります: (すべてのタイルが表示されるわけではなく、それらは重ね合わせの問題です): スクリーンショット

誰かがこの問題に直面していますか、または解決策がありますか?

ご協力ありがとうございました

overpassturbo-eu から抽出した 2 つの大きな json/geojson ファイルがあります。

OSM でこのデータ セットをレイヤーとしてプロット/追加しようとしています。

さまざまなズーム レベルでデータ セットをフィルター処理する必要があります。

これらのファイルは大きすぎるため、クライアント側でデータ セットを分析するためにファイル全体を効率的にダウンロードすることはできません。

これらのデータセットをサーバー側でフィルタリングする効率的な方法はありますか?

Overpass API でそれらの境界を検索できるように、現在のマップの境界を取得したいと考えています。

リーフレットの場合、メソッドが map.getBounds() であることはわかっていますが、react-leaflet でそれを実装する方法がわかりません。

これは私が試したものです。this.refs.map.getBounds関数ではないというエラーが表示されます。

このプラグインを選択したのは、マップ ポリライン上のマーカーをアニメーション化する最良の方法と思われるためです。

npm にないのでmodule.exports = L.animatedMarker、リポジトリから AnimatedMarker.js に追加して必要にしました。

App.js

AnimatedMarkerElement.js

エラーは次のとおりです。

プラグインは、react 要素内に埋め込まれているために見つからないマップを探していると思います。