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

그러면 개발에 필요한 모든 것이 포함된 도커 컨테이너가 시작됩니다.

간단히 Yarn을 사용하여 종속성을 설치한 다음 create-react-app을 사용하여 개발 서버를 시작하세요.

 yarn install
yarn start

사이트를 보려면 컴퓨터의 브라우저에서 http://localhost:3000/으로 이동하세요.

자세한 내용은 https://github.com/facebook/create-react-app을 확인하세요.