OpenStreetMap의 새 벡터 타일

 (tech.marksblogg.com)
3P by GN⁺ | ★ favorite | 댓글 2개
  • OpenStreetMap은 오랫동안 정적 PNG 기반 래스터 타일을 제공해 왔지만, 이제 Mapbox Vector Tiles(MVT) 형식의 벡터 타일 호스팅을 시작해 지도 활용 방식이 넓어짐
  • 벡터 타일은 스타일과 렌더링 규칙을 사용자가 조정할 수 있고, 타일 안의 정보를 추출하거나 라벨 언어 전환 같은 기능을 구현할 여지를 줌
  • 메인 OSM 웹사이트는 아직 래스터 타일을 쓰지만, 새 벡터 타일은 별도 웹 데모, QGIS, Leafmap에서 직접 확인할 수 있음
  • Burj Khalifa 근처 z14 타일 예시는 114KB MVT가 1.4MB JSON으로 변환됐고, POI 레이어에는 474개 레코드와 여러 최상위 레이어 키가 포함됨
  • tiles2columns를 쓰면 지정한 경계 상자의 OSM 벡터 타일을 내려받아 GeoPackage 또는 Parquet으로 바꿀 수 있어, 갱신된 OSM 데이터를 파일 기반 분석에 바로 활용하기 쉬움

OSM 타일이 달라지는 지점

  • OpenStreetMap은 그동안 렌더링 규칙과 스타일이 미리 정해진 정적 PNG 래스터 타일로 지도를 제공해 왔음
  • 새 호스팅은 Mapbox Vector Tiles, 즉 MVT 형식 벡터 타일을 제공함
  • 벡터 타일을 쓰면 최종 사용자가 지도 표현을 더 직접 제어할 수 있음
    • 스타일과 렌더링 규칙 조정
    • 각 타일에 포함된 기저 정보 추출
    • 더 선명한 지도 이미지 표시
    • 라벨 언어 전환 가능성 확보
  • OSM 메인 웹사이트는 여전히 래스터 타일을 제공함
  • 새 벡터 타일은 웹 데모에서 대부분의 휴대폰과 데스크톱 기기로 확인할 수 있음

실습에 사용한 도구

  • 예시는 Python과 여러 지리공간 도구로 OSM 데이터를 시각화하고 분석함
  • 기본 설치 도구에는 jq, python3-pip, python3-virtualenv가 포함됨
  • Python 가상환경에는 다음 패키지를 설치함
    • leafmap[maplibre]
    • mapbox_vector_tile
    • morecantile
    • notebook
  • DuckDB는 다음 확장을 함께 사용함
  • 지도 렌더링에는 QGIS 3.40을 사용함
    • QGIS는 Windows, macOS, Linux에서 동작하는 데스크톱 애플리케이션임
    • 전 세계 사용자의 애플리케이션 실행 횟수는 월 약 1,500만 회 수준임

QGIS에서 벡터 타일 열기

  • QGIS에서는 Layer Menu -> Add Layer -> Add Vector Tile Layer로 OSM 벡터 타일을 추가할 수 있음
  • 새 연결에서 스타일 URL은 다음 값을 사용함
  • 소스 URL은 다음 MVT 엔드포인트를 지정함
  • 스타일시트는 선택 사항이며, 없어도 QGIS가 임의 색상으로 벡터 데이터를 렌더링할 수 있음
  • QGIS에서는 아이콘 렌더링이 어긋나는 문제가 확인됨
    • 다른 매핑 도구는 해당 스타일의 스프라이트를 정상 렌더링함
    • QGIS에서는 아이콘이 흐릿한 검은색 아이콘처럼 보임
    • 관련 이슈는 QGIS #59492에 있음

Leafmap과 Jupyter Notebook 렌더링

  • Jupyter Notebook 설정 폴더를 만들고 비밀번호를 설정한 뒤, 서버를 127.0.0.1에서 실행함
  • Notebook은 실행한 사용자의 권한으로 동작하고 현재 디렉터리와 하위 파일을 노출할 수 있어, 빈 폴더에서 실행하는 방식을 사용함
  • Leafmap에서는 leafmap.maplibregl을 사용하고 스타일 URL로 colorful.json을 지정해 Burj Khalifa 주변을 렌더링함
  • Leafmap 렌더링에서는 POI 아이콘이 제대로 표시됨

MVT를 분석 가능한 데이터로 바꾸기

  • Burj Khalifa 근처의 zoom level 14 타일을 예시로 사용함
  • 대략적인 좌표 [55.27, 25.2]를 morecantile tiles 14에 넣어 타일 좌표 [10707, 7006, 14]를 얻음
  • 해당 값으로 다음 타일을 다운로드함
  • 114KB MVT 파일은 mapbox_vector_tile.decode와 좌표 변환 함수로 1.4MB JSON 파일로 변환됨
  • 변환된 타일의 최상위 키에는 다음 레이어들이 포함됨
    • addresses
    • bridges
    • buildings
    • ferries
    • land
    • ocean
    • pier_lines
    • pier_polygons
    • place_labels
    • pois
    • public_transport
    • sites
    • street_labels
    • street_polygons
    • streets
    • streets_labels_points
    • water_polygons
    • water_polygons_labels

POI 레이어를 DuckDB로 살펴보기

  • pois 레이어를 별도 JSON 파일로 추출한 뒤 DuckDB의 ST_READ로 열어 분석함
  • cuisine 값이 있는 POI는 67개 행으로 조회됨
    • 예시 amenity에는 restaurant, fast_food, cafe가 포함됨
    • 예시 cuisine에는 french, greek, american, lebanese, coffee_shop, asian, persian, chicken, pizza가 포함됨
  • DuckDB SUMMARIZE 결과에서 POI 데이터의 채워진 정도를 확인할 수 있음
    • 전체 POI 레코드는 474개
    • name, name_de, name_en의 null 비율은 각각 29.96%
    • amenity의 null 비율은 31.86%
    • cuisine의 null 비율은 85.86%
    • geom의 null 비율은 0.00%
  • approx_unique 기준으로 name은 258개, name_de는 264개, name_en은 245개, amenity는 27개, cuisine은 39개 값을 가짐

tiles2columns로 경계 상자 추출하기

  • 기존 osm_split은 GeoFabrik이 만든 OSM PBF 파일을 이름 있는 GeoPackage 파일로 변환하는 도구였음
  • GeoFabrik PBF 파일은 처리 가능한 시점에는 며칠 전 데이터가 될 수 있음
  • 새 OSM 벡터 타일은 기저 데이터가 편집된 직후 업데이트됨
  • tiles2columns는 지정한 경계 상자의 OSM 타일을 내려받아 GeoPackage 또는 Parquet 파일로 변환하는 Python 기반 유틸리티임
  • 북부 Dubai 주변 경계 상자 예시는 42개 타일을 다운로드하고 몇 MB 규모의 GeoPackage 파일들을 생성함
    • streets.gpkg: 6.8MB
    • buildings.gpkg: 6.2MB
    • pois.gpkg: 1.4MB
    • street_labels.gpkg: 1.4MB
    • land.gpkg: 744KB
  • 생성된 GeoPackage 파일은 QGIS 프로젝트에 바로 넣을 수 있음
  • 파일들은 OSM MVT 파일에서 쓰인 키별로 나뉘어 있어 각 레이어를 독립적으로 식별, 스타일링, 분석하기 쉬움
  • 각 지오메트리의 속성은 별도 컬럼에 저장됨
  • pois.gpkg에서 이름이 있는 POI를 조회한 예시는 6,329개 행을 반환하며, Kiku, Fujiya Restaurant, Mövenpick Grand Al Bustan Dubai, McDonald's 같은 이름이 포함됨

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 벡터 타일에 대해 좀 복잡한 느낌임. 원래 래스터 타일이 제공하는 수준의 세부 정보를 보여주는 스타일과 타일 생성기 스키마 조합을 아직 못 찾았음
    글의 스크린샷만 봐도 차이가 뚜렷함. 첫 번째는 조각상, 상점, 극장, 전망대 같은 관심 지점, 다리로 표시되는 도로, 잔디와 공원의 색 차이, 도로별 선 굵기, 운동장, 건물·동네 이름, 일방통행 화살표, 건물 일부, 계단, 나무 등 많은 정보가 있음
    두 번째는 트롤리 정류장 하나와 도로명 하나 정도뿐이고, 그 도로명도 잘못 렌더링됨
    openmaptiles 스타일, protomaps 기본 스타일, mapbox 스타일과 protomaps, openmaptiles, mapbox 생성기를 많이 써봤지만, OSM 래스터 타일만큼 읽기 쉬우면서 세부 정보가 많은 것은 없었음
    벡터 스타일은 확대·이동이 부드럽고 스타일 수정도 쉽지만, 자기 데이터의 배경 지도로 쓰는 게 아니라 실제 지도 데이터를 보고 싶을 때는 부족함
    아마 계산 자원 한계 때문일 수도 있음. OSM 래스터 타일 수준의 세부 정보를 표시하려면 클라이언트와 타일 생성 양쪽에서 자원을 너무 많이 먹을 수 있음
    OpenStreetMap이 또 하나의 저대비·저세부 배경 지도를 제공하기보다 기존 래스터 스타일을 더 가깝게 흉내 내면 좋겠고, 이번 공개 벡터 타일 릴리스가 더 상세한 벡터 지도를 가능하게 해주길 바람

    • 기본적으로 맞는 말이지만 관점은 조금 다를 수 있음. 지도를 제공하는 쪽에서 벡터 타일의 주된 장점은 선명도나 스타일 유연성 같은 작은 이점이 아니라, 필요한 계산량이 크게 줄어든다는 데 있음
      최신 래스터 타일 생성 인프라를 유지하는 건 꽤 큰 작업임
      예전에 자전거 여행 계획용으로 매우 상세한 스타일을 오래 개발했음: https://stevebennett.me/2015/01/14/cycletour-org-a-better-ma...
      몇 번이나 벡터 타일로 재현하려고 했지만, 크기 제한에 걸리지 않으면서 충분한 세부 정보를 넣기가 꽤 어려웠고 기본 Mapbox 타일에는 필요한 정보가 훨씬 부족했음
      다만 벡터 타일에는 래스터 타일에 없는 우회 방법도 있음. 예를 들어 서로 다른 레이어를 켜고 끌 수 있으면서도, 라벨이 아래에 무엇이 있는지 인식할 수 있어 가독성을 유지할 수 있음
    • 지금까지는 그 타일을 활용하는 스타일을 풍부하게 만드는 것보다, 지속적으로 갱신되는 벡터 타일을 생성하는 소프트웨어에 초점이 맞춰져 있었던 듯함
    • OpenrailwayMap의 포크를 만들었음. 원본은 https://www.openrailwaymap.org이고, 벡터 스타일은 https://openrailwaymap.fly.dev에 있음
      스타일은 원래 래스터 타일의 모양에 가깝게 맞췄지만, 벡터 버전에는 상호작용 기능을 훨씬 더 많이 추가했음
      스타일·타일 설계 관점에서 흥미로운 점은 타일이 어디서 어떻게 렌더링되는지에 따라 성능 절충이 완전히 달라진다는 것임. 당연한 이야기지만, 서버와 클라이언트에서 시각적으로 가능한 것에도 영향을 줌
    • 전적으로 동의함. 길 찾을 때 OpenStreetMap과 Google Maps를 섞어 쓰는데, OSM만 쓰고 싶어도 등록된 장소 수가 Google Maps만큼 많지 않음
      그래도 OSM 지도는 표시되는 관심 지점이 많아서 훨씬 쓰기 좋음. 지도를 보기만 해도 실제 장소의 감각이 생기고, 공원은 공원답게, 병원은 병원답게 보임
      Google Maps는 그래픽 디자이너 관점에서는 더 좋아 보일 수 있음. 하지만 방향을 잡으려면 보통 도로와 교차로의 형태를 대조해야 함. Google Maps에서는 어디나 비슷하게 보임
    • 생각이 완전히 같음. openstreetmap.org의 기본 스타일이 개인적으로는 순수한 행복에 가까운데, 벡터 지도를 그 수준으로 만들려고 꽤 오래 시도했지만 쓸 만한 결과를 못 찾았음
      2분만 만져봐도 세부 정보 손실이 바로 보이는 수준임. 정말 아쉽지만, 언젠가는 누군가 해결할 거라고 낙관함

  • 오픈소스 커뮤니티가 벡터 지도 타일 기능을 만들어가는 과정을 보는 게 흥미로웠음. 2018년쯤 웹 GIS 작업을 할 때 Google/Apple의 스트리밍 벡터 지도는 마법처럼 보였고, 비용만 감당 가능했다면 꼭 쓰고 싶었음
    얼마 지나지 않아 핵심 기술이 오픈소스로 나왔고, 무료 호스팅 솔루션까지 생겼음. 이제 Leaflet 지도에서 훌륭한 벡터 레이어를 무료로 쓸 수 있음. 오픈소스에 감사함

    • OSM이 여기까지 오는 데 이렇게 오래 걸린 건 조금 의외임. 기본 기술 요소들은 10년도 더 전에 이미 있었음
      무료 지도 서비스에 불평하려는 건 아니고, 서비스가 훌륭하며 편집과 데이터 소유권에 더 집중한다는 것도 이해함. 제공 인프라는 어렵고 비쌈
      다만 몇 년 동안 MapBox의 지배력이 다른 시도들을 얼마나 방해했는지가 궁금함

  • OSM 기반 지도를 호스팅할 때 운영 비용이 줄어드는지 궁금함. 렌더링에 쓰는 CPU가 덜 필요하고, 벡터가 저장 공간과 대역폭도 덜 먹을 것 같기 때문임

    • 예이기도 하고 아니기도 함
      아닌 이유는 공식 OSM 타일 레이어가 Fastly의 큰 후원을 받고 있기 때문임. 마지막으로 확인했을 때 Fastly가 €720k, AWS 렌더링이 €40k였음
      맞는 이유는 기술적으로 더 적은 자원을 쓰므로 AWS+Fastly에도 부담이 덜하고, 자가 호스팅도 쉬워지기 때문임
      예전에 자세히 읽은 위험 평가에서 OSM은 “Fastly 후원을 잃으면 표준 타일 레이어에 대한 모든 제3자 접근을 끊고 소수의 Varnish 서버만 운영할 가능성이 높다”고 적었음
      이해하기로 벡터의 주된 동기는 비용 절감보다 국제화 개선, 클라이언트 쪽 렌더링 결정 가능화, 여러 후속 이점을 낳을 현대적 도구 체계 구축에 가까웠음
      최신 정보는 더 있을 것이고, 관련 자료는 1과 2에 있음
      1. https://operations.osmfoundation.org/2024/01/25/owg_budget.o...
      2. https://osmfoundation.org/wiki/Finances
    • 아니라고도 할 수 있음. 벡터 타일은 이미 오래전부터 아주 적은 노력으로 자가 호스팅하거나 누군가에게 호스팅을 맡길 수 있었기 때문임
      다만 어느 정도 처리를 클라이언트로 넘기고, 더 중요하게는 많은 스타일 결정을 클라이언트가 하게 만들 수 있다는 점에서는 맞음. 물론 전부 가능한 것은 아님
      정적이거나 자주 갱신되지 않는 벡터 타일은 여러 도구로 OSM 데이터에서 만들 수 있는데, 지금 가장 인기 있는 것은 https://github.com/systemed/tilemaker와 https://github.com/onthegomap/planetiler임
      실제로 새로운 점은 Paul이 OSMF를 위해 만든 작업 덕분에 벡터 타일을 즉시 갱신, 즉 몇 분 안에 갱신할 수 있게 됐다는 것임. 이는 OSM 기여자에게 피드백 메커니즘으로 중요하고, OSMF가 현재 래스터 타일 서비스를 운영하는 주된 이유이기도 함
      현재는 벡터 타일 서비스 사용에 어떤 제한이 붙을지가 아직 열려 있음. 래스터 타일 서비스와 마찬가지로 제3자 서비스와 경쟁하거나 대체하려는 의도는 아니지만, 벡터 타일 서비스는 잠재적으로 그렇게 될 수 있음
    • 네, 벡터 타일은 자가 호스팅이 훨씬 쉬움
      예를 들어 https://protomaps.com/, https://openmaptiles.org/, https://versatiles.org/가 있음
    • openfreemap.org 만든 사람임. 맞음. 벡터 타일은 기본적으로 정적 파일을 호스팅하는 것이고, 서버는 HTTPS 암호화 말고 할 일이 없음
      gzip 압축도 이미 타일 안에서 끝나 있음

  • 또 다른 문제는 벡터 버전에서 아랍어 글꼴이 제대로 렌더링되지 않는다는 것임. 오른쪽에서 왼쪽이 아니라 왼쪽에서 오른쪽으로 렌더링되고, 글자가 이어지지 않고 분리되어 보임

    • 벡터 타일의 핵심은 렌더링이 로컬에서 일어나고, 타일 스키마를 제외하면 바꿀 수 있는 스타일 설정으로 제어된다는 데 있음
      그래서 보이는 깨짐은 스타일이나 로컬에서 내용을 렌더링하는 라이브러리 쪽 문제임
    • QGIS 벡터 타일 렌더러가 어떻게 동작하는지는 모르겠지만, GitHub 데모 페이지라면 MapLibre에 RTL 텍스트 플러그인을 추가해서 오른쪽에서 왼쪽으로 쓰는 텍스트를 제대로 처리하게 만들기 쉬울 것임: https://maplibre.org/maplibre-gl-js/docs/examples/mapbox-gl-...

  • 함께 볼 만한 것: OpenFreeMap — 무료 OpenStreetMap 벡터 타일 호스팅
    https://openfreemap.org/

    • OpenFreeMap은 다음을 제공하지 않음: 검색이나 지오코딩, 경로 계산·내비게이션·길 안내, 정적 이미지 생성, 래스터 타일 호스팅, 위성 이미지 호스팅, 고도 조회, 맞춤 타일이나 데이터셋 호스팅
      https://github.com/hyperknot/openfreemap?tab=readme-ov-file#...
    • 와, 굉장히 잘 다듬어져 보임
      이것도 같은 벡터 기술 스택을 기반으로 한 건지, 아니면 완전히 별도의 개발인지 궁금함

  • “이미지는 훨씬 더 선명해지고 라벨 언어 전환도 가능해질 것”이라는 부분은 기대보다 잘 안 될 것 같음
    언어를 바꾸면 라벨 크기가 그대로 유지된다는 보장이 전혀 없고, 라벨 크기는 지도 배치와 상호작용하며 무엇을 보여줄지도 좌우함
    라벨이 커지면 지도를 너무 많이 가리거나 서로 겹칠 수 있음. 라벨이 작아지면 이전에는 공간 제약 때문에 생략된 도시가 왜 새로 생긴 빈 공간에 나타나지 않는지 사용자가 의아해할 수 있음

    • Google Maps에서 확대·축소할 때 도시명과 도로명이 사라지는 게 정말 싫음. 어떤 도로나 가게 이름은 특정 확대 단계에서만 보이고, 더 확대하거나 축소하면 안 보임
      그냥 모든 도로 이름을 보여주면 됨. 빽빽해지는 건 상관없음. 교차로에 서서 이름 없는 지도를 보고 있는 건 쓸모없는 지도임
    • 어차피 시작점은 라벨 자동 배치임
      수년간 쓰여 온 래스터 타일에서도 마찬가지였음
    • 배치 알고리즘이 크게 달라질 거라고 예상할 이유가 있나?

  • 아주 반가운 새 변화임. 더 보기 좋은 지도를 기대함
    다만 “my workstation” 섹션은 좀 의아함. 글의 나머지와 별 관련이 없어 보이고, 이후에 다루는 작업에 높은 시스템 요구사항이 필요한 것도 아닌 듯함

  • “이미지는 훨씬 더 선명해지고 라벨 언어 전환도 가능해질 것”이라면, 예를 들어 도시 모양 벡터, 정확히는 다각형이 정의된 모든 언어의 도시 이름 메타데이터를 들고 다니게 되는 건가?

    • 큰 도시는 이미 여러 언어 이름을 포함하고 있음. 예를 들어 Paris를 보면 됨: https://www.openstreetmap.org/relation/71525
      언어 전환 기능의 유용성은 당연히 번역의 존재 여부에 달려 있음. 편집자들이 지명 번역을 더 추가하도록 유도할 수도 있음
    • 현재 테스트에 쓰이는 타일 스키마인 shortbread는 여러 언어를 지원하지 않지만, 버그가 정리되면 작업하는 사람들이 지원하려는 것으로 알고 있음
      이런 모습의 예시는 https://americanamap.org에서 볼 수 있음. OSM 데이터를 쓰지만, 이 글의 타일처럼 거의 실시간을 목표로 하지는 않음
    • 아니지만, 필요한 텍스트만 들어 있는 타일을 가져와서 이미 가진 타일을 패치할 수는 있음

  • 이게 OSMAnd와 OrganicMaps가 드디어 힘을 합쳐 궁극의 자유 오픈소스 지도 앱을 내놓는다는 뜻이면 좋겠음

    • 두 앱은 주로 자체 형식으로 전처리된 다운로드·오프라인 지도 데이터를 사용함
      MVT 형식 벡터 타일은 내비게이션이나 검색에는 전혀 적합하지 않음. 억지로 엮어 만들 수 없다는 뜻은 아니지만 꽤 무리임
    • 하나의 궁극적인 지도 앱은 있을 수 없음. 사용 사례가 다르기 때문임
      예를 들어 OSMAnd에는 OSM에 기여하는 사람들에게 매우 유용한 고급 사용자 기능이 많지만, 일반 사용자용 앱에서는 인터페이스를 어지럽히기만 할 수 있음
    • 적어도 둘이 지도 타일을 공유할 수 있게 되어, 같은 지도로 기가바이트 단위 공간을 중복해서 쓰지 않아도 되면 좋겠음

  • https://marble.kde.org/는 9년 전부터 스트리밍 벡터 OSM 레이어를 자체 구현해 갖고 있었고, 비슷한 것이 다른 OSM 지도 앱에도 나타나길 꽤 오래 기다렸음
    Android OSM 앱에서 나라 전체 단위의 큰 덩어리로 수백 메가바이트 지도를 내려받는 건 늘 저장 공간 문제였음. 드디어 표준이 잡혀가서 매우 반갑고, 여러 앱에서 채택되고 다듬어지길 기대함. 훌륭한 작업임

    • Android에서 Marble 앱을 찾아봤는데 Play Store에도 없고 F-Droid에도 없음. 웹사이트의 Play Store 링크는 404임. 포기한 건가?
답변달기