Peter Hoffmann: z10 타일 그리드로 주문형 33,000개 피크 로딩
biwak.info는 Alpine huts를 위한 모바일 우선 지도를 개발했으며, OpenStreetMap과 Wikidata에서 얻은 상세 정보와 함께 33,437개의 명명된 봉우리를 추가했습니다. 연결성이 제한적인 모바일 장치에 최적화하기 위해 상당한 크기인 15.4MB의 봉우리 데이터를 효율적으로 로드해야 했습니다. 해결책은 Leaflet에서 사용하는 기존의 slippy map 타일 그리드를 모방하여 데이터를 더 작고 타일 기반의 JSON 파일로 분할하는 것이었습니다. 이를 통해 브라우저는 사용자의 현재 지도 보기에서 보이는 관련 봉우리 데이터만 가져올 수 있습니다.데이터 그리드에 대해 고정 줌 레벨 10이 선택되었으며, 이는 네트워크 요청 수와 각 다운로드 파일 크기 간의 균형을 제공합니다. 이 레벨에서 Alpine 타일은 대략 27x27km이며, 줌 레벨 12의 일반적인 휴대폰 화면은 최대 6개의 타일에 닿으며, 중간 타일 크기는 13KB(압축 시 3.6KB)입니다.Python 스크립트는 비어 있지 않은 타일의 매니페스트와 함께 이러한 타일 파일을 생성하여 필요한 파일만 요청하도록 보장합니다. 각 타일의 JSON 데이터는 정수 좌표와 필드 헤더를 사용하여 파일 크기를 최소화하도록 간결합니다. 봉우리는 돌출도 또는 고립도를 기준으로 순위가 매겨져 다른 지도 줌 레벨에서의 가시성을 제어하며, 낮은 줌 레벨에서는 더 중요한 봉우리만 표시됩니다.클라이언트 측 JavaScript는 Leaflet의 'moveend' 이벤트를 사용하여 필요한 타일을 결정하고, 느린 연결에서의 과부하를 방지하기 위해 최대 4개의 병렬 요청으로 가져옵니다. 64개의 타일로 구성된 LRU 캐시는 다운로드된 데이터를 관리하며, 현재 보기 영역에 없는 가장 최근에 사용되지 않은 타일을 삭제합니다. 봉우리 데이터는 개별 Leaflet 마커를 사용하는 대신 단일 캔버스에 렌더링되어 성능을 향상시킵니다.지도 탭은 로드된 타일 내에서 최근접 이웃 검색을 수행하여 근처 봉우리를 식별합니다. 타일 기반 그리드는 또한 딥 링크를 자연스럽게 지원하여 특정 봉우리에 대한 안정적인 URL을 제공합니다. 향후 개선 사항에는 패스 및 전망대와 같은 더 많은 데이터 범주 추가, 그리고 MapLibre와 같은 매핑 라이브러리와의 통합을 위해 벡터 타일(MVT)로의 잠재적 마이그레이션이 포함됩니다. 이 시스템은 서버나 데이터베이스 없이 대규모 데이터셋을 효과적으로 처리하며, 간단한 파일 그리드의 힘을 보여줍니다.