OpenLayersで始める地図の操作

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

Transcript

1. OpenLayers ɹͰ࢝ΊΔ஍ਤͷૢ࡞ ͱগ͠࠲ඪͷ͓͸ͳ͠ ϑϩϯτ΋͘΋͘ձ#11 2018/07/21 (౔) ໼࡚ ༞थ @zucky_zakizaki
2. ![VDLZ@[BLJ[BLJ ɾ໼࡚ɹ༞थʢYazaki Yukiʣ ɾΤϯδχΞ 9೥໨ ɹC#(.net) ͱ WindowsΞϓϦଟΊ ɾWebܥ ໿൒೥ ɾ࠷ۙ͸ RailsʴVue.js ͕޷͖ ɹ͋ͱ Xamarin͋ͨΓ ɾQiitaॻ͍ͯ·͢ ɹhttps://qiita.com/zaki_zaki ɹ
3. ࿩͢͜ͱ • OpenLayers ͬͯͳΜͧ΍ • σϞ • ࠲ඪͷ͓͸ͳ͠ ɹɹ஍ਤܥϥΠϒϥϦΛѻ͏্Ͱ ɹɹֶΜͰ͓͍ͨ΄͏͕Α͍͜ͱ
4. HomePage http://openlayers.org/ GitHub https://github.com/openlayers/openlayers ͜ͷ΁ΜΛͬ͘͟Γ࿩͍͖ͯ͠·͢
5. OpenLayers ͱ͸ • ஍ਤ༻JSϥΠϒϥϦ • ঎༻ΞϓϦ഑෍Մೳ (2-clause BSD) • ແྉʴ੍ݶͳ͠ • खܰ • ΧελϚΠζ͕๛෋ ͕͜͜
   ϙΠϯτ
   !! ֓ཁ zϙΠϯτ
   !!zͷ෦෼Λ
   ॱ൪ʹ࿩͍͖͍ͯͨ͠ͱࢥ͍·͢ɻ
6. ແྉʴ੍ݶͳ͠ • ແྉʴ੍ݶͳ͠ • खܰ • ΧελϚΠζ͕๛෋
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
   ͳΒແྉ ˞ ͷ஍ਤར༻͕Մೳʂʂ
   ˞ΫϨδοτهࡌ౳ͷن໿͸͋Γ·͢ɻ
8. OpenStreetMap(OSM) ͱ͸ • ΦʔϓϯϥΠηϯεͷ஍ਤ • ొ࿥΍ฤू͸Ұൠͷํ͕ߦͳ͍ͬͯΔ • λΠϧʢ஍ਤʣαʔόͷࣗ࡞͕Մೳ ͜ΜͳΠϕϯτ΋ɾɾɾ
   
   IUUQTPQFOTUSFFUNBQKQ
   
9. खܰ • ແྉʴ੍ݶͳ͠ • खܰ • ΧελϚΠζ͕๛෋
10. <div id="map"></div> • ແྉʴ੍ݶͳ͠ • खܰ • ΧελϚΠζ͕๛෋ var olmap = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], }); <link rel="stylesheet" href=“ʙ/ol.css" type="text/css"> <script src=“ʙ/ol.js”></script> ಡΈࠐΈ EJWཁૉ Ϛοϓੜ੒
    ʴ
    04.ಡΈࠐΈ αϯϓϧίʔυ
    CZ
    DPEFQFO
    
    IUUQTDPEFQFOJP[VDLZ@[BLJ[BLJQFOE,0..9
    
    
11. ΧελϚΠζ͕๛෋ • ແྉʴ੍ݶͳ͠ • खܰ • ΧελϚΠζ͕๛෋ σϞͰઆ໌͠·͢ɻ αϯϓϧίʔυ
    CZ
    DPEFQFO
    
    IUUQTDPEFQFOJP[VDLZ@[BLJ[BLJQFO0X8N:,
    
12. ࠲ඪͷ͓͸ͳ͠ ஍ਤܥϥΠϒϥϦΛѻ͏্Ͱ
    ֶΜͰ͓͍ͨ΄͏͕Α͍͜ͱɻ
13. ࠲ඪʹ͍ͭͯ ܦҢ౓ [ौ୩] 139.701636, 35.658034 WebϝϧΧτϧ [ौ୩] 15551514.982507259,4253668.826571383 զʑ
    ͱ
    0QFO-BZFST
    Ͱѻ͏࠲ඪͷछྨ͕ҟͳΔɻ
    ˞0QFO-BZFSTҎ֎ (PPHMF.BQT౳ ΋΄΅ಉ༷ɻ ม׵͕ඞཁ!!
14. WebϝϧΧτϧ ͬͯʁ ͬ͘͟Γઆ໌͢Δͱɾɾɾ • Google͕ࡦఆͨ͠࠲ඪ • ੈք஍ਤΛXY͔࣠ͭਖ਼ํܗͰදͤΔ • ๺ۃͱೆۃ͋ͨΓ͸ඳըର৅֎
15. ϓϩάϥϛϯά OpenLayers ྫʣத৺࠲ඪΛઃఆ͍ͨ͠ let lnglat = ol.proj.fromLonLat([ܦ౓, Ң౓]); olView.setCenter(lnglat); let center = olView.getCenter(); let lnglat = ol.proj.transform(center, 'EPSG:3857', 'EPSG:4326');
16. ·ͱΊ • OpenLayers ͱ͸ • ʮແྉʴ੍ݶͳ͠ɺखܰɺΧελϚΠζ๛෋ʯ • ࠲ඪ • ܦҢ౓Ͱ͸ͳ͘WebϝϧΧτϧͳͷͰ஫ҙͯ͠Ͷ
17. OpenLayers ɹͰ࢝ΊΔ஍ਤͷૢ࡞ ͱগ͠࠲ඪͷ͓͸ͳ͠ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠