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.4k
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
900
コミット前に Lintチェックしませんか?
zucky_zakizaki
2
750
令和からはじめよう!!ブログとフロントのお勉強
zucky_zakizaki
0
120
自分を成長させる! / Grow yourself / #engineers_lt
zucky_zakizaki
0
260
コミュニティでの学びを社内に循環させる / Learning the community inside the company
zucky_zakizaki
2
1.4k
悩みにBarはいかが?
zucky_zakizaki
2
690
Barのすすめ(お酒の効能から考える)draft版
zucky_zakizaki
1
310
野毛で呑んでがやがやしようぜ!!〜初級編〜
zucky_zakizaki
0
1.7k
「登壇やLTを始めてみたい」方の 背中を押してみたい
zucky_zakizaki
0
2.1k
Other Decks in Technology
See All in Technology
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
150
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
390
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
180
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
170
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
460
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Writing Fast Ruby
sferik
628
62k
Navigating Team Friction
lara
189
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
It's Worth the Effort
3n
187
28k
Bash Introduction
62gerente
615
210k
The Language of Interfaces
destraynor
161
25k
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 ɹͰ࢝ΊΔਤͷૢ࡞ ͱগ͠࠲ඪͷ͓ͳ͠ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠