https://srt4rulez.github.io/fallout-new-vegas-interactive-map
خريطة تفاعلية لأرض Mojave Wasteland في Fallout: New Vegas.
نستخدم مكتبة تسمى Leaflet لإنشاء خريطة تفاعلية، تشبه خرائط Google. بدلاً من خريطة العالم الحقيقي، قمنا بتحميل صورة لأرض موهافي القاحلة. يتيح لنا ذلك تكبير الخريطة وتحريكها والتفاعل معها. كما يسمح لنا بإضافة "علامات" تفتح عند النقر عليها نوافذ منبثقة تحتوي على محتوى مخصص.
يتم تخزين كافة العلامات في Markers.json. تحتوي كل علامة على معرف ونوع ونوع فرعي (اختياري) وعنوان ووصف وعنوان url (اختياري) وصورة (اختياري) وقيم خطوط الطول والعرض.
عند تعيين العلامة على أنها "تم العثور عليها"، نقوم بتحديث شيء يسمى التخزين المحلي في المتصفح. هذه هي البيانات التي يتم حفظها في المتصفح ويمكن تحديثها. انها خاصة بالمجال. يتيح لنا ذلك حفظ تقدمك دون الحاجة إلى تخزينه في قاعدة بيانات خارجية. يتم حفظ تقدمك فقط في متصفحك الحالي. إذا قمت بزيارة التطبيق على متصفح آخر، فلن ترى بياناتك السابقة.
افتح أدوات المطور في متصفحك (عادةً F12)، وانتقل إلى علامة التبويب "وحدة التحكم"، واكتب "window.debug = true" ثم اضغط على "إدخال" لتمكين وضع التصحيح. سيؤدي النقر على الخريطة الآن إلى تسجيل خط الطول وخط العرض إلى وحدة التحكم.
للعمل على هذا المستودع، قم بتثبيت Docker، ثم قم بتشغيل الأمر التالي في جذر المشروع:
./run-docker-development.sh
سيؤدي هذا إلى بدء تشغيل حاوية إرساء تحتوي على كل ما نحتاج إلى تطويره.
ما عليك سوى تثبيت التبعيات باستخدام الغزل، ثم بدء تشغيل خادم التطوير باستخدام تطبيق create-react-app:
yarn install
yarn start
انتقل إلى http://localhost:3000/ في متصفحك على جهازك لعرض الموقع.
الخروج https://github.com/facebook/create-react-app لمزيد من المعلومات.