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.3k
マピオン、ベクタータイルはじめました〜京都編〜
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
200
新規事業のアプリ、Flutterで作ってます〜U-ROUTEのポイ活対応編〜 OCEM#3
mapion
0
230
ウォーキングアプリ「aruku&」ってどうやって作ってるの? OCEM#3
mapion
0
220
ONE COMPATH/ワンコンパス Company Deck For Engineer(会社紹介資料)
mapion
0
7.8k
ONE COMPATHの地図の開発技術~入門編~ OCEM #2
mapion
0
220
脱レガシー! Aurora PostgreSQLに移行してみた OCEM #2
mapion
1
960
エンジニアなので「技術」で仕事を効率化してみた ~Slack連携でチームの生産性が向上~ OCEM#2
mapion
0
220
20221112_FOSS4G2022Online.pdf
mapion
0
1.8k
ONE COMPATH/ワンコンパス Company Deck(会社資料)
mapion
0
370
Other Decks in Technology
See All in Technology
技術選定 したい人 したくない人
shirayanagiryuji
0
360
Goで実現する堅牢なアーキテクチャ:DDD、gRPC-connect、そしてAI協調開発の実践
fujidomoe
3
740
Java ランタイムからカスタムランタイムに行き着くまで
ririru0325
0
110
1 年間の育休から時短勤務で復帰した私が、 AI を駆使して立ち上がりを早めた話
lycorptech_jp
PRO
0
150
AI が Approve する開発フロー / How AI Reviewers Accelerate Our Development
zaimy
1
190
EMから現場に戻って見えた2026年の開発者視点
sudoakiy
1
410
全自動で回せ!Claude Codeマーケットプレイス運用術
yukyu30
3
130
『誰の責任?』で揉めるのをやめて、エラーバジェットで判断するようにした ~感情論をデータで終わらせる、PMとエンジニアの意思決定プロセス~
coconala_engineer
0
1.7k
Agent Ready になるためにデータ基盤チームが今年やること / How We're Making Our Data Platform Agent-Ready
zaimy
0
160
「使いにくい」も「運用疲れ」も卒業する UIデザイナーとエンジニアが創る持続可能な内製開発
nrinetcom
PRO
0
190
俺の失敗を乗り越えろ!メーカーの開発現場での失敗談と乗り越え方 ~ゆるゆるチームリーダー編~
spiddle
0
300
「静的解析」だけで終わらせない。 SonarQube の最新機能 × AIで エンジニアの開発生産性を本気で上げる方法
xibuka
2
270
Featured
See All Featured
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.3k
First, design no harm
axbom
PRO
2
1.1k
How to Ace a Technical Interview
jacobian
281
24k
The untapped power of vector embeddings
frankvandijk
2
1.6k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
530
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
120
SEO for Brand Visibility & Recognition
aleyda
0
4.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
The Cost Of JavaScript in 2023
addyosmani
55
9.7k
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ɹ
おわり