벡터 타일맵

[김명욱]

안녕하세요.

제가 벡터타일맵과 관련해서 학습을 하고자 하는데 한국어로 된 자료를 못 찾고 있습니다.

벡터타일맵 과 관련된 학습자료나 관련 사이트를 알고있으시다면 알려주시면 감사하겠습니다.

꼭 한국어가 아니어도 됩니다. 학습하고자 하는데 어려움이 있어서 도움을 요청 합니다.

감사합니다.

[최규성]

김명욱 님께,

아직 한국어로 작성된 자료는 저도 파악을 못하고 있는 반면, 영문 자료는 잘 인지하고 있는 바가 있어서 알림드립니다. 

먼저, 벡터 타일맵에 관해서는 오픈소스 기반의 매핑 서비스 회사인 Mapbox가 산업표준을 선도하고 있기에, 여기에 준하는 자료를 소개합니다. 

1. Mapbox에서 정의하는 벡터 타일 (용어 정의)

> https://www.mapbox.com/help/define-vector-tiles/

2. Mapbox 벡터 타일 기술사양

> https://www.mapbox.com/vector-tiles/specification/

> GitHub 링크 - https://github.com/mapbox/vector-tile-spec

# 벡터 타일 (인코딩) 표준

1) Mapbox 형식

- Google Protobufs (PBF) 형식 인코딩

- Esri ArcGIS 지원 (2015년)

- 최근 Mapnik 엔진 지원

2) Mapnik 형식 

- Mapnik 초기 포맷

3) TileStache 형식

- Python 기반 서버인 TileStache 포맷

> 참고 웹사이트 - https://en.wikipedia.org/wiki/Vector_tiles

# 추가로, OGC 표준에 따르는 GeoPackage

- 래스터 및 벡터 타일을 SQLite 데이터베이스에 저장하는 방식

> OGC GeoPackage 인코딩 표준 링크 - http://www.geopackage.org/spec/

포괄적인 설명만 담았는데, 구체적으로 실전 현장에서 부딪치는 문제가 있다면 그 단계에서 실질적인 논의를 더 진행하기를 기대하겠습니다.

(주)이지매핑 대표 최규성 드림  (M. 010-5414-4374)

Kyu-sung Choi, EZMapping (M. +82-10-5414-4374)

2016년 11월 1일 오전 10:36, 김명욱 <nsugi...@gmail.com>님이 작성:

--
이 메일은 Google 그룹스 'OSGeo(Open Source GeoSpatial) 한국어 지부 - OSGeo Korean Chapter' 그룹에 가입한 분들에게 전송되는 메시지입니다.
이 그룹에서 탈퇴하고 더 이상 이메일을 받지 않으려면 osgeo-kr+unsubscribe@googlegroups.com에 이메일을 보내세요.
이 그룹에 게시하려면 osge...@googlegroups.com에 이메일을 보내세요.
https://groups.google.com/group/osgeo-kr에서 이 그룹을 방문하세요.
더 많은 옵션을 보려면 https://groups.google.com/d/optout을(를) 방문하세요.

[김명욱]

답변 감사합니다.

제가 shp을 vector tile로 만들려고 한다면 pbf로 만들면 되는 건가요?

벡터타일맵의 개념은 대략 알겠으나 실제로 구성하기 위한 방식을 이해를 못 했습니다.

어디서 부터 시작해 가는 것이 맞을까요?

2016년 11월 1일 오후 2:48, 최규성 <kyusun...@gmail.com>님이 작성:

[최규성]

김명욱 님께,

회신이 좀 지연되었죠? 양해하셨기를 바라며...

결론을 먼저 제시하자면, 사용하고 있는 Shapefile을 벡터 타일로 변환하려 하기 위해서

> QGIS Desktop을 사용하여 (Shapefile을) GeoPackage로 저장하는 방법을 권장합니다. 

사실 그에 앞서서, 인코딩 방식이 무엇이어야 하는가에 대한 고민과 결정이 있어야 합니다. 

그런데 위에서 결론을 제시한 것은 (인코딩 방식을 고민하기 보다는 "어떤 방식이 되었든 벡터 타일이면 되겠다" 라는 생각이 앞설 것이라는 전제 아래, 사용이 편리한 방편을 권장한 것입니다.

그러나, 꼭 PBF 형식의 벡터 타일이 필요하다면, 여기에는 다양한 경로와 그에 따른 방법이 있습니다. 예를 들어, 

- 이전에 언급한 Mapbox 형식을 사용하고자 하면, Shapefile > Mapbox Tileset (온라인 저장소) > MBTiles 라는 절차를 따르고

- Google API로 앱을 개발하여 사용한다면, https://developers.google.com/protocol-buffers/docs/overview 를 참조하는 등이 있는데, 

즉각적인 사용(out-of-the-box)을 지원하는 데스크탑 앱/도구는 많지 않아 보입니다. 

또한, MBTiles 포맷으로 변환해 주는 도구를 찾으려 보면 다양한 라이브러리를 접할 수 있는데, (MBTiles는 이미지와 벡터를 모두 저장한다는 것을 고려할 때) 이미지 타일인지 벡터 타일인지에 따라 지원여부가 가름됩니다. (예를 들면, QGIS Desktop에서 지원하는 GDAL...) 

# 상기해 드리자면,

GeoPackage는 SQLite 데이터베이스에서 구현되는 OGC 인코딩 방식을 따르는 벡터 타일입니다. 

MBTiles는 SQLite 데이터베이스에서 구현되는 PBF 인코딩 방식을 따르는 (Mapbox 개발) 벡터 타일입니다. 

끝으로, OGC 인코딩 방식과 PBF 인코딩 방식의 차이점으로는 

- OGC 인코딩은 표준으로써 다양한 usecase를 포함하고 정의하는 것을 추구하는 반면

- PBF 인코딩 방식은 (Mapbox, OpenStreetMap에서 처럼) 실용성에 더 최적화되어 있음을

들 수 있습니다. 

(주)이지매핑 대표 최규성 드림  (M. 010-5414-4374)

Kyu-sung Choi, EZMapping (M. +82-10-5414-4374)

2016년 11월 2일 오후 5:17, 김명욱 <nsugi...@gmail.com>님이 작성:

[김명욱]

지속적으로 답변을 달아주셔서 감사합니다.

제가 mapbox에 shp을 타일셋으로 올려서 mapbox 스튜디오를 통한 스타일링이후 퍼블리싱후 html을 예시(https://www.mapbox.com/mapbox-gl-js/examples/

)와 같이 만들어 봤습니다.

이경우 벡터타일 지도를 만드는 것이 매우 간단하지만 일정 데이터 용량 혹은 스타일정의가 넘어가면 추가 적인비용이 발생하는 것을 알았습니다.

추가적인 비용의 발생 없이 벡터타일을 구성하려면 어떤 방법이 있을까요?

2016년 11월 4일 오후 12:09, 최규성 <kyusun...@gmail.com>님이 작성:

[김명욱]

지속적으로 답변을 달아주셔서 감사합니다.

제가 mapbox에 shp을 타일셋으로 올려서 mapbox 스튜디오를 통한 스타일링이후 퍼블리싱후 html을 예시(https://www.mapbox.com/mapbox-gl-js/examples/

)와 같이 만들어 봤습니다.

이경우 벡터타일 지도를 만드는 것이 매우 간단하지만 일정 데이터 용량 혹은 스타일정의가 넘어가면 추가 적인비용이 발생하는 것을 알았습니다.

추가적인 비용의 발생 없이 벡터타일을 구성하려면 어떤 방법이 있을까요?

또 혹시 WFS와 Vector tile차이가 어디서 발생하는지 알수 있을까요? 둘다 vectorlayer를 직접적으로 사용하는 것은 알겠습니다.

2016년 11월 4일 오후 12:09, 최규성 <kyusun...@gmail.com>님이 작성:

[김명욱]

지속적으로 답변해주셔서 감사합니다.

제가 로컬상에서 벡터타일 서비스 전제를 구성하고 합니다.

shp을 mvt 혹 geopackage등 여러 벡터타일포맷으로 변환이후에는 무슨 툴을 사용하여 서비스를 해야 할까요?

mapbox는 mapbox tileset을 mapbox사이트에 만들어야 서비스를 할수 있도록 구성되어 있어서 이것을 로컬 상에서 서비를 구성하고 싶습니다.

2016년 11월 4일 오후 12:09, 최규성 <kyusun...@gmail.com>님이 작성:

[최규성]

김명욱님께,

늦은 회신에 양해를 구하오며, 답변을 드리자면 아래와 같습니다. 

(연달아 보내주신 3건을 묶어서 중복된 부분은 배제하고 재구성하여 회신합니다.) 

Q1. 제가 mapbox에 shp을 타일셋으로 올려서 mapbox 스튜디오를 통한 스타일링 이후, 퍼블리싱후 html을 예시(https://www.mapbox.com/mapbox-gl-js/examples/)와 같이 만들어 봤습니다. 이 경우 벡터 타일 지도를 만드는 것이 매우 간단하지만, 일정 데이터 용량 혹은 스타일 정의가 넘어가면 추가 적인비용이 발생하는 것을 알았습니다. 추가적인 비용의 발생 없이 벡터 타일을 구성하려면 어떤 방법이 있을까요? 

답변: 

> 예시를 따라서 작업을 잘 하셨다니 좋습니다. 그런데 그 작업은 Starter Plan (무료) 계정으로 작업을 진행하셨겠지요? 

Starter Plan 이 허용하는 데이터 용량, 스타일 정의 수량, 맵 서비스 트래픽을 초과하게 되어, 그 이상 용량을 사용하려면 유료 계정으로 전환해야 합니다. (이것이 Mapbox의 비즈니스 모델 입니다. 유사한 비즈니스 모델은 Dropbox, Evernote 등에서도 볼 수 있지요.) Mapbox 플랫폼을 사용하는 한, 이 제약을 극복할 방법은 없습니다. 

> 한편, 벡터 타일을 작성할 수 있는 도구로써 Mapbox Studio만 있는 것은 아닙니다. Tippecanoe 라는 것도 있는데, 이것은 GeoJSON 파일로부터 대용량 벡터 타일셋을 구축하는 도구입니다. 

- https://www.mapbox.com/help/large-data-tippecanoe

- https://github.com/mapbox/tippecanoe 

> 문제는 벡터 타일셋 구축 뿐만이 아니라, 호스팅되는 데이터 용량, 매핑 스타일 정의 수량, 이것을 이용하는 API & 앱이 사용하는 맵 서비스 트래픽 제약이 수반된다는 것인데요... 말씀드린 바처럼, Mapbox 비즈니스 모델을 수용하거나 아니면 다른 벡터 타일셋과 API/앱을 고려해야만 합니다.

> 다른 방안이란, GeoPackage와 이를 이용하는 애플리케이션(예, GeoServer)을 고려하는 것입니다. Mapbox를 사용하여 얻어지는 가치(value)가 특별한 것이 없다면, 이것이 좋은 방편이 되는 것이지요. 이전 답변에서 GeoPackage를 권장한 것은 바로 이러한 이유에서 였습니다. 

Q2. 또 혹시 WFS와 Vector tile 차이가 어디서 발생하는지 알수 있을까요? 둘다 vector layer를 직접적으로 사용하는 것은 알겠습니다.

답변:

> WFS와 벡터 타일은 동등한 수준에서 비교할 수 있는 기술사양이 아닙니다. WFS는 데이터 인터페이스 표준이고, 벡터 타일은 서비스를 위한 데이터의 전송 패킷을 정의한 맵 랜더링 사양입니다. 

> 엄격한 정의를 떠나서 대충 말하자면, 이 둘은 벡터 좌표 데이터를 실어 나른다는 측면에서 유사성을 가지고 비교하고 싶은 동기가 발생하겠지요. 형이하학의 세계에서 이 둘을 비교하려 한다면, 기술사양을 정확하게 숙지하고 그 활용을 이해하는 방법을 권장할 수 밖에 없군요. 가장 기본적으로 여기에서부터 시작할 것을 권합니다만...

- https://en.wikipedia.org/wiki/Web_Feature_Service

- https://en.wikipedia.org/wiki/Vector_tiles

> 자 그렇다면, WFS라는 데이터 인터페이스를 경유해서 서비스 하려는 원본 데이터는 무엇일까요? 이와 관련해서 아래 Q3.에 대한 답변를 참조하시고, 다만 그 원본 데이터로는 벡터 타일을 사용하지 않는다는 것입니다. 왜냐하면 벡터 타일의 사용목적이 원본 데이터로써의 역할과는 다르기 때문입니다.

Q3. 제가 로컬상에서 벡터타일 서비스 전제를 구성하고 합니다. shp을 mvt 혹 geopackage 등 여러 벡터 타일 포맷으로 변환 이후에는 무슨 툴을 사용하여 서비스를 해야 할까요? mapbox는 mapbox tileset을 mapbox 사이트에 만들어야 서비스를 할수 있도록 구성되어 있어서 이것을 로컬상에서 서비스를 구성하고 싶습니다.

답변: "로컬상"이라고 하는 의미를 클라우드 서비스를 사용하지 않고 로컬 서버가 호스팅 하는 서비스라고 이해하고 진행하겠습니다. 

> Mapbox 벡터 타일을 로컬 서버에서 구성하여 사용하도록 되어 있는 것은 별도로 Atlas Server라고 명칭합니다. Atlas Server는 아마존웹서비스(AWS) 또는 방화벽 내부 독립형 서버에서 사용할 수 있습니다.

- https://www.mapbox.com/atlas

- Atlas Server(전세계 데이터 포함)는 연간 사용료 부담은 물론, 독립적으로 구축하고 구성(configuration)하는 노력도 상당히 요구됩니다. 

> 유념할 사항은 Mapbox 벡터 타일은 특정 위치와 축척 수준에 해당하는 구획을 타일 데이터로 미리 준비하고 있다가 클라이언트 요청이 있을 때, 정의된 스타일로 신속하게 랜더링이 이루어지도록 하려는 목적으로 구축된 것입니다. 따라서, 데이터 편집, 유지관리, 위상구조 모델 등은 주된 관심사항이 될 수 없습니다. 이것은 관리 목적의 데이터베이스에서 처리할 역할로 남겨 둡니다. 따라서, 전체 시스템 구성에서는 벡터 타일셋 데이터와 유지관리 원본 데이터셋을 구분하여 관리하는 것이 필요합니다. (이는 이미지 타일을 사용할 때도 동일하지요. 혹시 벡터 타일을 사용하면 벡터 데이터셋의 역할을 대신 하겠다 라고 생각하였다면 이것은 잘못된 이해였습니다.) 

> 이와 유사하게 구성할 수 있는 다른 아키텍처 대안은 GeoPackage-GeoServer 로써 구축하는 것입니다. 여기에서도 (Mapbox 벡터 타일 + Atlas Server 구성에 요구되는 노력보다 훨씬 많은) 구축을 위한 별도의 노력이 요구됩니다. 

> 결국, 단편적인 어느 하나만 가지고 볼 것이 아니라, 하고자 하는 목표에 따라 전체 (아키텍처) 그림을 그린 다음, 이를 구성하기 위한 시간, 노력, 비용을 설계하고, 이에 대해사용자 입장에서 최적으로 수용할 수 있는 방안을 채택하는 것이 필요합니다. 

끝으로, Mapbox에 관련한 더 심층적인 지원이 필요하시다면, 보편적인 정보공유 차원을 벗어나는 것 같고 또한 이러한 이메일을 통한 정보교환이 효율적이지 못한 것 같습니다. 개별적으로 저와 기술상담을 진행할 것을 권장드립니다. 그렇게 하기 위해서는 가상의 상황이 아닌 실제적인 현장 사례를 두고 접근할 때, 서로에게 의미가 있겠다고 여깁니다. 

(주)이지매핑 대표 최규성 드림  (M. 010-5414-4374)

Kyu-sung Choi, EZMapping (M. +82-10-5414-4374)

2016년 11월 10일 오전 9:45, 김명욱 <nsugi...@gmail.com>님이 작성:

[김명욱]

답변 감사합니다.

저는 벡터타일이 이미지타일지도 서비스와의 차이점을 공부 하고 있습니다. 그와중에 전체적인 서비스를 구성하는 것 까지 해보려 하는 중입니다.

현재 저는 geoserver와 openlayers3를 이용한 벡터타일 지도를 구성해보았습니다. 그러나 오픈레이어스3를 이용하여 지도를 구성하던중 라인과 포인트에서 텍스트를 표현하는데 문제를 겪고 있습니다.

해서 오픈레이어스 부분을 mapbox gl로 대체 하려고 했습니다.

https://github.com/klokantech/mapbox-gl-js-offline-example 같은 mapbox gl 예제를 찾았습니다만 geoserver와의 연계에 어려움을 격고있습니다.

아래와 같이 geoserver를 구성하였습니다.

​링크 예제의 샘플을 토대로 다음과 같이 적용하였습니다.

<!DOCTYPE html>

<html>

<head>

    <meta charset='utf-8' />

    <title>MapBox GL JS Offline Example</title>

    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

<!--

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.10.0/mapbox-gl.js'></script>

    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.10.0/mapbox-gl.css' rel='stylesheet' />

-->

    <script src='mapbox-gl.js'></script>

    <link href='mapbox-gl.css' rel='stylesheet' />

    <style>

        body { margin:0; padding:0; }

        #map { position:absolute; top:0; bottom:0; width:100%; }

    </style>

</head>

<body>

<div id='map'></div>

<script>

// mapboxgl.accessToken = 'pk.your-own-code-here-for-online-maps';

mapboxgl.accessToken = 'NOT-REQUIRED-WITH-YOUR-VECTOR-TILES-DATA';

var style = {

  "version": 8,

  "sources": {

    "countries": {

      "type": "vector",

 "tiles": ["http://localhost:8080/geoserver/gwc/service/tms/1.0.0/vectorTile%3A1aa2d236-10m-admin-0-countries@EPSG%3A3857@pbf/{z}/{x}/{y}.pbf"],

      "maxzoom": 15

    }

  },

  //"glyphs": "http://localhost:8080/geoserver/www/mapbox/"+"font/{fontstack}/{range}.pbf",

  "layers": [{

    "id": "background",

    "type": "background",

    "paint": {

      "background-color": "#ddeeff"

    }

  },

  {

    "id": "1aa2d236-10m-admin-0-countries",

    "type": "fill",

    "source": "countries",

    "source-layer": "1aa2d236-10m-admin-0-countries",

    "paint": {

      "fill-color": "#000000"

    }

  }

]

};

var map = new mapboxgl.Map({

  container: 'map',

  center: [8.3221, 46.5928],

  zoom: 1,

  style: style

});

map.addControl(new mapboxgl.Navigation());

</script>

</body>

</html>

한데 웹상의 지도가 깨지는 문제가 발생합니다.

두서없이 질문을 드린것 같아 정리를 하자면

1.오픈레이어스를 활용한 벡터타일에서 텍스트 표출문제 해결방법

2.mapbox gl과 geoserver 벡터타일의 연계 방법

입니다. 

해결방안을 아시거나 위 방법 이외의 벡터타일 구성방법을 아신다면 알려주시면 감사하겠습니다.

2016년 11월 11일 오후 11:21, 최규성 <kyusun...@gmail.com>님이 작성: