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. ![VDLZ@[BLJ[BLJ ɾ໼࡚ɹ༞थʢYazaki Yukiʣ ɾΤϯδχΞ 9೥໨ ɹC#(.net) ͱ WindowsΞϓϦଟΊ ɾWebܥ ໿൒೥

    ɾ࠷ۙ͸ RailsʴVue.js ͕޷͖ ɹ͋ͱ Xamarin͋ͨΓ ɾQiitaॻ͍ͯ·͢ ɹhttps://qiita.com/zaki_zaki ɹ
  2. OpenLayers ͱ͸ • ஍ਤ༻JSϥΠϒϥϦ • ঎༻ΞϓϦ഑෍Մೳ (2-clause BSD) • ແྉʴ੍ݶͳ͠

    • खܰ • ΧελϚΠζ͕๛෋ ͕͜͜ϙΠϯτ!! ֓ཁ zϙΠϯτ!!zͷ෦෼Λ ॱ൪ʹ࿩͍͖͍ͯͨ͠ͱࢥ͍·͢ɻ
  3. • 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ͳΒແྉ ˞ ͷ஍ਤར༻͕Մೳʂʂ ˞ΫϨδοτهࡌ౳ͷن໿͸͋Γ·͢ɻ
  4. <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
  5. ϓϩάϥϛϯά OpenLayers ྫʣத৺࠲ඪΛઃఆ͍ͨ͠ let lnglat = ol.proj.fromLonLat([ܦ౓, Ң౓]); olView.setCenter(lnglat); let

    center = olView.getCenter(); let lnglat = ol.proj.transform(center, 'EPSG:3857', 'EPSG:4326');