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
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
データの品質が低いと何が困るのか
kzykmyzw
6
1k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
All you need to know about InnoDB Primary Keys
lefred
0
120
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Writing Fast Ruby
sferik
628
61k
Docker and Python
trallard
44
3.3k
Producing Creativity
orderedlist
PRO
343
39k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
YesSQL, Process and Tooling at Scale
rocio
171
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Practical Orchestrator
shlominoach
186
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
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 ɹͰ࢝ΊΔਤͷૢ࡞ ͱগ͠࠲ඪͷ͓ͳ͠ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠