Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
OpenStreetMap Community向けタイルサーバ構築及びそもそもタイルサーバって何?
Search
Taro Matsuzawa aka. btm
October 24, 2020
Technology
0
1.1k
OpenStreetMap Community向けタイルサーバ構築及びそもそもタイルサーバって何?
Open Source Conference 2020 Fall/Online の資料です。
Taro Matsuzawa aka. btm
October 24, 2020
Tweet
Share
More Decks by Taro Matsuzawa aka. btm
See All by Taro Matsuzawa aka. btm
OpenLayers ext TypeScript declarationの開発
smellman
0
470
平成生まれのためのUNIX&IT歴 史講座 ~番外編~
smellman
2
440
掛川城の点群データをiTownsで表示しよう
smellman
0
230
そのJavascript、全部TypeScriptにしちゃえ
smellman
1
180
大容量SSDとOpenStreetMap
smellman
0
100
MapLibreとtile.openstretmap.jpで始めるベクトル地図プログラミング
smellman
1
520
国内向けタイルサーバの構築と運用について
smellman
0
1k
Python/Javascriptで読む点群
smellman
1
4.8k
日本のCommunity向け タイルサーバの現状
smellman
0
2.6k
Other Decks in Technology
See All in Technology
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
740
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
210
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
Featured
See All Featured
For a Future-Friendly Web
brad_frost
175
9.4k
Documentation Writing (for coders)
carmenintech
65
4.4k
Music & Morning Musume
bryan
46
6.1k
Scaling GitHub
holman
458
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Building an army of robots
kneath
302
42k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Cult of Friendly URLs
andyhume
78
6k
Done Done
chrislema
181
16k
Transcript
OSC2020 Online/Fall 松澤太郎(タイル三兄弟) OpenStreetMap Community 向けタイルサーバ構築及びそも そもタイルサーバって何?
自己紹介
タイル三兄弟の一味 Twitter: @smellman 日本UNIXユーザ会理事、OSGeo日本支部理事、OpenStreetMap Foundation Japanメン バー React NativeとかRuby on
RailsとかPythonとかやってる地理系プログラマー ブレイクコアクラスタ 自己紹介
デモ OpenStreetMapとは Community向けサーバについて そもそもタイルサーバとは? 新しいCommunity向けサーバ 地図のイベント(時間つぶしに) 今日のお題
デモ
https://osmfj.github.io/geoweek_and_weekend_2020/ 今回作ってるサーバでできることをイメージするため、イベントページにデモを作りました 音楽がなるので注意してね★ デモ
OpenStreetMapとは
世界中のマッパーによる地図データの集合 世界中の道路や建物、飲食店の営業時間、災害情報、トイレの位置、バス路線、ベンチの位置、 その他「なにもかも」を入れている 世界単位の地理データを「単一の」データベースに保存する仕組み 世界単位を「Planet」と言う OpenStreetMapとは
node, way, relationの三種類のXMLからなるデータで表現 wayが「閉じている」とPOLYGONになる 子要素のtagがkey/valueとなる仕組み <tag k="highway" v="traffic_signals"/> keyを「なんでも」指定できるため、「なにもかも」入れることができる データ構造
例 <?xml version="1.0" encoding="UTF-8"?> <osm> <node id=“295400402" lat="35.6769535" lon="139.7126026"> <tag
k="highway" v="traffic_signals"/> <tag k="name" v="観音橋"/> <tag k="name:en" v="Kannon Bridge"/> </node> ... <way id="41857309"> <nd ref="517548467"/> <nd ref="2296561254"/> ... <tag k="highway" v="tertiary"/> <tag k="lanes" v="1"/> <tag k="maxspeed" v=“30"/> ... </way> <relation id="5596700"> ... </relation> </osm> : ಡΈ͘͢͢ΔͨΊ͔ͳΓ؆ུԽ͍ͯ͠·͢
「なにもかも」入れてもいいけど、ルールはある ルール自体はOpenStreetMapのWikiを参照 まずはここから! https://wiki.openstreetmap.org/wiki/Contribute_map_data XMLはデータ量が大きくなるので大きなデータはProtocol Bufferを使うのが主流 データ構造の補足
巨大なデータベースがOpenStreetMapの本質 見えている地図はその一部でしかない 営業時間やバス路線は可視化されないけどデータとしては入れられる データベースを参照すればサービスを作ることができる! とはいえ、今日は見える方のお話です おおまかにいうと
ৄ͍͜͠ͱ͜ͷຊʹԿނ͔ॻ͍ͯ͋Γ·͢ https://book.mynavi.jp/ec/products/detail/id=92636
Community 向け地図サーバ
OpenStreetMapの国内向けサーバ GMO お名前.com VPSを提供してもらっている 日本の単位でアップデートをかけている 日本以外の地域は国際サーバにProxyをしている 竹島対策なんかもしている tile.openstreetmap.jp
インフラがかなり古い Ubuntu 12.04 地図のレンダリングスタイルも古いまま CartoCSSに移行できなかった ラスタタイルのみしか提供ができていない 老朽化
そもそもタイルサーバとは
インターネット上で「効率よく」地図を配信する仕組みの「ひとつ」 地図画像はタイルという単位で切り取られている ズームレベルが上がると縦横が倍の精度になる ズームレベル0=全世界 タイルサーバ http://a.tile.openstreetmap.org/0/0/0.png
Zoomレベル=0を地球全体と定義 実際には経度 185 度あたりをカット Zoomレベルが一つ増えると解像度が 2x2 = 4倍になる Zoomレベル=2 =
22 * 22 = 4 * 4 = 16 Zoomレベル=18 = 218 * 218 = 68,719,476,736 Zoomレベルとタイル ग़య: ࠃཧӃɹཧӃλΠϧʹ͍ͭͯ https://maps.gsi.go.jp/development/siyou.html
地図タイルに特化した座標系(Web Mercator) Google Mapsで利用されたことからかつてEPSG:900913と呼ばれていた 900913 = Google 一般的に知られている緯度経度は世界測地系(EPSG:4326)を利用 タイルと違う座標系が使われるのに注意 座標系:
EPSG 3857
地図データをレンダリングして画像(ラスタ)にしたデータ 縦256px横256pxの長方形の画像がベース Retina対応で512pxや766pxも可能
[email protected]
とか
[email protected]
とかいうファイル名になる いずれにせよ256pxが基準 ラスタタイル IUUQTNBQTHTJHPKQYZ[TUEQOH
ラスタタイルの仕組み(例) NPE NBQOJL 4UZMF 9.- 3&45 (&5 ը૾ mapnikがデータベースとスタイルを読み 地図画像をレンダリングする
基本的に人間が「見る」ものが必要 「見る」データにするためにスタイリングをする データを提供する例もある RGB値=標高値など ラスタタイルの特徴 IUUQTDZCFSKBQBOEBUBHTJHPKQYZ[EFN@QOHQOH
スタイルを当てる単位がサーバ単位になる URLごとにスタイルを変更する仕組みは作れるがコストが高い CDNに乗っける場合など問題になる サーバ側にレンダリングのコストがかかる=CPU負荷がかかる 通信量も多い ラスタタイルの問題点
スタイルに対するコストは 結構問題
ベクターデータを提供するタイル ベクターデータはスタイルデータを持たない クライアントがスタイルデータとともにレンダリングをする ベクターデータ自体プログラムで制御可能 3Dの表示なども可能になる ベクタータイル
ベクタータイルの仕組み スタイルなど .BQCPY 7FDUPS 5JMF 8FCαʔό 8FCαʔό レンダリングは クライアントで行う
Mapbox社が提供しているベクタータイルの仕様 現在のデファクト・スタンダード Protocol Bufferに地図データを格納 Web Mercatorが前提 Mapbox Vector Tile
オーバーズームという概念がある データはzoom 14で、スタイルでzoom 18をレンダリングするという仕組み ラスタータイルに比べてデータ量が大きくても、ズームをしていくと結果として「通信 量」が減る スタイリングをクライアント側でやるので配信のコスト自体は減る ただし、ベクタータイルのみを配信するのは現実的ではない ベクタータイルの利点
ベクタータイルとラスタータイルの両方を配信 ラスタータイルのデータソースとしてベクタータイルを利用 tileserver-glというソフトウェアで上記の仕組みをサポートできる 現実的な対応
新しいコミュニティ向け サーバ
さくらインターネットから「さくらのクラウド」月10万円分提供してもらっている 2018年から研究を開始 現在は OSM Japan コミュニティサーバは移行済 tile2.openstreetmap.jp が現在構築中 今日はこれの戦いがメイン 新しいインフラ
ベクタータイルへのFirst step ダイレクト配信へのチャレンジ 挫折 新しい希望 現在の体制 戦いの歴史
元々仕事で「さくらのVPS」とtileserver-glを使ったベクター/ラスタタイル配信は実現済 その構成をそのまま持ってこれた nginx (フロントエンド) Varnish Cache (キャッシュ) tileserver-gl ベクタータイルのFirst Step
日本のエリアだけ作成するのであれば問題はない tile.openstreetmap.jp がProxyとはいえ世界中を対応しているので、ベクタータイルでも やりたい Planet(世界中)をインポートするには最低1TBのストレージが必要 PostgreSQLだけで600GB消費! やりたいこと
だったら、インポートしたベクタータイルをPostgreSQLから直接配信すればいいのでは? PostServeというプログラムがOpenMapTilesにあってそれがそのまま使えそう Varnish Cache挟めばよくね? PostgreSQLのデータを差分更新すればよくね? やってみた ダイレクト配信へのチャレンジ
構成図 Varnish PostgreSQL Postserve Varnish tileserver-gl tileserver-gl tileserver-gl vector.openstreetmap.jp tile2.openstreetmap.jp
nginx OpenMapTiles ࠩߋ৽
1TB+差分更新をしようとしたら差分更新が間に合わないというオチが発生 差分更新がどんどん遅れる 差分更新は日本の単位でもギリギリ では、PostgreSQLを2系統用意してスイッチすればいいのでは? 最低2TB必要 挫折(1)
構成図 Varnish PostgreSQL Postserve Varnish tileserver-gl tileserver-gl tileserver-gl vector.openstreetmap.jp tile2.openstreetmap.jp
nginx OpenMapTiles PostgreSQL Postserve Πϯϙʔτ
2TBにしたらその分マシンのスペックが落ちるので破滅 2TB=66,000円 インポートも終わらんようなスペックになって壊滅した 挫折(2)
Varnish + PostServe もおかしい動きをする PostServeが変な動きをしていたが、それは途中でupstreamで修正された そもそもスペックがラスタ配信にとって厳しすぎる その他の挫折
試行錯誤しているうちにOpenMapTilesのコントリビュータに 夜中3時の打ち合わせとかも出るようになった 気づいたらPostGISとpgRoutingのDockerにパッチ書いてた pgRoutingの方はメンテナーになっていた(いや、社内だけどな!) がんばったんだよ
そもそも配信とタイル作成はサーバを分けるべき では、タイル作成サーバをどうやって調達するべきか… 僕が行き着いた先は… 新しい希望
AMD Ryzen
Ryzen 5 3400G + Deskmini 300A + 32GB Memory +
Intel m2 SSD 1TB 実家に置きました 電源をスマートスピーカー経由で操作可能にした Raspberry Pi 4から「自宅」にVPNを貼り、外出先から「自宅」経由で「実家」のサーバにロ グインできるようにした 誤実家サーバ(何 サーバ組みました(てへ
PostgreSQL 9.6, 10, 11, 12, 13(リリース前)をテスト postgresql.conf を読み込むように調整 Mapnikベースのtileliveから、OpenMapTiles Tools
5.3で導入予定のpgqueryに変更 OpenMapTilesの最後のタスクであるベクタータイル作成が2倍以上パフォーマンスアップ チューニング
tile2.openstreetmap.jp Spec: 20Core CPU / 64GB Memory / 500GB SSD
現在は日本地域に対応、Planet単位は現在実家サーバで構築中 nginxのログをfluentd+elasticsearch+grafanaで可視化してる 現在の体制
構成図 Varnish tileserver-gl tileserver-gl tileserver-gl tile2.openstreetmap.jp nginx OpenMapTiles ࣮Ոαʔό
࣮Ոαʔόͷਐḿ
ՄࢹԽ
Planetの構築が無事できたら正式公開 今ビルドしてるのが失敗するとまた一ヶ月ぐらいスケジュールが遅れます(てへ 構築手順などは公開予定 Planetのタイル自体も公開する予定なので自分たちでタイルサーバ作れますよ ログとかはさくらインターネットさんに共有しようと思っている 正式公開
というわけで、ここでQA
地図のイベント
FOSS4G Conferenceは地図のOSSのイベントとして世界各地で行われている 日本では東京、関西、北海道、東海、新潟などで開催されている OSSなプログラムの紹介やサービスの紹介から政府系の発表など、様々な発表がある 昨年のFOSS4G Niigataでは政府CIO補佐官が基調講演 FOSS4G Conference
OpenStreetMapのマッパーやエンジニアの祭典 2017年に国際カンファレンスを会津若松に誘致 日本では1〜2年単位で開催 去年はお休み State of the MAP
コロナのせいでオンラインへ 開催日を調整して、State of the Map Japan 2020 と FOSS4G 2020
JAPAN Online を 2020年11月7日、8日の2日連続で開催 今年のイベント
202011݄7 202011݄8 ޕલ FOSS4G JP 2020 Online νϡʔτϦΞϧσΠ ޕޙ State
of the Map FOSS4G JP 2020 Online ίΞσΠ ࠙ձ λΠϜεέδϡʔϧ
State of the Map Japan 2020 https://stateofthemap.jp/2020/ FOSS4G 2020 Japan
Online https://www.osgeo.jp/events/foss4g-2020/foss4g-2020-japan-online 参加者募集
OpenStreetMap JP https://osm.jp OSGeo日本支部 https://www.osgeo.jp コミュニティサイト