[Project] 야숨 지도. 지도 생성하기 w. Leaflet

어떻게 지도를 그려야 할 지 몰라서 objmap.zeldamods.org 사이트의 깃허브를 클론하고 뜯어보면서 방법을 찾아야겠다.

이 사이트는 Leaflet이라는 라이브러리를 사용해서 지도를 보여주고 있다.

나도 Leaflet을 설치해보자.

npm i leaflet react-leaflet
npm i -D @types/leaflet

 

zeldamaps는 lmap이라는 id를 가진 div에 지도를 생성하고 있다.

// AppMap.ts
...
mounted() {
	this.map = new MapBase('lmap');
    ...
}
...

// MapBase.ts
...
constructor(element: string) {
	this.constructMap(element);
    this.initBaseMap();
}

private constructMap(element: string) {}
private initBaseMap() {
	// 지도 타일을 가져와서 보여줌.
}
...

지도 타일 asset을 다운로드해서 public 폴더 안에 /z/x/y 형식의 폴더 안에 넣어야 한다.

z: zoom

x: 열 번호

y: 행 번호

 

asset을 다운로드해서 이런식으로 코딩을 해서 실행을 시키면

const Hyrule = () => {
	return (
    	<MapContainer zoom={3} minZoom={2} maxZoom={7} center={[0, 0]} className="h-dvh">
        	<TileLayer url={`${process.env.NEXT_PUBLIC_HOST}/hyrule/tile/{z}/{x}/{y}.webp`}/>
        </MapContainer>
    )
}

이런 화면이 나온다.

 

이제 모든 asset을 다운로드하면 야생의 숨결 지도가 나온다.

 

Todo

1. 지도를 옆으로 넘기면 새로운 지도가 계속 나타나는 오류 수정

2. 처음 로드 시 내가 원하는 위치에 중앙을 맞춰야 됨. (회생의 사당)

3. 사당의 위치 등 내가 표시할 좌표에 이미지를 넣어야 함.

4. 사용자가 사당, 코로그, 보스 등 보고 싶은 것들만 볼 수 있는 기능을 가진 컴포넌트 제작