OpenLayersで始める地図の操作

5c15692e0997b53f1de1627d9fd41f46?s=47 zaki
July 21, 2018

 OpenLayersで始める地図の操作

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

5c15692e0997b53f1de1627d9fd41f46?s=128

zaki

July 21, 2018
Tweet

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.ಡΈࠐΈ αϯϓϧίʔυCZDPEFQFO IUUQTDPEFQFOJP[VDLZ@[BLJ[BLJQFOE,0..9
  11. ΧελϚΠζ͕๛෋ • ແྉʴ੍ݶͳ͠ • खܰ • ΧελϚΠζ͕๛෋ σϞͰઆ໌͠·͢ɻ αϯϓϧίʔυCZDPEFQFO 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 ɹͰ࢝ΊΔ஍ਤͷૢ࡞ ͱগ͠࠲ඪͷ͓͸ͳ͠ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠