Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
OpenLayersで始める地図の操作
Search
zaki
July 21, 2018
Technology
0
1.3k
OpenLayersで始める地図の操作
2018/07/21(土) フロントもくもく#11
https://html5ebisu.connpass.com/event/93619/
zaki
July 21, 2018
Tweet
Share
More Decks by zaki
See All by zaki
開発環境としての Python x Remote Container の使い道 / How to use Python x Remote Container as a development environment
zucky_zakizaki
0
850
コミット前に Lintチェックしませんか?
zucky_zakizaki
2
700
令和からはじめよう!!ブログとフロントのお勉強
zucky_zakizaki
0
110
自分を成長させる! / Grow yourself / #engineers_lt
zucky_zakizaki
0
240
コミュニティでの学びを社内に循環させる / Learning the community inside the company
zucky_zakizaki
2
1.3k
悩みにBarはいかが?
zucky_zakizaki
2
650
Barのすすめ(お酒の効能から考える)draft版
zucky_zakizaki
1
290
野毛で呑んでがやがやしようぜ!!〜初級編〜
zucky_zakizaki
0
1.6k
「登壇やLTを始めてみたい」方の 背中を押してみたい
zucky_zakizaki
0
2k
Other Decks in Technology
See All in Technology
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Your Own Lightsaber
phodgson
104
6.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Six Lessons from altMBA
skipperchong
27
3.6k
Adopting Sorbet at Scale
ufuk
74
9.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
RailsConf 2023
tenderlove
29
1k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
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
खܰ • ແྉʴ੍ݶͳ͠ • खܰ • ΧελϚΠζ͕๛
<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
ΧελϚΠζ͕๛ • ແྉʴ੍ݶͳ͠ • खܰ • ΧελϚΠζ͕๛ σϞͰઆ໌͠·͢ɻ αϯϓϧίʔυ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 ɹͰ࢝ΊΔਤͷૢ࡞ ͱগ͠࠲ඪͷ͓ͳ͠ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠