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
マピオン、ベクタータイルはじめました〜京都編〜
Search
One compath
October 15, 2017
Technology
9
2.1k
マピオン、ベクタータイルはじめました〜京都編〜
FOSS4G 2017 KYOTO.KANSAI の発表資料です。
One compath
October 15, 2017
Tweet
Share
More Decks by One compath
See All by One compath
社内の制度を使って新規事業を⽴ち上げてみた話 OCEM#3
mapion
0
170
新規事業のアプリ、Flutterで作ってます〜U-ROUTEのポイ活対応編〜 OCEM#3
mapion
0
190
ウォーキングアプリ「aruku&」ってどうやって作ってるの? OCEM#3
mapion
0
180
ONE COMPATH/ワンコンパス Company Deck For Engineer(会社紹介資料)
mapion
0
6.6k
ONE COMPATHの地図の開発技術~入門編~ OCEM #2
mapion
0
210
脱レガシー! Aurora PostgreSQLに移行してみた OCEM #2
mapion
1
870
エンジニアなので「技術」で仕事を効率化してみた ~Slack連携でチームの生産性が向上~ OCEM#2
mapion
0
200
20221112_FOSS4G2022Online.pdf
mapion
0
1.6k
ONE COMPATH/ワンコンパス Company Deck(会社資料)
mapion
0
340
Other Decks in Technology
See All in Technology
AI開発ツールCreateがAnythingになったよ
tendasato
0
110
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
11
920
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
800
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
200
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
270
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
230
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.3k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
190
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
280
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
1.1k
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
8.8k
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.3k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
A Modern Web Designer's Workflow
chriscoyier
696
190k
For a Future-Friendly Web
brad_frost
180
9.9k
GitHub's CSS Performance
jonrohan
1032
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
A Tale of Four Properties
chriscoyier
160
23k
How to Ace a Technical Interview
jacobian
279
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Bash Introduction
62gerente
615
210k
Agile that works and the tools we love
rasmusluckow
330
21k
Transcript
マピオン ベクタータイル はじめました 株式会社マピオン 清水珠里 FOSS4G 2017 KYOTO.KANSAI
ਗ਼ਫचཬʢ͠Έͣ͡ΎΓʣ ৽ଔͰෆಈ࢈ձࣾʹೖࣾ ɹ→͍Ζ͍Ζ͋ͬͯ̍Ͱୀ৬ SIerʹస৬ ɹ→͍Ζ͍Ζ͋ͬͯ̔Ͱୀ৬ גࣜձࣾϚϐΦϯೖࣾ̐ ओʹਤλΠϧͷੜͱ৴Λ୲ ࣗݾհ
マピオンとは
1996ʹຊॳͷਤΠϯλʔωοταʔϏεΛ։࢝
໊শɹɹɹ ɿ גࣜձࣾϚϐΦϯ ઃཱɹɹɹ ɿ 1997 1݄ 20 ࢿຊۚɹɹ ɿ
6ԯԁ ैۀһ ɿ 97໊ʢ20176݄ݱࡏʣ גओɹɹɹ ɿ ತ൛ҹ ʢ100%ʣ εϩʔΨϯ ɿʮίίϩɺΧϥμɺಈ͔͢ϚϐΦϯʯ ࢀՃஂମ ɿOSGeoࡒஂຊࢧ෦ ๏ਓձһ Ԋֵ 20पΛܴ͑·ͨ͠ʂ
ࣄۀ༰
マピオン ベクタータイル はじめてました
2016/10 ϥϘαΠτʹͯ ϚϐΦϯϕΫλʔެ։
า͚ͩ͘ͰϓϨθϯτ͕ Β͑ΔɺҰาઌߦ͘Υʔ ΩϯάΞϓϦ 2016/11 aruku&ʢ͋Δ͘ͱʣϦϦʔε
ܙํרΛ৯Δํ͕͔֯ ΔɺʹҰ͞ΕΔΞ ϓϦ 2017/1 ܙํϚϐΦϯ(iOS൛)ͷਤΛ ϥελʔ͔ΒϕΫλʔʹมߋ
2017/9 ϥϘαΠτʹOSMՃ
ベクタータイルを 描画するしくみ
ϕΫλʔλΠϧ εϓϥΠτ ϑΝΠϧ ϑΥϯτ ϑΝΠϧ ελΠϧ ϑΝΠϧ ϕΫλʔλΠϧʹɾઢɾ໘ͷͷσʔλͱ ଐੑใ͕ೖ͍ͬͯΔ͚ͩͳͷͰɺ͝ͱͷද ࣔͷ༗ແɺσβΠϯɺϑΥϯτɺΞΠίϯͳͲ
ελΠϧϑΝΠϧͰઃఆ͢Δ ϨϯμϦϯά
ݱࡏͷϚϐΦϯͷߏ ϕΫλʔλΠϧ Mapbox Vector Tile ϨϯμϦϯά Mapbox GL Native ελΠϧϑΝΠϧ
Mapbox Style
ɾϕΫλʔਤΛෳͷϓϥοτϑΥʔϜ্ ͷωΠςΟϒΞϓϦέʔγϣϯʹຒΊࠐΉͨ ΊͷϥΠϒϥϦ ɹJS൛ɺUnity൛ผ్༻ҙ͞Ε͍ͯΔ ɾΦʔϓϯιʔεɺBSDϥΠηϯε ɾ։ൃ͕͔͞ΜͰɺͲΜͲΜόʔδϣϯΞο ϓ͞Ε͍ͯΔʢલόʔδϣϯͱޓੑ͕ͳ͍ ͜ͱଟ͍ͨΊɺҙ͕ඞཁʣ .BQCPY(-/BUJWFͱ
ɾMapboxͷਤΛදࣔͤ͞ΔʹΞΫηε τʔΫϯͷൃߦ͕ඞཁ ɹαʔυύʔςΟͷਤΛදࣔ͢Δ߹ ΞΫηετʔΫϯෆཁ ϚϐΦϯͰΧελϚΠζΛߦ͍ɺ ΞΫηετʔΫϯʹରԠ͍ͯ͠Δ .BQCPY(-/BUJWFͱ
Mapbox GL で 地図を描画するために 必要なもの
ɾϕΫλʔλΠϧ ɹʢMapbox Vector Tileʣ ɾελΠϧϑΝΠϧ ɹʢMapbox Styleʣ ɾεϓϥΠτϑΝΠϧ ɾϑΥϯτϑΝΠϧ
ɾϕΫλʔλΠϧ ɹʢMapbox Vector Tileʣ ɾελΠϧϑΝΠϧ ɹʢMapbox Styleʣ ɾεϓϥΠτϑΝΠϧ ɾϑΥϯτϑΝΠϧ
ϕΫλʔλΠϧ ʢMapbox Vector Tileʣ ɾMapbox͕ఆΊͨϕΫλʔλΠϧͷΦʔϓ ϯͳ༷ ɾProtocol Buffers ܗࣜ ɾGeometryͷ૬ର࠲ඪΛΤϯίʔυͨ͠
ͷͱଐੑใͷू·Γ
sample MBZFST\ OBNFYYYY GFBUVSFT\ UBHT UBHT UZQF10-:(0/ HFPNFUSZ HFPNFUSZ ʜ
^ LFZTDPEF WBMVFT\ JOU@WBMVF ^ WFSTJPO ^ ʜ Geometryͷ ૬ର࠲ඪ ଐੑใ
ɾϕΫλʔλΠϧ ɹʢMapbox Vector Tileʣ ɾελΠϧϑΝΠϧ ɹʢMapbox Styleʣ ɾεϓϥΠτϑΝΠϧ ɾϑΥϯτϑΝΠϧ
ελΠϧϑΝΠϧ ʢMapbox Styleʣ ɾਤͷσβΠϯΛܾΊΔϑΝΠϧ ɾjsonܗࣜ ɾϚϐΦϯͰ MVT Styler Λͬͯɺ࡞/ ฤूΛߦ͍ͬͯΔ
ʜ MBZFST< \ JETBNQMF
UZQFpMM TPVSDFTBNQMF TPVSDFMBZFSTBNQMF pMUFS< DPEF > QBJOU\ pMMDPMPSCF ^ ^ > ʜ sample
શGUIͷϕΫλʔλΠϧελΠϧΤσΟλ MVT Styler
MVT Styler ɾϦΞϧλΠϜͰσβΠϯͷมߋ ͕֬ೝͰ͖Δ ɾγϯϓϧͳػೳͰɺײతʹૢ ࡞Ͱ͖Δ ɾਤ্ͰϨΠϠʔΛ֬ೝͰ͖Δ ͷͰศར ɾϚϐΦϯͰΧελϚΠζͯ͠ɺ ϑΝΠϧग़ྗ
/ ը૾ग़ྗͳͲͷػ ೳΛՃ͍ͯ͠Δ
MVT Styler Maputnik
ɾϕΫλʔλΠϧ ɹʢMapbox Vector Tileʣ ɾελΠϧϑΝΠϧ ɹʢMapbox Styleʣ ɾεϓϥΠτϑΝΠϧ ɾϑΥϯτϑΝΠϧ
εϓϥΠτϑΝΠϧ ɾਤ্ͷΞΠίϯΛ·ͱΊͨεϓϥΠτϑΝΠϧ ɾpngϑΝΠϧͱjsonϑΝΠϧͰߏ͞ΕΔ ɾMVT Styler Ͱ࡞Ͱ͖Δ
\lTBNQMFTWH\XJEUI IFJHIU Y Z QJYFM3BUJP^ lTBNQMFTWH\XJEUI IFJHIU
Y Z QJYFM3BUJP^ ʜ KTPO QOH sample
ɾϕΫλʔλΠϧ ɹʢMapbox Vector Tileʣ ɾελΠϧϑΝΠϧ ɹʢMapbox Styleʣ ɾεϓϥΠτϑΝΠϧ ɾϑΥϯτϑΝΠϧ
ϑΥϯτϑΝΠϧ ɾϑΥϯτϑΝΠϧʢttfͳͲʣ͔ΒglyphΛ 256୯ҐͰׂͯͦ͠ΕΛpbfԽͨ͠ͷ ɹttfϑΝΠϧ ɹ→ 0-255.pbf, 256-511.pbf ... 256ݸ ɾMVT
Styler Ͱ࡞Ͱ͖Δ
マピオンの ベクタータイルの 生成/配信のしくみ
ϨϯμϦϯά ɹਤσβΠϯ λΠϧੜ σʔλ ४උ ϑΝΠϧ ετϨʔδ 4IBQF pMF %#
1PTUHSFT 1PTU(*4 ετϨʔδ ΫϥΠΞϯτ ੜ༻ αʔό ϕΫλʔλΠϧ ʢQCG .75 4UZMFS εϓϥΠτ ϑΝΠϧ ʢQOH KTPO ϑΥϯτ ϑΝΠϧ ʢQCG ελΠϧ ϑΝΠϧ ʢKTPO ४උɾੜ 24࣌ؒ
σʔλ ४උ ϑΝΠϧ ετϨʔδ ݱࡏɺϚϐΦϯͰରԠ͍ͯ͠Δ ਤσʔλ ɹɾθϯϦϯ ɹɾOSM ɹɾNatural Earth
ɹɾࠃใͷ ɹɹਁਫఆσʔλ ɹɹਓޱूத۠σʔλ 4IBQF pMF %# 1PTUHSFT 1PTU(*4
ϨϯμϦϯά ɹਤσβΠϯ λΠϧੜ σʔλ ४උ ϑΝΠϧ ετϨʔδ 4IBQF pMF %#
1PTUHSFT 1PTU(*4 ετϨʔδ ΫϥΠΞϯτ ੜ༻ αʔό ϕΫλʔλΠϧ ʢQCG .75 4UZMFS εϓϥΠτ ϑΝΠϧ ʢQOH KTPO ϑΥϯτ ϑΝΠϧ ʢQCG ελΠϧ ϑΝΠϧ ʢKTPO
ετϨʔδ ɾPostGIS 2.4.0͔ΒՃ͞ΕͨST_ASMVTͱ ͍͏ؔͰλΠϧใ͕औಘͰ͖Δ ɹRDS͕PostGIS 2.4.0ʹରԠ͍ͯ͠ͳ͍ͨΊɺ ϚϐΦϯͰSQLΛΨϦΨϦॻ͍͍ͯ·͢… λΠϧੜ %# 1PTUHSFT
1PTU(*4 ੜ༻ αʔό ϕΫλʔλΠϧ ʢQCG
ετϨʔδ ɾϑΝΠϧʹग़ྗͤͣɺDB͔ΒϦΞϧλ ΠϜͰλΠϧΛ৴͢Δ͜ͱͰ͖Δ ύϑΥʔϚϯε͕ѱ͘ͳͬͯ͠·͏ՄೳੑΞϦ λΠϧੜ %# 1PTUHSFT 1PTU(*4 ੜ༻
αʔό ϕΫλʔλΠϧ ʢQCG
ϥϘαΠτ BSVLV ಉ͡ϕΫλʔλΠϧΛ ͍ͬͯΔ
ϚϐΦϯͷʮඒ͍͠ʯʮ໎Θͳ͍ʯਤ ελΠϧϑΝΠϧɿ25000ߦҎ্ ϨΠϠʔɿ691
MapboxGLの弱点 現時点の
λΠϧͷςΩετ͕ॏͳͬͨ߹ͲͪΒ ͔ҰํͷΈදࣔ͞ΕΔ͕ɺ λΠϧͷڥքͩͱͦͷผ͕Ͱ͖ͣɺςΩε τ͕ॏͳͬͯ͠·͏ λΠϧڥքͷه͕ॏͳͬͯ͠·͏ ه͕ॏͳ͍ͬͯΔ
TZNCPMBWPJEFEHFTUSVF λΠϧڥͷςΩετΛඇදࣔʹ͢ΔΦϓγϣ ϯ͋Δ͕ɺͲͪΒͷهফ͑ͯ͠·͏ Issueొࡁ λΠϧڥքͷه͕ॏͳͬͯ͠·͏ ফ͑ͨ…
ϚϧνόΠτͷॎॻ͖ه͕ෆ҆ఆ
ϚϧνόΠτͷॎॻ͖ه͕ෆ҆ఆ ࢼ͠ʹ௨Γͷ໊લΛ ʮژͰFOSS4GͩΑʯʹมߋ͢Δͱɺ จࣈ͕͔Ϳͬͯ͠·͏ γϯάϧόΠτจࣈͱϚϧνόΠτจࣈ͕ ࠞࡏ͢ΔهΛॎॻ͖ʹ͢Δͱɺจࣈ͕͔Ϳͬ ͯ͠·͏
ϚϧνόΠτͷॎॻ͖ه͕ෆ҆ఆ ೋॏʹͳ͍ͬͯͯɺ ಡΊͳ͍… هͷॎॻ͖Λແޮʹ͢ΔΦϓγϣϯΛ͚ͭ Δͱจࣈ͕ೋॏʹͳͬͯ͠·͏ UFYULFFQVQSJHIUGBMTF
ϚϧνόΠτͷॎॻ͖ه͕ෆ҆ఆ ϚϐΦϯͰɺ֯จࣈΛશ֯ʹมͯ͠ର Ԡ͍ͯ͠Δ FOSS4GΛશ֯ʹ͢Εɺ ͳ͘දࣔ͞ΕΔ
今後の展望
ɾMapbox Vector Tile σϑΝΫτελϯ μʔυʹͳΓͭͭ͋ΔΦʔϓϯͳ༷ ɾMapbox Vector TileʹରԠͨ͠πʔϧ ଟ͋͘Γɺ͜Ε͔Β૿͍͑ͯ͘ͱࢥΘΕΔ ex)
Mapzen, Klokan Technologies, MVT Styler, Maputnik etc… ͍ΖΜͳՄೳੑ͕͕ͬͨʂ
ϚϐΦϯͰ ɾਤͷ৴ ɾਤAPIͷఏڙ ɾਤSDKͷఏڙ ɾਤσβΠϯπʔϧͷఏڙ ɾਤ৴γεςϜͷఏڙ ͳͲͷGIS։ൃࢧԉαʔϏεΛߏதʂ λʔήοτ ɹҐஔใΛ׆༻͍ͨ͠શͯͷਓ ɹҐஔใΛఏڙ͍ͨ͠શͯͷਓ
乞うご期待!
ࢀߟURL ɹ˙ϚϐΦϯϕΫλʔ IUUQTNBQJPOHJUIVCJPNBQJPOWFDUPS ˙BSVLV IUUQTXXXBSVLVUPKQ ˙ܙํϚϐΦϯ J04൛ IUUQTJUVOFTBQQMFDPNKQBQQܙํϚϐΦϯJE NU
˙.BQCPY(-/BUJWF IUUQTHJUIVCDPNNBQCPYNBQCPYHMOBUJWF ˙.BQCPY(-+4 IUUQTHJUIVCDPNNBQCPYNBQCPYHMKT ˙.BQCPYVOJUZTEL IUUQTHJUIVCDPNNBQCPYNBQCPYVOJUZTEL ˙.BQCPY7FDUPS5JMF4QFDJpDBUJPO IUUQTXXXNBQCPYDPNWFDUPSUJMFTTQFDJpDBUJPO ˙.BQCPY4UZMF4QFDJpDBUJPO IUUQTXXXNBQCPYDPNNBQCPYHMKTTUZMFTQFD ˙.754UZMFS IUUQTTQVUOJLNBQTHJUIVCJPNWUTUZMFS ˙εϓϥΠτϑΝΠϧΛ࡞Δπʔϧ IUUQTHJUIVCDPNNBQCPYTQSJUF[FSP IUUQTHJUIVCDPNNBQCPYTQSJUF[FSPDMJ ˙ϑΥϯτϑΝΠϧΛ࡞Δπʔϧ IUUQTHJUIVCDPNNBQCPYOPEFGPOUOJLɹ
おわり