Google지도로 바뀌는지도 서비스를 시작해 보았습니다.

소개

지도 서비스로 유명한 것으로 Google 지도가 있지만, 그 밖에도 다양한 서비스가 있습니다.
그 중에서도 자유도가 높은 OpenStreetMap의 데이터를 사용해 Google 맵풍으로 해 보았으므로, 그 방법에 대해 해설합니다.

했던 일

필요한 소프트웨어

QGIS
지도 데이터를 편집하는 데 사용합니다.
QGIS 다운로드

tippecanoe
여러 지도 데이터를 결합하는 데 사용합니다.

필요한 데이터

지도의 기본 데이터를 다운로드합니다.

OpenMapTiles에서 지도 벡터 데이터 다운로드
htps : // 오펜마 p치 s. 코 m / 도 w 응 아 ds / 치세 t / 오 sm / 아시 아 / 자판 /

OSM 데이터 다운로드
아래 URL에서 Sub Region .shp.zip 데이터 8 파일 다운로드
h tps : // 어쨌든 d. 게오후비 k. 에 / 아시아 / 자판. HTML
※노선명이 OpenMapTiles에 들어 있지 않기 때문에.

맵 데이터 작성

OpenMapTiles 데이터에서 만드는 방법

asia_japan.mbtiles를 기반으로 지도 데이터를 만듭니다.

1. OSM 데이터로부터 노선 정보 취득

다운로드한 파일은 zip 그대로 QGIS로 읽어들입니다.
gis.osm_railways_free_1.shp를 선택하여 레이어에 추가한 다음 필터 메뉴를 선택하고 다음 수식을 입력합니다.

"fclass" IN ('light_rail','monorail','rail','subway','tram')

2. Geojson 형식으로 저장

레이어를 선택하고 '내보내기', '지형물 저장'에서 GeoJSON 형식으로 저장합니다.

ファイル名：workspace/geojson/railway/xxx.geojson（任意のパス）
CRS:EPSG:4326 - WGS 84
保存されたファイルを地図に追加する：OFF

※8 파일분 실시합니다.

3. geojson(노선 데이터)을 mbtiles로 변환

./geojson/railway 아래에 노선 데이터 만 저장한다고 가정하여 다음 명령을 실행하면,
노선 데이터는 railsway.mbtiles에 요약됩니다.
이번에는 Docker에서 tippecanoe를 실행합니다.

docker pull klokantech/tippecanoe
docker run -it --rm -v $PWD:/data klokantech/tippecanoe /bin/bash -c "tippecanoe --force --minimum-zoom=10 -L railway:<(cat /data/json/*.geojson) -o /data/railway.mbtiles"

※ --minimum-zoom을 설정하지 않으면 타일 용량이 500KB를 초과하여 처리할 수 없게 되므로 10으로 설정한다.

4. asia_japan.mbtiles와 railway.mbtiles 결합

asia_japan.mbtiles와 railway.mbtiles를 결합하여 japan.mbtiles를 만듭니다.

docker run -it --rm -v $PWD:/data klokantech/tippecanoe /bin/bash -c "tile-join --force -o /data/japan.mbtiles /data/asia_japan.mbtiles /data/railway.mbtiles"

맵 서버 시작

1. 일본어 폰트 생성

ttf에서 pbf로 변환합니다.
htps : // 기주 b. 코 m / 오 펜마 p 치 s / 펑 ts

사용하는 글꼴
ht tp // // x mp ぅ s ー ぱ. 오 sd. jp/미g x/

2. Tileserver 시작

version: '2'
services:
  tileserver:
    image: klokantech/tileserver-gl:v2.3.1
    ports:
      - "80:80"
    volumes:
      - ".:/data"
    restart: always

일단 Tileserver를 시작합니다.

docker-compose up

방문하면 지도가 표시되지만 아직 방금 만든 데이터는 사용되지 않고,
외형도 수정되지 않았습니다.
http://localhost:8080

3. 로컬 데이터를 사용하도록 변경

style_edit.json이 Tileserver의 폴더에 있으며 그것을 기반으로 편집합니다.
편집 후 style.json으로 저장합니다.
"source": "openmaptiles"→ "source": "mapbox""
""Noto Sans Regular""→ ""migmix1m-regular""
다음 행 대체

"sources": {
  "openmaptiles": {
    "type": "vector",
    "url": "https://free.tilehosting.com/data/v3.json?key={key}"
  }
},
"sprite": "https://rawgit.com/lukasmartinelli/osm-liberty/gh-pages/sprites/osm-liberty",
"glyphs": "https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key={key}",

변환 후 ↓

"sources": {
   "mapbox": {
       "url": "mbtiles://asia_japan.mbtiles",
       "type": "vector"
   }
},
"sprite": "osm-liberty",
"glyphs": "{fontstack}/{range}.pbf",

4. 외형을 Google풍으로

style.json을 다음 사이트에서 편집합니다.
h tps : // 마뿌 t에 k. 기주 b. 이오 / 에와 r

5. Tileserver 재부팅

준비가되면 Tileserver를 다시 시작하고 종료합니다.