fallout new vegas interactive map
v2.0.1
https://srt4rulez.github.io/fallout-new-vegas-interactive-map
แผนที่แบบโต้ตอบของ Mojave Wasteland ใน Fallout: New Vegas
เราใช้ห้องสมุดชื่อ Leaflet เพื่อสร้างแผนที่เชิงโต้ตอบ คล้ายกับ Google Maps แทนที่จะเป็นแผนที่โลกแห่งความเป็นจริง เราโหลดรูปภาพของ Mojave Wasteland ขึ้นมา ซึ่งช่วยให้เราสามารถซูม แพน และโต้ตอบกับแผนที่ได้ นอกจากนี้ยังช่วยให้เราเพิ่ม "เครื่องหมาย" ซึ่งเมื่อคลิกแล้วจะเปิดป๊อปอัปพร้อมเนื้อหาที่กำหนดเอง
เครื่องหมายทั้งหมดจะถูกเก็บไว้ใน markers.json เครื่องหมายแต่ละตัวจะมี ID, ประเภท, ประเภทย่อย (ไม่บังคับ), ชื่อ, คำอธิบาย, URL (ไม่บังคับ), รูปภาพ (ไม่บังคับ) และค่าละติจูดและลองจิจูด
เมื่อตั้งค่าเครื่องหมายเป็น "พบ" เราจะอัปเดตสิ่งที่เรียกว่า Local Storage ในเบราว์เซอร์ นี่คือข้อมูลที่บันทึกไว้ในเบราว์เซอร์และสามารถรีเฟรชได้ เป็นโดเมนเฉพาะ สิ่งนี้ช่วยให้เราสามารถบันทึกความคืบหน้าของคุณได้โดยไม่ต้องจัดเก็บไว้ในฐานข้อมูลภายนอก ความคืบหน้าของคุณจะถูกบันทึกไว้ในเบราว์เซอร์ปัจจุบันของคุณเท่านั้น หากคุณเยี่ยมชมแอปพลิเคชันบนเบราว์เซอร์อื่น คุณจะไม่เห็นข้อมูลก่อนหน้าของคุณ
เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์ของคุณ (โดยปกติคือ F12) ไปที่แท็บคอนโซล แล้วพิมพ์ "window.debug = true" แล้วกด Enter เพื่อเปิดใช้งานโหมดแก้ไขข้อบกพร่อง การคลิกบนแผนที่จะบันทึกละติจูดและลองจิจูดลงในคอนโซล
หากต้องการทำงานกับที่เก็บนี้ ให้ติดตั้ง Docker จากนั้นรันคำสั่งต่อไปนี้ในรูทโปรเจ็กต์:
./run-docker-development.sh
นี่จะเป็นการเริ่มคอนเทนเนอร์นักเทียบท่าที่มีทุกสิ่งที่เราต้องพัฒนา
เพียงติดตั้งการพึ่งพาด้วยเส้นด้าย จากนั้นเริ่มเซิร์ฟเวอร์การพัฒนาด้วย create-react-app:
yarn install
yarn start
ไปที่ http://localhost:3000/ ในเบราว์เซอร์บนเครื่องของคุณเพื่อดูไซต์
ชำระเงิน https://github.com/facebook/create-react-app สำหรับข้อมูลเพิ่มเติม
