지도같은 화면 구현이 보여서 확인해보니 드래그로 구현이 되어 있었다. 그래서 혹시 지도로 구현된게 없을까 해서 찾아본 자료들. leafletjs 보니까 Non-geographical maps 라는 표현을 사용했다.

큰 이미지를 미리 여러 해상도로 줄여 두고, 해상도마다 256px 정사각형 타일로 잘라 둔다. 줌 0 은 그림 전체가 타일 하나, 줌 1 은 2×2, 줌 2 는 4×4 이고, 줌이 하나 오를 때마다 가로세로 해상도가 두 배가 된다. 맨 위 줌에서 원본과 1:1 이 된다. 뷰어는 지금 줌에서 화면에 걸친 타일만 /z/x/y.png 로 요청한다 — 줌 2 에서 화면이 가운데 네 칸에 걸치면 그 네 장만 받는다. 그래서 900MB 짜리 그림도 화면 하나 분량만 내려받는다. 최대 줌은 긴 변을 256 으로 나눈 값의 log2 를 올림한 것이다 — 2000×3000 이미지면 log2(3000/256)=3.55 라 4. gdal2tiles-leaflet 의 -l 옵션은 기준점 [0,0] 을 지리 좌표처럼 왼쪽 아래가 아니라 그림처럼 왼쪽 위에 두고, leaflet-rastercoords 는 최대 줌 기준으로 그림의 픽셀 (x, y) 와 지도 좌표를 서로 바꿔 마커를 픽셀 위치에 놓게 한다.

Footnotes

  1. Leaflet 으로 지도가 아닌 큰 그림을 확대·이동하는 스토리 맵 만들기 (아래 pictorial-st-louis 와 같은 저자의 글). ↩

  2. 의회도서관의 옛 지도 그림(전체 PNG 약 900MB)을 타일로 잘라 Leaflet 에 올린 결과물. 아래 gdal2tiles-leaflet 으로 타일을 만들고 leaflet-rastercoords 로 좌표를 맞춘다. ↩

  3. 큰 이미지를 Leaflet 용 타일로 자르는 gdal2tiles.py 개조판. -l 옵션으로 기준점 [0,0] 을 왼쪽 위(지리 좌표가 아니라 그림의 픽셀 좌표)에 둔다. ↩

  4. 위에서 만든 타일을 그림 좌표 그대로 쓰게 하는 Leaflet 플러그인 — 원본 이미지 크기만 주면 마커를 픽셀 (x, y) 위치에 놓을 수 있다. ↩

  5. 확대 가능한 이미지 전용 웹 뷰어(순수 JS). 지도 라이브러리를 빌리지 않고 같은 일(타일 기반 확대·이동)을 하는 다른 길. ↩

#maps#ui
#20