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.ಡΈࠐΈ αϯϓϧίʔυCZDPEFQFO IUUQTDPEFQFOJP[VDLZ@[BLJ[BLJQFOE,0..9

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