2018/07/21(土) フロントもくもく#11 https://html5ebisu.connpass.com/event/93619/
OpenLayersɹͰ࢝ΊΔਤͷૢ࡞ͱগ͠࠲ඪͷ͓ͳ͠ϑϩϯτ͘͘ձ#112018/07/21 ()࡚ ༞थ @zucky_zakizaki
View Slide
![[email protected][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.ಡΈࠐΈαϯϓϧίʔυCZDPEFQFOIUUQTDPEFQFOJP[[email protected][BLJ[BLJQFOE,0..9
ΧελϚΠζ͕๛• ແྉʴ੍ݶͳ͠• खܰ• ΧελϚΠζ͕๛σϞͰઆ໌͠·͢ɻαϯϓϧίʔυCZDPEFQFOIUUQTDPEFQFOJP[[email protected][BLJ[BLJQFO0X8N:,
࠲ඪͷ͓ͳ͠ਤܥϥΠϒϥϦΛѻ͏্ͰֶΜͰ͓͍ͨ΄͏͕Α͍͜ͱɻ
࠲ඪʹ͍ͭͯܦҢ[ौ୩] 139.701636, 35.658034WebϝϧΧτϧ[ौ୩] 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ɹͰ࢝ΊΔਤͷૢ࡞ͱগ͠࠲ඪͷ͓ͳ͠͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠