国内向けタイルサーバの構築と運用について

OpenSource Conference 2021 Online/Spring 発表資料。

Transcript

1. 国内向けタイルサーバの構築と運用について Taro Matsuzawa (@smellman) 1
2. 自己紹介 • 地理空間系プログラマ • OpenStreetMap Foundation Japan メ ンバー • OSGeo.JP 理事 • 日本UNIXユーザ会理事 • breakcore クラスタ • 来月から社会人学生 2
3. 今日のお題 • OpenStreetMapについて • タイルとは • OpenStreetMap Foundation Japan提供の国内向けタイルサー バについて • タイルの利用方法について 3
4. OpenStreetMapについて 4
5. OpenStreetMapについて • 自由な地図のプラットフォーム • 誰でも編集可能 • 単一のデータベースを運用 • そんな「データ」 5
6. データ • OpenStreetMapの主役は「データ」 • 前ページで見せたOpenStreetMapの地図表示はあくまで 「データ」をレンダリングした結果 • 地図に書かれてないものも「データ」として入れることができ る 6
7. いろいろなデータ • 点字ブロック • 視覚障害者へのナビゲーションに利用 • トイレ情報 • 車椅子対応かどうか • その他なんでも 7
8. 自由な地図プラットフォーム • OpenStreetMapのデータは「全 て」オープン • 地図データは商用利用も可能 8
9. 商用利用可能 • アプリケーションに組み込むこと が可能 • 例: maps.me • オフライン地図/経路探索の データソースとして利用 9
10. 誰でも編集可能 • OpenStreetMapのアカウントが あれば誰でも編集可能 10
11. OpenStreetMapの編集 エディタ (id editor/josm) データ収集 編集 保存 公開 11
12. いろんな編集の仕方 • survey • 現地調査をした結果を反映する • chair mapping • 許可された画像をエディタ上に表示して「トレース」を行う • その他 • 許可されたデータを投入する 12
13. 許可された画像 • トレース元として使える画像は限られる • Bing航空画像などの衛星写真 • 国土地理院 地理院地図 2500/25000 • トレースしてはいけないデータソースを使ってはいけない • Google Mapなど 13
14. 許可されたデータ • オープンデータだからといってぶっ込めるわけではない • OpenStreetMapのデータはODBLというライセンス • インポートするにはインポートの議論用MLで協議が必要 • 詳しくは https://wiki.openstreetmap.org でインポートと 検索 14
15. エディタ • 初心者にはOpenStreetMap.orgについているiD editorがおすす め • というと斧が飛んでくる • ぶっちゃけJOSMを使いましょう • Javaが必要です • ちなみにJava Web Startも使えますよ！ 15
16. JOSM 初心者から上級者までをカバーす る高機能エディタ 16
17. JOSMのすゝめ • Area Selectorで簡単に建物が選べる • 基盤地図情報2500と組み合わせるとかなりさくさく作れる • というかJOSMしか使い方わからん • とにかく使いましょう 17
18. 外出先でsurvey • 外出時にも編集やデータの収集をするためにスマートフォン向 けアプリを仕込んでおく • iOS: Go Map! • Android: Geopaparazzi • 普段からデータの収集癖をつけておくとよい 18
19. OpenStreetMapの編集 エディタ (id editor/josm) データ収集 編集 保存 公開 データ収集は 結構コツがいる 19
20. タイルとは？ 20
21. タイルの概要 • インターネット上で効率よく地図 を提供する仕組み • タイルという単位で地図を配信 • 今回はWeb Mercator Projection のものを例にあげる • それ以外はややこしいので省略 https://a.tile.openstreetmap.org/0/0/0.png 21
22. ズームレベル • Zoom Level = 0で全世界を表現 • 185度付近で切られている • Zoom Level = 0 で20x20=1枚 • Zoom Level = 1 で21x21=４枚 • Zoom Level = 16 で 216x216枚 https://maps.gsi.go.jp/development/siyou.html 22
23. REST API • タイルアクセスはREST APIによっ て提供される • {z}/{x}/{y}.{ext} • 静的なアクセスが可能なので キャッシュしやすい 23
24. ラスタタイル • 画像としてレンダリングされたタ イル状のデータ • 通常は256px x 256pxの画像 • 物によってはRetina対応してい るケースもある 24
25. ベクタータイル • 地図のベクターデータをタイル状 に分割して配信 • レンダリングはWebブラウザや対 応するプログラムで行う • クライアント側で地図のデザイン を変更したりすることができる 25
26. Mapbox Vector Tile • OSSなベクタタイルの中で最も普及している形式 • Protocol Bu ff erでエンコードされている • 各種ベンダーがサポートをしている • PostGIS: ST_ASMVT関数 26
27. OpenStreetMap Foundation Japan 提供の国内向けサーバについて 27
28. 国内向けタイルサーバ • 日本エリアの地図を配信 • ラスタタイル、ベクタタイルの両方をサポート • 竹島問題と北方領土問題に雑に対応している • 標準で３つのスタイルを配信 28
29. 環境 • さくらインターネットから「さく らのクラウド」を無償提供しても らって構築 • 20core / 64 GB Memory / 500 GB SSD 29
30. ネットワーク利用 30
31. タイルサーバ基本設計 • OpenMapTilesをベースに構築 • https://openmaptiles.org/ • ちなみにコントリビュータです • 作成されたMBtiles(SQLiteベースのファイルコンテナ)を取り 回している 31
32. MBTiles(1) • Mapbox社が作ったタイルをまとめる仕様 • タイルがこんなスキーマで入るようになっている x y z blob ߦ 0 0 0 data ߦ … … … … ߦ 14551 6452 14 data 32
33. MBTiles(2) • MBTilesのy軸は逆に並んでいる • TMS(Tile Map Service)という仕様を参考にしたため • MBTilesを直接触る分には注意が必要 33
34. ベクタタイル配信 • OpenMapTiles自体がベクタタイ ルを作成するプロジェクト • プログラマブルな地図が作れる • レンダリングに必要なフォントな ども配信 34
35. ラスタタイル配信 • ベクタタイルの配信をtileserver-gl で行うことでラスタタイルにも対応 • レンダリングは「さくらのクラウ ド」上で行っている • ベクタタイルとは違い、スタイルを プログラムから変更はできない • レンダリング結果はキャッシュして いる 35
36. ラスタタイルのキャッシュ • Varnish Cacheを入れてキャッシュヒットしなかったものだけ をレンダリングするようにしている • レンダリング用に10プロセス用意しているのでキャッシュヒッ トしなくてもそれなりに高速に配信が可能 36
37. ベクタタイルの配信 Mbtiles (SQLite) フォント あ/A スプライト tileserver-gl nginx tileserver-glは SQLiteの展開と ファイルへのプロクシをしている レンダリングは クライアントで あ/A スタイル 37
38. ラスタタイルの配信 Mbtiles (SQLite) フォント あ/A スプライト tileserver-gl nginx tileserver-glは スタイルから画像生成を行って varnishでキャッシュ しながら返す スタイル varnish クライアントは 画像のみ受け取る 38
39. サーバ構築 • サーバ構築にはansibleを利用 • ansible-playbookを実行するとほとんどのものが導入可能 • あとは手動でvector tile(.mvt)を落としてきて、docker- compose up -d するだけ 39
40. セットアップするもの • tileserver-gl + nginx + let’s encrypt • cockpit • モニタリング兼リモートシェル • elastic search + fl uentd + grafana • nginxのログを可視化するのに利用 40
41. タイル作成 • ビルドサーバは別途(実家に)用意 • ./quickstart.sh japan と打って一日待つとできあがる • 毎週土曜日にイベントがあるので、毎週月曜日に作成 • 作成したタイルは動作確認してから、 https:// fi le.smellman.org/ にアップ 41
42. データの差し替え • 今の所マニュアル操作 • wget https:// fi le.smellman.org/japan-{date}.mbtiles • docker-compose down • mv japan-{date}.mbtiles japan.mbtiles • docker-compose up -d 42
44. 竹島、北方領土対応 • 竹島及び北方領土を覆いかぶせる ように独自のレイヤーを作成 • 国土数値情報を利用 44
45. ３つの地図スタイル • https://openmaptiles.org/styles/ から３つスタイルを選択して 利用 • OSM Bright • Maptiler Basic • Toner • いずれもフォントはM+1を利用するよう変更している 45
47. ラスタタイル提供URL • https://tile.openstreetmap.jp/{z}/{x}/{y}.png • OSM Bright ja を配信 • https://tile.openstreetmap.jp/styles/{style}/{z}/{x}/ {y}.png • 各スタイルで配信 47
48. ベクタタイルスタイル • https://tile.openstreetmap.jp か らGL Styleを選択して利用 • 具体的な利用方法については後 述 48
49. タイルの利用方法 49
50. プログラムで地図タイルを扱う • Web上で使えるライブラリ • Lea fl et, OpenLayers, Mapbox GL JS, MapLibre GL JS • スマートフォン向けライブラリ • MapKit (iOS), Maps SDK for Android, Mapbox GL Native, MapLibre GL Native 50
51. WebのExample https://github.com/smellman/osc2021onlinespring-examples 51
52. Lea fl et • 主にラスタタイルを扱う Javascript ライブラリ • PluginでMapbox Vector Tileも 扱えるが微妙 • 初心者向けに簡単に使える https://lea fl etjs.com/ 52
53. Lea fl et example import L from 'lea fl et' import 'lea fl et/dist/lea fl et.css' import './index.css' const map = new L.Map('mapid') L.tileLayer( 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/{z}/{x}/{y}.png', { maxZoom: 18, attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`, } ).addTo(map) map.setView([36.104611, 140.084556], 10) zxyのURLを指定する 53
54. Lea fl et example import L from 'lea fl et' import 'lea fl et/dist/lea fl et.css' import './index.css' const map = new L.Map('mapid') L.tileLayer( 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/{z}/{x}/{y}.png', { maxZoom: 18, attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`, } ).addTo(map) map.setView([36.104611, 140.084556], 10) attributionは必ず表記する 超 重要 54
55. Lea fl et example import L from 'lea fl et' import 'lea fl et/dist/lea fl et.css' import './index.css' const map = new L.Map('mapid') L.tileLayer( 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/{z}/{x}/{y}.png', { maxZoom: 18, attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`, } ).addTo(map) map.setView([36.104611, 140.084556], 10) 初期表示の座標とズームレベルを指定 55
56. Lea fl etの注意点 • 座標の指定の仕方が[latitude, longitude]という並びになって る • 普通のライブラリでは[longitude, latitude]の並び • 普通は[y, x]ではなく[x, y] • Google Mapsがこの並びなのでそれに合わせたと思われる 56
57. OpenLayers • 古くからあるJavascriptライブラ リ • 多彩なフォーマットに対応 • Mapbox Vector Tileにも一部対 応 • 初心者にはとっつきにくいかも https://openlayers.org/ 57
58. OpenLayers example import './index.css' import 'ol/ol.css' import { Map, View } from 'ol' import TileLayer from 'ol/layer/Tile' import XYZ from 'ol/source/XYZ' import proj4 from 'proj4' const from = 'EPSG:4326' const to = 'EPSG:3857' const center = proj4(from, to, [140.084556, 36.104611]) new Map({ target: 'map', layers: [ new TileLayer({ source: new XYZ({ url: 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/{z}/{x}/{y}.png' }) }) ], view: new View({ center: center, zoom: 10 }) }) EPSG:3857へ 変換が必要 58
59. Mapbox GL JS • Mapbox Vector Tileのリファレン ス的実装 • ベクタタイルとラスタタイルの 両方をサポート • v1.xまでOSSだった • だった… https://docs.mapbox.com/mapbox-gl-js/api/ 59
60. 残念なお知らせ • Mapbox GL JSはv2からOSSではなくなりました • OSSでなくなった上に、「どのタイルを利用しようが」 Mapboxのアカウントが必要かつ「課金対象」です • 無料枠もありますが… 60
61. Maplibre GL JS • Mapbox GL JS 1.xのフォーク • コミュニティによって運用されてい る • まだ正式リリースはされてないが十 分動く • 個人的には移行をおすすめ • あくまで個人の意見です https://github.com/maplibre/maplibre-gl-js 61
62. MapLibre example import './index.css' import 'maplibre-gl/dist/maplibre-gl.css' import { Map } from 'maplibre-gl' new Map({ container: 'mapid', style: 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/style.json', center: [140.084556, 36.104611], zoom: 10, }) スタイルのURLを 指定する 62
63. 注意点 • Mapbox GL JS及びMapLibre GL JSをparcelで使う場合browserlist を指定する必要がある • 基本的に右の設定をpackage.json に入れるだけでOK "browserslist": { "production": [ "last 3 chrome versions", "last 3 fi refox versions", "last 3 safari versions" ], "development": [ "last 1 chrome version", "last 1 fi refox version", "last 1 safari version" ] }, 63
64. MapKit(iOS) • ラスタタイルを利用する場合は、MKTileOverlayを利用 • mapView.addLayerで作ったレイヤを指定すればOK https://developer.apple.com/documentation/mapkit/mktileoverlay 64
65. Maps SDK for Android • UrlTileProviderを実装する • 詳しくは公式ドキュメントを参照 https://developers.google.com/maps/documentation/android-sdk/tileoverlay 65
66. Mapbox GL Native / Maplibre GL Native • Mapbox GL NativeもMapbox GL JS同様以下略なので Maplibre GL Nativeを検討してみましょう • まだ試せてないので省略 66
67. attributionについて • OpenLayersでは省略したが、attributionは必ずつけましょう • スマートフォン向けアプリならUIを作るなど工夫もしましょ う • Mapbox GL JS/Maplibre GL JSはTileJSONからattributionを 自動的にとってきます • © OpenStreetMap contributors を忘れずに〜 67
68. まとめ 68
69. • OpenStreetMapはデータの集合である • OpenStreetMap Foundation Japanは日本のエリアの地図タイ ルサーバを運用しています • プログラムで簡単に使えるので試してみて！ 69
70. © OpenStreetMap contributors 70