Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OpenLayersで始める地図の操作

zaki
July 21, 2018

 OpenLayersで始める地図の操作

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

zaki

July 21, 2018
Tweet

More Decks by zaki

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide