이미지 기반 커스텀 지도 생성 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자 및 디자이너 (초급~중급)

핵심 요약

• GDAL 및 Leaflet을 활용한 이미지 기반 지도 생성 기법 설명
• --xyz 플래그 사용으로 Leaflet 호환 타일 생성 (TMS 대신 XYZ 좌표 시스템)
• Vite + Leaflet 기반 웹 애플리케이션 구조 설계 (예: leaflet-rastercoords 라이브러리 활용)

섹션별 세부 요약

1. 소개 및 사용 사례

• 실내 지도 (쇼핑몰, 공항 등)
• 게임 지도 (예: _The Forest_ 게임의 인터랙티브 지도)
• 대규모 이미지 확대 (블루프린트, 인포그래픽 등)

2. 필수 도구 및 설치

• GDAL (Python 3 + bindings)
• npm (웹 애플리케이션 설정)
• Anaconda 추천 설치 (Compatibility 보장)

3. 타일 생성 과정

• gdal2tiles.py 명령어 사용 (예: --xyz -p raster -z 0-2 -w leaflet treasure-map.jpg map/)
• --xyz 플래그: Leaflet 호환 타일 생성 (TMS 대신 XYZ 좌표 시스템)
• -z 0-2: 최대 2레벨 확대 (이미지 크기 1024x1024 기준)

4. 타일 생성 시 고려사항

• 타일 크기: 256x256 픽셀 (레벨 당 2배 확대)
• 최대 추천 레벨: 2 (이미지 크기 1024x1024 기준)
• 수식: imagesize = max(height, width) → zoom_level = ceiling(log(imagesize/tilesize)/log(2))

5. 웹 애플리케이션 구축

• Vite 프로젝트 생성 (예: npm create vite@latest my-leaflet-app -- --template vanilla)
• Leaflet 및 leaflet-rastercoords 라이브러리 설치 (npm i -S leaflet leaflet-rastercoords)
• CSS 설정: #app 컨테이너 스타일링 (550px 높이, 100% 너비)
• JavaScript 초기화: L.map 인스턴스 생성 및 L.CRS.Simple 좌표 시스템 적용

결론

• 이미지 기반 지도 생성 시 GDAL의 --xyz 플래그 사용 필수 (Leaflet 호환성 확보)
• 타일 생성 레벨 계산 시 256px 기준으로 최대 레벨 설정 (이미지 품질 저하 방지)
• Vite + Leaflet 활용 시 leaflet-rastercoords 라이브러리로 픽셀 좌표 매핑 가능