Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

OpenSource Conference 2021 Online/Spring 発表資料。

9987516c273a7874b12b742e7aef828f?s=128

Taro Matsuzawa aka. btm

March 06, 2021
Tweet

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=4枚 • 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. 国内向けタイルサーバ • 日本エリアの地図を配信 • ラスタタイル、ベクタタイルの両方をサポート • 竹島問題と北方領土問題に雑に対応している • 標準で3つのスタイルを配信 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
  43. 43

  44. 竹島、北方領土対応 • 竹島及び北方領土を覆いかぶせる ように独自のレイヤーを作成 • 国土数値情報を利用 44

  45. 3つの地図スタイル • https://openmaptiles.org/styles/ から3つスタイルを選択して 利用 • OSM Bright • Maptiler

    Basic • Toner • いずれもフォントはM+1を利用するよう変更している 45
  46. 46

  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