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

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

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

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

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

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

• 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
ͳΒແྉ ˞ ͷ஍ਤར༻͕Մೳʂʂ
˞ΫϨδοτهࡌ౳ͷن໿͸͋Γ·͢ɻ 

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

IUUQTPQFOTUSFFUNBQKQ
 

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

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

IUUQTDPEFQFOJP[VDLZ@[BLJ[BLJQFOE,0..9

 

ΧελϚΠζ͕๛෋ • ແྉʴ੍ݶͳ͠ • खܰ • ΧελϚΠζ͕๛෋ σϞͰઆ໌͠·͢ɻ αϯϓϧίʔυ
CZ
DPEFQFO

IUUQTDPEFQFOJP[VDLZ@[BLJ[BLJQFO0X8N:,
 

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

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

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

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

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

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