はじめに
地図サービスで有名なものとしてGoogleマップがありますが、他にも様々なサービスがあります。
その中でも自由度が高いOpenStreetMapのデータを使いGoogleマップ風にしてみましたので、その方法について解説します。
やったこと
必要なソフトウェア
- QGIS
地図データを編集するために利用します。
QGISダウンロード - tippecanoe
複数の地図データを結合させるために利用します。
必要なデータ
地図のもととなるデータをダウンロードします。
-
OpenMapTilesから地図のベクターデータをダウンロード
https://openmaptiles.com/downloads/tileset/osm/asia/japan/ -
OSMデータダウンロード
以下のURLでSub Regionの.shp.zipデータを8ファイルダウンロード
https://download.geofabrik.de/asia/japan.html
※路線名がOpenMapTilesに入っていないため。
マップデータ作成
OpenMapTilesデータから作成する方法
asia_japan.mbtilesをベースに地図データを作成します。
1. OSMデータから路線情報取得
ダウンロードしたファイルはzipのままQGISで読み込みます。
「gis.osm_railways_free_1.shp」を選択してレイヤーに追加し、「Filter」メニューを選択して以下の式を入力します。
"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に変換する。
https://github.com/openmaptiles/fonts
利用するフォント
http://mix-mplus-ipa.osdn.jp/migmix/
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を以下のサイトで編集します。
https://maputnik.github.io/editor
5. Tileserverを再起動
準備ができたらTileserverを再起動して終了です。