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
710
令和からはじめよう!!ブログとフロントのお勉強
zucky_zakizaki
0
110
自分を成長させる! / Grow yourself / #engineers_lt
zucky_zakizaki
0
240
コミュニティでの学びを社内に循環させる / Learning the community inside the company
zucky_zakizaki
2
1.4k
悩みに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
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
190
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
180
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
190
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
120
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
340
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.4k
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.2k
MIMEと文字コードの闇
hirachan
2
1.4k
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
350
Share my, our lessons from the road to re:Invent
naospon
0
150
Featured
See All Featured
Scaling GitHub
holman
459
140k
Building Adaptive Systems
keathley
40
2.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
A better future with KSS
kneath
238
17k
Gamification - CAS2011
davidbonilla
80
5.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Practical Orchestrator
shlominoach
186
10k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
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 ɹͰ࢝ΊΔਤͷૢ࡞ ͱগ͠࠲ඪͷ͓ͳ͠ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠