Vue.jsと3D可視化 - 産総研のOSS「AIST 3DDB Client」を例に / Vue Fes Japan 2023

https://vuefes.jp/2023/sessions/sorami

demo: https://mierune.github.io/aist_3ddb_client/

code: https://github.com/aistairc/aist_3ddb_client

Transcript

1. 7VFKTͱ%ՄࢹԽ
   ࢈૯ݚͷ044ʮ"*45%%#$MJFOUʯΛྫʹ
   Vue.js & 3D Visualization
   2023-10-28
   
   
   Vue Fes Japan 2023
   
   
   @sorami (MIERUNE)
   

   View Slide

2. σ
   Ϟ
   ಈ
   ը
   "*45%%#$MJFOU
   ࢈૯ݚͷσδλϧπΠϯϓϥοτϑΥʔϜ޲͚ʹ։ൃ͞Εͨ
   Φʔϓϯιʔεͷ8FCΞϓϦ
   

   View Slide

3. ྫ෱Ҫݝࡸߐ঎ళ֗%σʔλ
   

   View Slide

4. ઌ݄ߦͬͨΒɺ
   ͜Μͳײ͡Ͱͨ͠
   

   View Slide

5. 5SZJUPOMJOF
   

   https://mierune.github.io/aist_3ddb_client/
   

   View Slide

6. 4PVSDFDPEF"QBDIF
   

   https://github.com/aistairc/aist_3ddb_client
   

   View Slide

7. View Slide

8. ໨࣍
   ‣ ࣗݾ঺հͱձࣾ঺հ
   ‣ ࢈૯ݚͱ%σʔλ
   ‣ "*45%%#$MJFOUͷػೳɾಛ௃
   ‣ 8FCͰͷ஍ਤ%ՄࢹԽ
   ‣ ࢈૯ݚ%%#γεςϜͷ͜Ε͔Β
   

   View Slide

9. ιϑτ΢ΣΞΤϯδχΞɻࡳຈࡏॅɻ
   ஍ਤՄࢹԽूஂʮ.*&36/&ʯॴଐɻ
   Ҏલ͸ʮࣗવݴޠॲཧʯΛ΍͍ͬͯ·ͨ͠ɻ
   ܗଶૉղੳث4VEBDIJʢϫʔΫεಙౡ/-1ʣ
   ๏཯Y/-1⚖ʢ-FHBMTDBQFʣ ͳͲͳͲ
   !TPSBNJ
   ٱຊۭւʢͻ͞΋ͱͦΒΈʣ
   

   View Slide

10. ©︎
    1SPKFDU1-"5&"6.-*5+BQBO
    Έ͑ΔͶ
    

    View Slide

11. ©︎
    1SPKFDU1-"5&"6.-*5+BQBO
    ਓྲྀσʔλՄࢹԽ Yahoo! JAPAN
    https://ds.yahoo.co.jp/
    จԽࡒ૯ཡWebGIS ಸྑจԽࡒݚڀॴ
    https://heritagemap.nabunken.go.jp/
    ϚΠϯΫϥϑτ ࡳຈࢢ, ߴদࢢ, etc.
    https://twitter.com/MIERUNE_inc/status/1673157862691065857
    ৿ྛΦʔϓϯσʔλ ྛ໺ி
    https://twitter.com/MIERUNE_inc/status/1709763336999723515/
    Ґஔ৘ใΛѻ͏ՄࢹԽͷձࣾݱࡏ໊
    

    View Slide

12. ©︎
    1SPKFDU1-"5&"6.-*5+BQBO
    https://internet.watch.impress.co.jp/docs/special/wf_hokkaido/1282185.html
    ๺ւಓ͕ڌ఺શࠃʹϑϧϦϞʔτϝϯόʔ
    044ίϛϡχςΟ͔Β
    ੜ·Εͨձࣾ
    

    View Slide

13. ©︎
    1SPKFDU1-"5&"6.-*5+BQBO
    https://internet.watch.impress.co.jp/docs/special/wf_hokkaido/1282185.html
    ๺ւಓ͕ڌ఺
    ౦ژ౎಺͔Βస৬ͯ͘͠ΔΤϯδχΞ͕೥ʑ૿͍͑ͯΔMIERUNEɻ
    
    ಉࣾͷϧʔπ͸ɺ୅දऔక໾ͷே೔͞Μ΍ɺ
    
    औక໾ͷݹ઒ହਓ͞ΜΒ͕2012೥͔Βఆظతʹ։࠵͍ͯ͠Δ
    
    ΧϯϑΝϨϯεʮFOSS4G Hokkaidoʯʹ͋Δɻ
    
    ಉΠϕϯτ͕ελʔτ͢ΔҎલɺFOSS4GʢFree Open Source
    Software for GeoSpatialɿΦʔϓϯιʔεͷ஍ཧ৘ใιϑτ΢ΣΞʣ
    ͷΠϕϯτ͸౦ژ΍େࡕΛத৺ʹΧϯϑΝϨϯε΍ษڧձ͕ߦΘΕͯ
    ͍͕ͨɺே೔͞Μୡ͸ɺ͜ΕΛ๺ւಓͰ։࠵Ͱ͖ͳ͍͔ͱߟ͑ͨɻ
    
    ɹʮ๺ւಓ͸೶ۀؔ܎΍໺ੜੜ෺ͷݚڀͳͲʹ͓͍ͯGISͷ׆༻͕
    
    ਐΜͰ͓Γɺ౔஍͕޿͍ͨΊɺҐஔ৘ใΛ׆ൃʹར༻͍ͯ͠Δͱ͍͏
    ౔৕͕͋Γ·ͨ͠ɻ...
    “
    

    View Slide

14. ©︎
    1SPKFDU1-"5&"6.-*5+BQBO
    8F
    ♥︎
    044 ӡӦɺεϙϯαʔɺίʔυ΍஌ݟͷެ։
    https://www.mierune.co.jp/aboutus
    .BQ-JCSF͚ͩͰ΋
    ສυϧ೥
    

    View Slide

15. ©︎
    1SPKFDU1-"5&"6.-*5+BQBO
    https://2023-apac.pycon.jp/
    https://vuefes.jp/2023/
    1Z$PO"1"$
    γϧόʔεϙϯαʔ
    7VF'FT+BQBO
    γϧόʔεϙϯαʔొஃຊ
    

    View Slide

16. ©︎
    1SPKFDU1-"5&"6.-*5+BQBO
    『現場のプロがわかりやすく教える位置情報エンジニア養成講座』
    

    井口奏大
    
    
    秀和システム, 2023
    雑誌「Software Design」
    

    連載: 位置情報エンジニアリングのすすめ
    
    
    技術評論社, 2023年8月号〜
    ࿈ࡌத
    ʰҐஔ৘ใΤϯδχΞϦϯάͷ͢͢Ίʱ
    ૿࡮ޚྱ
    

    View Slide

17. ©︎
    1SPKFDU1-"5&"6.-*5+BQBO
    

    View Slide

18. "*45%%#$MJFOU
    ࢈૯ݚ%σʔλϕʔεͷͨΊͷ
    Φʔϓϯιʔε8FCΞϓϦ
    

    View Slide

19. https://mierune.github.io/aist_3ddb_client/
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. ࢈૯ݚ͕։ൃɾӡ༻ɾ؅ཧ͢Δ
    

    σδλϧπΠϯϓϥοτϑΥʔϜʮ%%#γεςϜʯ
    ͷͨΊʹ։ൃ͞Εͨ8FCΞϓϦέʔγϣϯɻ
    γεςϜʹొ࿥͞Ε͍ͯΔ༷ʑͳࡾ࣍ݩσʔλΛ
    

    ݕࡧɾදࣔɾμ΢ϯϩʔυͰ͖·͢ɻ
    

    

    ࢈૯ݚͷҕୗΛड͚ͯɺ.*&36/&͕։ൃ͠·ͨ͠ʂ
    

    View Slide

32. ࢈૯ݚͱ%σʔλ
    

    View Slide

33. ࢈ۀٕज़૯߹ݚڀॴʢ࢈૯ݚ "*45ʣ
    

    ܦࡁ࢈ۀলॴ؅ɺ೔ຊ࠷େڃͷݚڀػؔ
    https://www.aist.go.jp/
    

    View Slide

34. ࢈૯ݚ
    

    σδλϧΞʔΩςΫνϟݚڀηϯλʔ
    https://www.digiarc.aist.go.jp/team/
    https://www.digiarc.aist.go.jp/
    

    View Slide

35. https://www.digiarc.aist.go.jp/team/gsvrt/
    

    View Slide

36. %%#"1* ৄࡉ͸(JU)VCϨϙδτϦͷ3&"%.&Λࢀরͷ͜ͱ
    https://github.com/aistairc/aist_3ddb_client
    

    View Slide

37. %%#"1* ৄࡉ͸(JU)VCϨϙδτϦͷ3&"%.&Λࢀরͷ͜ͱ
    https://github.com/aistairc/aist_3ddb_client
    ެংྑଏʹ൓͢Δ໨తͰͳ͚Ε͹
    ͩΕͰ΋ແঈͰར༻Ͱ͖Δ
    μ΢ϯϩʔυՄೳͳσʔλͷѻ͍͸ɺ
    ͦΕͧΕʹઃఆ͞Ε͍ͯΔϥΠηϯεΛ֬ೝͷ͜ͱ
    

    View Slide

38. طଘͷϏϡʔΞʔ"*45%%#7JFXFS
    https://gsrt.digiarc.aist.go.jp/3ddb_demo/tdv/index.html
    

    View Slide

39. طଘͷϏϡʔΞʔ"*45%%#7JFXFS
    https://gsrt.digiarc.aist.go.jp/3ddb_demo/tdv/index.html
    ࢖͍ํ͕೉͍͠
    ΄ͱΜͲͷਓ͕ɺۭؒݕࡧͷͨΊͷϙϦΰϯΛඳ͘͜ͱ͕Ͱ͖ͳ͍
    ݕࡧ݁Ռ͔ΒɺσʔλΛબΜͰΧʔτʹೖΕΒΕΔਓ͸͞Βʹগͳ͍
    

    View Slide

40. γϯϓϧʹɺ୭Ͱ΋ݟͯɺ͞Θͬͯɺ
    σʔλ͕ग़ͯ͘Δ΋ͷΛఏڙ͔ͨͬͨ͠
    தଜྑհ͞Μ
    ࢈૯ݚਓ޻஌ೳݚڀηϯλʔ૯ׅݚڀओװ
    

    View Slide

41. γϯϓϧʹɺ୭Ͱ΋ݟͯɺ͞Θͬͯɺ
    σʔλ͕ग़ͯ͘Δ΋ͷΛఏڙ͔ͨͬͨ͠
    தଜྑհ͞Μ
    ࢈૯ݚਓ޻஌ೳݚڀηϯλʔ૯ׅݚڀओװ
    ˠ"*45%%#$MJFOU΁
    

    View Slide

42. "*45%%#$MJFOUͷ
    ػೳɾಛ௃
    

    View Slide

43. جຊతͳૢ࡞
    

    View Slide

44. جຊతͳૢ࡞
    ஍෺σʔλͷ
    Ωʔϫʔυݕࡧ
    J
    ϘλϯͰදࣔ
    σʔλৄࡉ μ΢ϯϩʔυ
    ݕࡧ݁Ռ
    ϘλϯͰ஍ਤʹ௥Ճ
    

    View Slide

45. جຊతͳૢ࡞
    ɾࢹ఺ͷ܏͚ɺճస
    ɹɹதԝΫϦοΫυϥοά PS
    ɹɹ$53-Ωʔυϥοά
    දࣔதͷσʔλ
    ΫϦοΫͰζʔϜΠϯ
    ɾҠಈ
    ɹɹࠨΫϦοΫυϥοά
    ɾζʔϜ
    ɹɹӈΫϦοΫυϥοάεΫϩʔϧ
    ஍ਤૢ࡞
    

    View Slide

46. දࣔྖҬ಺ͷݕࡧ
    

    View Slide

47. https://twitter.com/bamboo4031/status/1666625250841497600
    

    View Slide

48. ༷ʑͳσʔλιʔε
    ͍Ζ͍Ζͳ࣏ࣗମ͕ɺ఺܈σʔλͳͲΛެ։͠͸͡Ί͍ͯΔɻ
    

    ͦΕΒΛ·ͱΊͯɺݕࡧɾදࣔɾμ΢ϯϩʔυͰ͖ΔΑ͏ʹ
    /www.pref.shizuoka.jp/machizukuri/1049255/1052183.html https://info.tokyo-digitaltwin.metro.tokyo.lg.jp/ https://www.mlit.go.jp/plateau/
    

    View Slide

49. ༷ʑͳσʔλιʔε
    ੩Ԭݝʮ7*356"-4)*;60,"ʯશσʔλରԠࡁ
    ௕࡚ݝ௕࡚ࢢपลެ։σʔλɺରԠ༧ఆ
    ฌݿݝ౎ࢢҬN ࢁؒ෦DNɺରԠ༧ఆ
    ౦ژ౎೥౓தʹσʔλެ։͞Ε࣍ୈରԠ༧ఆ
    ͳͲͳͲ
    

    View Slide

50. https://twitter.com/shi__works/status/1671084467845464065
    

    View Slide

51. https://twitter.com/miyasaka/status/1671329050802143232
    

    View Slide

52. 8FCͰͷ஍ਤ%ՄࢹԽ
    ࣮૷
    

    View Slide

53. ࠓճ࠾༻ٕͨ͠ज़
    $FTJVN+4
    

    %ͷ஍ٿ΍஍ਤΛදࣔ͢ΔͨΊͷ
    Φʔϓϯιʔεͷ+BWB4DSJQUϥΠϒϥϦ
    3&"%.&Ͱ΋ղઆͯ͠·͢
    https://github.com/aistairc/aist_3ddb_client
    7VFKT
    7VF 5ZQF4DSJQU
    $PNQPTJUJPO"1*
    4DSJQUTFUVQߏจ
    

    View Slide

54. $FTJVN+4
    %஍ཧۭؒσʔλΛՄࢹԽ͢ΔϥΠϒϥϦ
    https://www.yomiuri.co.jp/world/ukraine-reconstruction/
    $FTJVN+4ͰͷՄࢹԽྫ
    l΢ΫϥΠφઓ࣌Լͷ෮ڵΩʔ΢͔ۙ߫Βͷใࠂz
    ಡച৽ฉΦϯϥΠϯ ಛผڠྗɿ౉ᬒӳಙɾ౦ژେֶେֶӃڭत
    $FTJVN͕ࣾ։ൃ
    Φʔϓϯιʔεɺ"QBDIF
    https://cesium.com/platform/cesiumjs/
    

    View Slide

55. %5JMFT
    https://cesium.com/why-cesium/3d-tiles/
    େن໛ͳଟछͷ%஍ཧۭؒσʔλΛετϦʔϛϯά͢ΔͨΊͷΦʔϓϯͳඪ४࢓༷
    $FTJVN͕ࣾ࢝Ίͨ࢓༷ɻHM5'ʢz%ʹ͓͚Δ+1&(zʣΛ༻͍Δ
    

    View Slide

56. ࢀߟͦͷଞͷ஍ਤ%ՄࢹԽϥΠϒϥϦ
    .BQ-JCSF.BQCPY(-+4
    ࣍ݩɺ࣍ݩͷ஍ਤϥΠϒϥϦ
    .BQCPYͷඇ044Խʹ൐͍ɺϑΥʔΫͱͯ͠.BQ-JCSF͕஀ੜ
    ԡग़ʢ&YUSVTJPOʣදݱ UISFFKTͰͷ%Ϟσϧඳը
    https://maplibre.org/
    
    
    maplibre-gl-js/docs/examples/add-3d-model/
    https://maplibre.org/
    
    
    maplibre-gl-js/docs/examples/3d-buildings/
    

    View Slide

57. σʔλՄࢹԽͷͨΊͷϑϨʔϜϫʔΫ %5JMFTඳըϨΠϠʔʢ5JMF%-BZFSʣ͕ଘࡏ
    l͋ͳͨͷ֗ͷ஍Ձ͸ʁϚοϓͰݟΔ্ঢͱԼམz
    ೔ຊܦࡁ৽ฉ
    https://deck.gl/examples/google-3d-tiles
    https://vdata.nikkei.com/newsgraphics/land-value-map/
    EFDLHMFYBNQMF
    1IPUPSFBMJTUJD%5JMFT
    ࢀߟͦͷଞͷ஍ਤ%ՄࢹԽϥΠϒϥϦ
    EFDLHM
    

    View Slide

58. ࢀߟͦͷଞͷ஍ਤ%ՄࢹԽϥΠϒϥϦ
    ‣ %5JMFT3FOEFSFS+4
    ɹ5ISFFKTͰ%5JMFTͷඳը /"4""..04͕։ൃ
    ‣ J5PXOT
    ɹ5ISFFKTϕʔε ϑϥϯεࠃཱ஍ཧ৘ใɾ৿ྛ৘ใிʢ*(/ʣͳͲ͕ϝϯς
    ‣ "SD(*4.BQT4%,GPS+BWB4DSJQU
    ɹ&TSJ͕ࣾ։ൃΫϥ΢υαʔϏε"SD(*40OMJOFΛར༻
    ‣ NBQSBZ+4
    ɹιχʔ͕։ൃΫϥ΢υαʔϏε.BQSBZ$MPVEΛར༻
    ‣ ʜ
    

    View Slide

59. 7VFKTίϯϙʔωϯτߏ੒
    HomeView
    AboutModal LayerMenu MapPane
    Displayed
    
    
    Layers
    InfoPopup
    

    View Slide

60. 7VFKTίϯϙʔωϯτߏ੒
    HomeView
    AboutModal LayerMenu MapPane
    Displayed
    
    
    Layers
    InfoPopup
    産総研
    
    
    3DDB
    ݕࡧ
    ඳը
    

    View Slide

61. 7VFKTίϯϙʔωϯτߏ੒
    HomeView
    AboutModal LayerMenu MapPane
    Displayed
    
    
    Layers
    InfoPopup
    -BZFS.FOV
    ϨΠϠʔʢ஍෺ʣͷݕࡧ΍બ୒
    ࢈૯ݚ%%#"1*͔Βऔಘ
    *OGP1PQVQ
    ϨΠϠʔৄࡉ৘ใͷදࣔ
    l'MPBUJOH7VFzϥΠϒϥϦΛར༻
    .BQ1BOF
    $FTJVNͰ஍ਤͱϨΠϠʔΛඳը
    %JTQMBZFE-BZFST
    બ୒͞ΕͨϨΠϠʔΛྻڍ
    

    View Slide

62. 7VFKTίϯϙʔωϯτߏ੒
    HomeView
    AboutModal LayerMenu MapPane
    Displayed
    
    
    Layers
    InfoPopup
    "CPVU.PEBM
    5BJMXJOE-BCTʹΑΔl)FBEMFTT6*zͷ
    μΠΞϩάίϯϙʔωϯτΛར༻
    

    View Slide

63. දࣔϨΠϠʔͷ؅ཧ
    ʮબ୒ϨΠϠʔ৘ใͷʯҰཡΛ਌ίϯϙʔωϯτʹอ࣋
    ͦΕΛݩʹɺ$FTJVNͷϨΠϠʔΠϯελϯεΛ࡞੒͠ɺ௥Ճɾ࡟আ
    src/types/index.ts - CesiumLayerProperties src/components/MapPane.vue - add()
    

    View Slide

64. දࣔϨΠϠʔͷ؅ཧ
    બ୒ϨΠϠʔ৘ใͷҰཡΛ਌ίϯϙʔωϯτʹอ࣋
    ͦΕΛݩʹ$FTJVNͷϨΠϠʔΠϯελϯεΛ࡞੒͠ɺ௥Ճɾ࡟আ
    src/types/index.ts src/components/MapPane.vue
    HomeView
    LayerMenu MapPane
    Displayed
    
    
    Layers
    બ୒ϨΠϠʔ৘ใͷҰཡ
    selectedLayers: Ref
    ௥Ճ ࡟আ
    Πϯελϯε
    ࡞੒ɾ௥Ճɾ࡟আ
    

    View Slide

65. എܠ஍ਤ
    ϗεςΟϯά͞Ε͓ͯΓࣗ༝ʹ࢖͑Δʮࠃ౔஍ཧӃλΠϧʯΛར༻
    ࠓճ͸ʮશࠃ࠷৽ࣸਅʢγʔϜϨεʣʯΛར༻
    ˞ར༻࣌ʹ͸ग़యͷهࡌ͕ඞཁࠃ౔஍ཧӃίϯςϯπར༻ن໿Λࢀরͷ͜ͱ
    https://maps.gsi.go.jp/development/ichiran.html
    https://maps.gsi.go.jp/
    

    View Slide

66. දࣔྖҬ಺ͷݕࡧ
    ϏϡʔΞʔͷΩϟϯόε͔ΒɺදࣔྖҬΛಛఆˠ8,5ܗࣜ΁
    %%#"1*ͷlBSFBzύϥϝʔλʔʹࢦఆ͠ɺྖҬ಺Ͱݕࡧ
    src/components/MapPane.vue - getViewerWKTPolygon()
    https://ja.wikipedia.org/wiki/Well-known_text
    

    View Slide

67. දࣔྖҬ಺ͷݕࡧ
    ϏϡʔΞʔͷΩϟϯόε͔ΒɺදࣔྖҬΛಛఆˠ8,5ܗࣜ΁
    %%#"1*ͷlBSFBzύϥϝʔλʔʹࢦఆ͠ɺྖҬ಺Ͱݕࡧ
    src/components/MapPane.vue
    https://ja.wikipedia.org/wiki/Well-known_text
    ը໘ʹʮ஍ฏઢʢ্ۭʣʯؚ͕·ΕΔͱɺ
    ࠨ্ɾӈ্ͷܦҢ౓ΛಛఆͰ͖ͳ͍
    

    View Slide

68. %஍ܗͷඳը⁞
    ϗεςΟϯά͞Ε͓ͯΓࣗ༝ʹ࢖͑Δʮࠃ౔஍ཧӃඪߴλΠϧʯΛར༻
    %&.ʢ%JHJUBM&MFWBUJPO.PEFM਺஋ඪߴϞσϧʣͷ1/(ը૾λΠϧ഑৴
    https://maps.gsi.go.jp/development/ichiran.html
    

    View Slide

69. %஍ܗͷඳը 
    ஍ཧӃͷඪߴλΠϧ͸ɺҰൠతͳUFSSBJO3(#ͱҟͳΔܗࣜ
    ˠ.*&36/&ͷ,BOBIJSP*HVDIJʹΑΔม׵ϞδϡʔϧΛར༻
    https://qiita.com/Kanahiro/items/3e7358a28684af905a19
    https://maps.gsi.go.jp/development/demtile.html
    

    View Slide

70. ஍෺ͷඪߴ⁞
    ʮδΦΠυߴʯΛߟྀ͠ͳ͍ͱɺݐ෺͕஍໘͔Βු͍ͯ͠·͏
    

    View Slide

71. ஍෺ͷඪߴ 
    δΦΠυฏۉۉւ໘ΛԾ૝తʹ཮஍΁Ԇ௕ͨ͠໘
    ࠓճͷσʔλͰ͸ɺ%஍ܗͱ஍෺ͷؒʹɺδΦΠυߴ෼ͷ͕ࠩଘࡏ
    画像: 国土地理院
    
    
    “ジオイドとは | 国土地理院” https://www.gsi.go.jp/buturisokuchi/grageo_geoid.html
    

    View Slide

72. ஍෺ͷඪߴ⁠
    ஍ཧӃͷఏڙ͢ΔδΦΠυߴσʔλʢ(FP5*'' ஍ཧ৘ใ෇͖ͷը૾ʣΛར༻
    ܦҢ౓͝ͱͷδΦΠυߴͷ஋Λऔಘ͠ɺ$FTJVNͰߴ͞ͷΦϑηοτઃఆ
    https://fgd.gsi.go.jp/download/geoid.php src/modules/utils.ts - getGeoidHeight()
    

    View Slide

73. ஍෺ͷඪߴ⁠
    ஍ཧӃͷఏڙ͢ΔδΦΠυߴσʔλʢ(FP5*''ը૾ϑΝΠϧʣΛར༻
    ܦҢ౓͝ͱͷδΦΠυߴͷ஋Λऔಘ͠ɺ$FTJVNͰΦϑηοτʹઃఆ
    https://fgd.gsi.go.jp/download/geoid.php src/modules/utils.ts - getGeoidHeight()
    Φϑηοτͳ͠ Φϑηοτ͋Γ
    

    View Slide

74. 5VSGKT
    ༷ʑͳ஍ཧۭؒղੳॲཧΛ·ͱΊͨ+BWB4DSJQUϞδϡʔϧ
    ࠓճ͸ɺ஍෺ͷʮॏ৺఺$FOUFSPG.BTTʯΛऔಘ͢Δͷʹར༻
    ʢॏ৺఺ˠ஍෺ͷඳըҐஔΛఆΊͨΓɺδΦΠυߴΛऔಘ͢ΔͨΊͷܦҢ౓ʣ
    src/components/LayerMenu.vue
    

    View Slide

75. ࢈૯ݚ%%#γεςϜͷ
    ͜Ε͔Β
    

    View Slide

76. ࢈૯ݚ%%#γεςϜͷ͜Ε͔Β
    2(*4ʢ044ͷσεΫτοϓΞϓϦʣ 6OJUZ 6OSFBM&OHJOFͳͲͰ΋
    ಉ༷ͷ͜ͱ͕Ͱ͖ΔϓϥάΠϯͷ։ൃͱެ։
    G-CKAN
    
    
    統合サーバー
    QGIS
    Web
    
    
    AIST 3DDB Client
    Unity Unreal
    Engine
    G空間情報
    
    
    センター 産総研
    

    View Slide

77. ࢈૯ݚ%%#γεςϜͷ͜Ε͔Β
    ϝλσʔλɾݕࡧํࣜͷඪ४Խ
    

    ($,"/΁ͷରԠΛ೥಺ʹ׬ྃ༧ఆ
    

    কདྷ͸45"$ 4QBUJP5FNQPSBM"TTFU$BUBMPHT
    ͱͷ࿈ܞʹΑΓɺ
    

    ࣍ݩϥελʔ΋ಉ༷ʹ഑৴Ͱ͖ΔΑ͏ʹ
    

    

    ղੳʹ࢖͑ΔσʔλΛΫϥ΢υରԠϑΥʔϚοτͰ഑৴
    

    ·ͣ఺܈Λ$01$ $MPVE0QUJNJ[FE1PJOU$MPVE
    Ͱ഑৴
    

    

    ๲େͳ࣍ݩΦʔϓϯσʔλͷඪ४ରԠͱɺ
    "#$*ʢ࢈૯ݚʹΑΔੈք࠷େن໛ͷ"*ॲཧ޲͚ܭࢉΠϯϑϥʣ
    ͔Βͷ഑৴
    

    View Slide

78. 4PVSDFDPEF"QBDIF
    

    https://github.com/aistairc/aist_3ddb_client
    

    View Slide

79. 5SZJUPOMJOF
    

    https://mierune.github.io/aist_3ddb_client/
    

    View Slide

80. ©︎
    1SPKFDU1-"5&"6.-*5+BQBO
    !.*&36/&@JOD
    ஥ؒΛืूத
    ΧδϡΞϧ໘ஊ΍ͬͯ·͢ɺ
    ؾܰʹ͝࿈བྷ͍ͩ͘͞ʂ
    NJFSVOFDPKQDBSFFST
    

    View Slide