fallout new vegas interactive map

Fallout: New Vegas - インタラクティブマップ

https://srt4rulez.github.io/fallout-new-vegas-interactive-map

Fallout: New Vegas のモハーベ荒野のインタラクティブなマップ。

特徴

• すべてのスキルブックとスノードームが含まれています。
• 進行状況を追跡するために、項目を検出済みとしてマークします。進行状況はブラウザに保存されます。
• 各項目タイプは色分けされているため、簡単に識別できます。
• 見つかったアイテムの表示を切り替えます。
• 単一の項目タイプの表示/非表示を切り替えます。
• 各アイテムには、詳細については https://fallout.fandom.com/ の記事への対応するリンクがあります。

その他のインタラクティブマップ

• ゲームマップスカウト

どのように機能するのでしょうか?

Leaflet というライブラリを使用して、Google マップに似たインタラクティブな地図を作成します。現実世界の地図の代わりに、モハーベ荒野の画像を読み込みます。これにより、地図のズーム、パン、操作が可能になります。また、クリックするとカスタム コンテンツを含むポップアップを開く「マーカー」を追加することもできます。

すべてのマーカーは markers.json に保存されます。各マーカーには、ID、タイプ、サブタイプ (オプション)、タイトル、説明、URL (オプション)、画像 (オプション)、緯度と経度の値があります。

マーカーを「見つかった」に設定すると、ブラウザーのローカル ストレージと呼ばれるものが更新されます。これはブラウザに保存され、更新しても存続できるデータです。それはドメインに固有のものです。これにより、外部データベースに保存することなく、進行状況を保存できるようになります。ただし、進行状況は現在のブラウザにのみ保存されます。別のブラウザでアプリケーションにアクセスすると、以前のデータは表示されません。

緯度と経度のデバッグ

ブラウザで開発者ツールを開き (通常は F12)、コンソール タブに移動し、「window.debug = true」と入力して Enter キーを押してデバッグ モードを有効にします。地図をクリックすると、緯度と経度がコンソールに記録されます。

発達

このリポジトリで作業するには、Docker をインストールし、プロジェクト ルートで次のコマンドを実行します。

 ./run-docker-development.sh

これにより、開発に必要なものがすべて含まれた Docker コンテナが起動します。

Yarn で依存関係をインストールし、create-react-app で開発サーバーを起動するだけです。

 yarn install
yarn start

マシンのブラウザで http://localhost:3000/ に移動して、サイトを表示します。

詳細については、https://github.com/facebook/create-react-app をチェックしてください。