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.2k
マピオン、ベクタータイルはじめました〜京都編〜
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
180
新規事業のアプリ、Flutterで作ってます〜U-ROUTEのポイ活対応編〜 OCEM#3
mapion
0
190
ウォーキングアプリ「aruku&」ってどうやって作ってるの? OCEM#3
mapion
0
180
ONE COMPATH/ワンコンパス Company Deck For Engineer(会社紹介資料)
mapion
0
7.1k
ONE COMPATHの地図の開発技術~入門編~ OCEM #2
mapion
0
210
脱レガシー! Aurora PostgreSQLに移行してみた OCEM #2
mapion
1
890
エンジニアなので「技術」で仕事を効率化してみた ~Slack連携でチームの生産性が向上~ OCEM#2
mapion
0
200
20221112_FOSS4G2022Online.pdf
mapion
0
1.7k
ONE COMPATH/ワンコンパス Company Deck(会社資料)
mapion
0
340
Other Decks in Technology
See All in Technology
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
360
激動の時代を爆速リチーミングで乗り越えろ
sansantech
PRO
1
100
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
160
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.2k
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
480
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
190
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
0
140
Building a cloud native business on open source
lizrice
0
180
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.4k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Context Engineering - Making Every Token Count
addyosmani
8
300
4 Signs Your Business is Dying
shpigford
185
22k
Embracing the Ebb and Flow
colly
88
4.9k
A designer walks into a library…
pauljervisheath
209
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
A Modern Web Designer's Workflow
chriscoyier
697
190k
A Tale of Four Properties
chriscoyier
161
23k
Code Reviewing Like a Champion
maltzj
526
40k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The World Runs on Bad Software
bkeepers
PRO
72
11k
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ɹ
おわり