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

by Taro Matsuzawa aka. btm

Slide 1

Slide 1 text

国内向けタイルサーバの構築と運用について Taro Matsuzawa (@smellman) 1

Slide 2

Slide 2 text

自己紹介 • 地理空間系プログラマ • OpenStreetMap Foundation Japan メンバー • OSGeo.JP 理事 • 日本UNIXユーザ会理事 • breakcore クラスタ • 来月から社会人学生 2

Slide 3

Slide 3 text

今日のお題 • OpenStreetMapについて • タイルとは • OpenStreetMap Foundation Japan提供の国内向けタイルサーバについて • タイルの利用方法について 3

Slide 4

Slide 4 text

OpenStreetMapについて 4

Slide 5

Slide 5 text

OpenStreetMapについて • 自由な地図のプラットフォーム • 誰でも編集可能 • 単一のデータベースを運用 • そんな「データ」 5

Slide 6

Slide 6 text

データ • OpenStreetMapの主役は「データ」 • 前ページで見せたOpenStreetMapの地図表示はあくまで「データ」をレンダリングした結果 • 地図に書かれてないものも「データ」として入れることができる 6

Slide 7

Slide 7 text

いろいろなデータ • 点字ブロック • 視覚障害者へのナビゲーションに利用 • トイレ情報 • 車椅子対応かどうか • その他なんでも 7

Slide 8

Slide 8 text

自由な地図プラットフォーム • OpenStreetMapのデータは「全て」オープン • 地図データは商用利用も可能 8

Slide 9

Slide 9 text

商用利用可能 • アプリケーションに組み込むことが可能 • 例: maps.me • オフライン地図/経路探索のデータソースとして利用 9

Slide 10

Slide 10 text

誰でも編集可能 • OpenStreetMapのアカウントがあれば誰でも編集可能 10

Slide 11

Slide 11 text

OpenStreetMapの編集エディタ (id editor/josm) データ収集編集保存公開 11

Slide 12

Slide 12 text

いろんな編集の仕方 • survey • 現地調査をした結果を反映する • chair mapping • 許可された画像をエディタ上に表示して「トレース」を行う • その他 • 許可されたデータを投入する 12

Slide 13

Slide 13 text

許可された画像 • トレース元として使える画像は限られる • Bing航空画像などの衛星写真 • 国土地理院地理院地図 2500/25000 • トレースしてはいけないデータソースを使ってはいけない • Google Mapなど 13

Slide 14

Slide 14 text

許可されたデータ • オープンデータだからといってぶっ込めるわけではない • OpenStreetMapのデータはODBLというライセンス • インポートするにはインポートの議論用MLで協議が必要 • 詳しくは https://wiki.openstreetmap.org でインポートと検索 14

Slide 15

Slide 15 text

エディタ • 初心者にはOpenStreetMap.orgについているiD editorがおすすめ • というと斧が飛んでくる • ぶっちゃけJOSMを使いましょう • Javaが必要です • ちなみにJava Web Startも使えますよ！ 15

Slide 16

Slide 16 text

JOSM 初心者から上級者までをカバーする高機能エディタ 16

Slide 17

Slide 17 text

JOSMのすゝめ • Area Selectorで簡単に建物が選べる • 基盤地図情報2500と組み合わせるとかなりさくさく作れる • というかJOSMしか使い方わからん • とにかく使いましょう 17

Slide 18

Slide 18 text

外出先でsurvey • 外出時にも編集やデータの収集をするためにスマートフォン向けアプリを仕込んでおく • iOS: Go Map! • Android: Geopaparazzi • 普段からデータの収集癖をつけておくとよい 18

Slide 19

Slide 19 text

OpenStreetMapの編集エディタ (id editor/josm) データ収集編集保存公開データ収集は結構コツがいる 19

Slide 20

Slide 20 text

タイルとは？ 20

Slide 21

Slide 21 text

タイルの概要 • インターネット上で効率よく地図を提供する仕組み • タイルという単位で地図を配信 • 今回はWeb Mercator Projection のものを例にあげる • それ以外はややこしいので省略 https://a.tile.openstreetmap.org/0/0/0.png 21

Slide 22

Slide 22 text

ズームレベル • 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

Slide 23

Slide 23 text

REST API • タイルアクセスはREST APIによって提供される • {z}/{x}/{y}.{ext} • 静的なアクセスが可能なのでキャッシュしやすい 23

Slide 24

Slide 24 text

ラスタタイル • 画像としてレンダリングされたタイル状のデータ • 通常は256px x 256pxの画像 • 物によってはRetina対応しているケースもある 24

Slide 25

Slide 25 text

ベクタータイル • 地図のベクターデータをタイル状に分割して配信 • レンダリングはWebブラウザや対応するプログラムで行う • クライアント側で地図のデザインを変更したりすることができる 25

Slide 26

Slide 26 text

Mapbox Vector Tile • OSSなベクタタイルの中で最も普及している形式 • Protocol Bu ff erでエンコードされている • 各種ベンダーがサポートをしている • PostGIS: ST_ASMVT関数 26

Slide 27

Slide 27 text

OpenStreetMap Foundation Japan 提供の国内向けサーバについて 27

Slide 28

Slide 28 text

国内向けタイルサーバ • 日本エリアの地図を配信 • ラスタタイル、ベクタタイルの両方をサポート • 竹島問題と北方領土問題に雑に対応している • 標準で３つのスタイルを配信 28

Slide 29

Slide 29 text

環境 • さくらインターネットから「さくらのクラウド」を無償提供してもらって構築 • 20core / 64 GB Memory / 500 GB SSD 29

Slide 30

Slide 30 text

ネットワーク利用 30

Slide 31

Slide 31 text

タイルサーバ基本設計 • OpenMapTilesをベースに構築 • https://openmaptiles.org/ • ちなみにコントリビュータです • 作成されたMBtiles(SQLiteベースのファイルコンテナ)を取り回している 31

Slide 32

Slide 32 text

MBTiles(1) • Mapbox社が作ったタイルをまとめる仕様 • タイルがこんなスキーマで入るようになっている x y z blob ߦ 0 0 0 data ߦ … … … … ߦ 14551 6452 14 data 32

Slide 33

Slide 33 text

MBTiles(2) • MBTilesのy軸は逆に並んでいる • TMS(Tile Map Service)という仕様を参考にしたため • MBTilesを直接触る分には注意が必要 33

Slide 34

Slide 34 text

ベクタタイル配信 • OpenMapTiles自体がベクタタイルを作成するプロジェクト • プログラマブルな地図が作れる • レンダリングに必要なフォントなども配信 34

Slide 35

Slide 35 text

ラスタタイル配信 • ベクタタイルの配信をtileserver-gl で行うことでラスタタイルにも対応 • レンダリングは「さくらのクラウド」上で行っている • ベクタタイルとは違い、スタイルをプログラムから変更はできない • レンダリング結果はキャッシュしている 35

Slide 36

Slide 36 text

ラスタタイルのキャッシュ • Varnish Cacheを入れてキャッシュヒットしなかったものだけをレンダリングするようにしている • レンダリング用に10プロセス用意しているのでキャッシュヒットしなくてもそれなりに高速に配信が可能 36

Slide 37

Slide 37 text

ベクタタイルの配信 Mbtiles (SQLite) フォントあ/A スプライト tileserver-gl nginx tileserver-glは SQLiteの展開とファイルへのプロクシをしているレンダリングはクライアントであ/A スタイル 37

Slide 38

Slide 38 text

ラスタタイルの配信 Mbtiles (SQLite) フォントあ/A スプライト tileserver-gl nginx tileserver-glはスタイルから画像生成を行って varnishでキャッシュしながら返すスタイル varnish クライアントは画像のみ受け取る 38

Slide 39

Slide 39 text

サーバ構築 • サーバ構築にはansibleを利用 • ansible-playbookを実行するとほとんどのものが導入可能 • あとは手動でvector tile(.mvt)を落としてきて、docker- compose up -d するだけ 39

Slide 40

Slide 40 text

セットアップするもの • tileserver-gl + nginx + let’s encrypt • cockpit • モニタリング兼リモートシェル • elastic search + fl uentd + grafana • nginxのログを可視化するのに利用 40

Slide 41

Slide 41 text

タイル作成 • ビルドサーバは別途(実家に)用意 • ./quickstart.sh japan と打って一日待つとできあがる • 毎週土曜日にイベントがあるので、毎週月曜日に作成 • 作成したタイルは動作確認してから、 https:// fi le.smellman.org/ にアップ 41

Slide 42

Slide 42 text

データの差し替え • 今の所マニュアル操作 • wget https:// fi le.smellman.org/japan-{date}.mbtiles • docker-compose down • mv japan-{date}.mbtiles japan.mbtiles • docker-compose up -d 42

Slide 43

Slide 43 text

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

３つの地図スタイル • https://openmaptiles.org/styles/ から３つスタイルを選択して利用 • OSM Bright • Maptiler Basic • Toner • いずれもフォントはM+1を利用するよう変更している 45

Slide 46

Slide 46 text

Slide 47

Slide 47 text

ラスタタイル提供URL • https://tile.openstreetmap.jp/{z}/{x}/{y}.png • OSM Bright ja を配信 • https://tile.openstreetmap.jp/styles/{style}/{z}/{x}/ {y}.png • 各スタイルで配信 47

Slide 48

Slide 48 text

ベクタタイルスタイル • https://tile.openstreetmap.jp からGL Styleを選択して利用 • 具体的な利用方法については後述 48

Slide 49

Slide 49 text

タイルの利用方法 49

Slide 50

Slide 50 text

プログラムで地図タイルを扱う • Web上で使えるライブラリ • Lea fl et, OpenLayers, Mapbox GL JS, MapLibre GL JS • スマートフォン向けライブラリ • MapKit (iOS), Maps SDK for Android, Mapbox GL Native, MapLibre GL Native 50

Slide 51

Slide 51 text

WebのExample https://github.com/smellman/osc2021onlinespring-examples 51

Slide 52

Slide 52 text

Lea fl et • 主にラスタタイルを扱う Javascript ライブラリ • PluginでMapbox Vector Tileも扱えるが微妙 • 初心者向けに簡単に使える https://lea fl etjs.com/ 52

Slide 53

Slide 53 text

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: `© OpenStreetMap contributors`, } ).addTo(map) map.setView([36.104611, 140.084556], 10) zxyのURLを指定する 53

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Lea fl etの注意点 • 座標の指定の仕方が[latitude, longitude]という並びになってる • 普通のライブラリでは[longitude, latitude]の並び • 普通は[y, x]ではなく[x, y] • Google Mapsがこの並びなのでそれに合わせたと思われる 56

Slide 57

Slide 57 text

OpenLayers • 古くからあるJavascriptライブラリ • 多彩なフォーマットに対応 • Mapbox Vector Tileにも一部対応 • 初心者にはとっつきにくいかも https://openlayers.org/ 57

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Mapbox GL JS • Mapbox Vector Tileのリファレンス的実装 • ベクタタイルとラスタタイルの両方をサポート • v1.xまでOSSだった • だった… https://docs.mapbox.com/mapbox-gl-js/api/ 59

Slide 60

Slide 60 text

残念なお知らせ • Mapbox GL JSはv2からOSSではなくなりました • OSSでなくなった上に、「どのタイルを利用しようが」 Mapboxのアカウントが必要かつ「課金対象」です • 無料枠もありますが… 60

Slide 61

Slide 61 text

Maplibre GL JS • Mapbox GL JS 1.xのフォーク • コミュニティによって運用されている • まだ正式リリースはされてないが十分動く • 個人的には移行をおすすめ • あくまで個人の意見です https://github.com/maplibre/maplibre-gl-js 61

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

注意点 • 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

Slide 64

Slide 64 text

MapKit(iOS) • ラスタタイルを利用する場合は、MKTileOverlayを利用 • mapView.addLayerで作ったレイヤを指定すればOK https://developer.apple.com/documentation/mapkit/mktileoverlay 64

Slide 65

Slide 65 text

Maps SDK for Android • UrlTileProviderを実装する • 詳しくは公式ドキュメントを参照 https://developers.google.com/maps/documentation/android-sdk/tileoverlay 65

Slide 66

Slide 66 text

Mapbox GL Native / Maplibre GL Native • Mapbox GL NativeもMapbox GL JS同様以下略なので Maplibre GL Nativeを検討してみましょう • まだ試せてないので省略 66

Slide 67

Slide 67 text

attributionについて • OpenLayersでは省略したが、attributionは必ずつけましょう • スマートフォン向けアプリならUIを作るなど工夫もしましょう • Mapbox GL JS/Maplibre GL JSはTileJSONからattributionを自動的にとってきます • © OpenStreetMap contributors を忘れずに〜 67

Slide 68

Slide 68 text

まとめ 68

Slide 69

Slide 69 text

• OpenStreetMapはデータの集合である • OpenStreetMap Foundation Japanは日本のエリアの地図タイルサーバを運用しています • プログラムで簡単に使えるので試してみて！ 69