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
740
令和からはじめよう!!ブログとフロントのお勉強
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
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
120
Mackerel in さくらのクラウド
cubicdaiya
1
380
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
6.4k
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
1.6k
S3のライフサイクル設計でハマったポイント
mkumada
0
100
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
5
560
サイボウズフロントエンドの横断活動から考える AI時代にできること
mugi_uno
3
1.3k
文字列の並び順 / String Collation
tmtms
1
120
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
200
Backboneとしてのtimm2025
yu4u
3
1.2k
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
170
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.6k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
RailsConf 2023
tenderlove
30
1.2k
The Invisible Side of Design
smashingmag
301
51k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
4 Signs Your Business is Dying
shpigford
184
22k
Designing for Performance
lara
610
69k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Experiences People Love
moore
142
24k
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 ɹͰ࢝ΊΔਤͷૢ࡞ ͱগ͠࠲ඪͷ͓ͳ͠ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠