OpenLayersで始める地図の操作

2018/07/21(土) フロントもくもく#11
https://html5ebisu.connpass.com/event/93619/

Transcript

1. OpenLayers
   ɹͰ࢝ΊΔ஍ਤͷૢ࡞
   ͱগ͠࠲ඪͷ͓͸ͳ͠
   ϑϩϯτ΋͘΋͘ձ#11
   2018/07/21 (౔)
   ໼࡚ ༞थ @zucky_zakizaki
   

   View Slide

2. ![VDLZ@[BLJ[BLJ
   ɾ໼࡚ɹ༞थʢYazaki Yukiʣ
   ɾΤϯδχΞ 9೥໨
   ɹC#(.net) ͱ WindowsΞϓϦଟΊ
   ɾWebܥ ໿൒೥
   ɾ࠷ۙ͸ RailsʴVue.js ͕޷͖
   ɹ͋ͱ Xamarin͋ͨΓ
   ɾQiitaॻ͍ͯ·͢
   ɹhttps://qiita.com/zaki_zaki
   ɹ
   

   View Slide

3. ࿩͢͜ͱ
   • OpenLayers ͬͯͳΜͧ΍
   • σϞ
   • ࠲ඪͷ͓͸ͳ͠
   ɹɹ஍ਤܥϥΠϒϥϦΛѻ͏্Ͱ
   ɹɹֶΜͰ͓͍ͨ΄͏͕Α͍͜ͱ
   

   View Slide

4. HomePage http://openlayers.org/
   GitHub https://github.com/openlayers/openlayers
   ͜ͷ΁ΜΛͬ͘͟Γ࿩͍͖ͯ͠·͢
   

   View Slide

5. OpenLayers ͱ͸
   • ஍ਤ༻JSϥΠϒϥϦ
   • ঎༻ΞϓϦ഑෍Մೳ
   (2-clause BSD)
   • ແྉʴ੍ݶͳ͠
   • खܰ
   • ΧελϚΠζ͕๛෋
   ͕͜͜ϙΠϯτ!!
   ֓ཁ
   zϙΠϯτ!!zͷ෦෼Λ
   ॱ൪ʹ࿩͍͖͍ͯͨ͠ͱࢥ͍·͢ɻ
   

   View Slide

6. ແྉʴ੍ݶͳ͠
   • ແྉʴ੍ݶͳ͠
   • खܰ
   • ΧελϚΠζ͕๛෋
   

   View Slide

7. • 1೔/25,000 ϦΫΤετ
   ɹ ͔Β…
   • 1ϲ݄/໿28,000ϦΫΤετ
   ɹɹʹมߋ(2018/07/16͔Βࢪߦ)
   ɹɹৄ͘͠͸ ↓↓
   ɹɹhttps://cloud.google.com/maps-platform/pricing/sheet/
   (PPHMF.BQTʢແྉ࿮ʣͷ৔߹
   • ແྉʴ੍ݶͳ͠
   • खܰ
   • ΧελϚΠζ͕๛෋
   0QFO-BZFSTͷ৔߹
   • OpenStreetMapʢOSMʣ
   • ஍ཧӃ஍ਤ
   • etc…
   0QFO-BZFSTͳΒແྉ ˞
   ͷ஍ਤར༻͕Մೳʂʂ
   ˞ΫϨδοτهࡌ౳ͷن໿͸͋Γ·͢ɻ
   

   View Slide

8. OpenStreetMap(OSM) ͱ͸
   • ΦʔϓϯϥΠηϯεͷ஍ਤ
   • ొ࿥΍ฤू͸Ұൠͷํ͕ߦͳ͍ͬͯΔ
   • λΠϧʢ஍ਤʣαʔόͷࣗ࡞͕Մೳ
   ͜ΜͳΠϕϯτ΋ɾɾɾ
   IUUQTPQFOTUSFFUNBQKQ
   

   View Slide

9. खܰ
   • ແྉʴ੍ݶͳ͠
   • खܰ
   • ΧελϚΠζ͕๛෋
   

   View Slide

10. 
    • ແྉʴ੍ݶͳ͠
    • खܰ
    • ΧελϚΠζ͕๛෋
    var olmap = new ol.Map({
    target: 'map',
    layers: [
    new ol.layer.Tile({
    source: new ol.source.OSM()
    })
    ],
    });
    
    
    ಡΈࠐΈ
    EJWཁૉ
    Ϛοϓੜ੒
    ʴ
    04.ಡΈࠐΈ
    αϯϓϧίʔυCZDPEFQFO
    IUUQTDPEFQFOJP[VDLZ@[BLJ[BLJQFOE,0..9
    

    View Slide

11. ΧελϚΠζ͕๛෋
    • ແྉʴ੍ݶͳ͠
    • खܰ
    • ΧελϚΠζ͕๛෋
    σϞͰઆ໌͠·͢ɻ
    αϯϓϧίʔυCZDPEFQFO
    IUUQTDPEFQFOJP[VDLZ@[BLJ[BLJQFO0X8N:,
    

    View Slide

12. ࠲ඪͷ͓͸ͳ͠
    ஍ਤܥϥΠϒϥϦΛѻ͏্Ͱ
    ֶΜͰ͓͍ͨ΄͏͕Α͍͜ͱɻ
    

    View Slide

13. ࠲ඪʹ͍ͭͯ
    ܦҢ౓
    [ौ୩] 139.701636, 35.658034
    WebϝϧΧτϧ
    [ौ୩] 15551514.982507259,4253668.826571383
    զʑͱ0QFO-BZFSTͰѻ͏࠲ඪͷछྨ͕ҟͳΔɻ
    ˞0QFO-BZFSTҎ֎ (PPHMF.BQT౳
    ΋΄΅ಉ༷ɻ
    ม׵͕ඞཁ!!
    

    View Slide

14. WebϝϧΧτϧ ͬͯʁ
    ͬ͘͟Γઆ໌͢Δͱɾɾɾ
    • Google͕ࡦఆͨ͠࠲ඪ
    • ੈք஍ਤΛXY͔࣠ͭਖ਼ํܗͰදͤΔ
    • ๺ۃͱೆۃ͋ͨΓ͸ඳըର৅֎
    

    View Slide

15. ϓϩάϥϛϯά OpenLayers
    ྫʣத৺࠲ඪΛઃఆ͍ͨ͠
    let lnglat = ol.proj.fromLonLat([ܦ౓, Ң౓]);
    olView.setCenter(lnglat);
    let center = olView.getCenter();
    let lnglat = ol.proj.transform(center, 'EPSG:3857', 'EPSG:4326');
    

    View Slide

16. ·ͱΊ
    • OpenLayers ͱ͸
    • ʮແྉʴ੍ݶͳ͠ɺखܰɺΧελϚΠζ๛෋ʯ
    • ࠲ඪ
    • ܦҢ౓Ͱ͸ͳ͘WebϝϧΧτϧͳͷͰ஫ҙͯ͠Ͷ
    

    View Slide

17. OpenLayers
    ɹͰ࢝ΊΔ஍ਤͷૢ࡞
    ͱগ͠࠲ඪͷ͓͸ͳ͠
    ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide