2018/07/21 フロントもくもく#11 https://html5ebisu.connpass.com/event/93619/

1. OpenLayers
で始める地図の操作
と少し座標のおはなし
フロントもくもく会#11
2018/07/21 (土)
矢崎 祐樹 @zucky_zakizaki

2. @zucky_zakizaki
・矢崎 祐樹（Yazaki Yuki）
・エンジニア 9年目
C#(.net) と Windowsアプリ多め
・Web系 約半年
・最近は Rails＋Vue.js が好き
あと Xamarinあたり
・Qiita書いてます
https://qiita.com/zaki_zaki

3. 話すこと
• OpenLayers ってなんぞや
• デモ
• 座標のおはなし
地図系ライブラリを扱う上で
学んでおいたほうがよいこと

4. HomePage http://openlayers.org/
GitHub https://github.com/openlayers/openlayers
このへんをざっくり話していきます

5. OpenLayers とは
• 地図用JSライブラリ
• 商用アプリ配布可能
(2-clause BSD)
• 無料＋制限なし
• 手軽
• カスタマイズが豊富
ここが ポイント !!概要
ポイント !! の部分を
順番に話していきたいと思います。

6. 無料＋制限なし
• 無料＋制限なし
• 手軽
• カスタマイズが豊富

7. • 1日/25,000 リクエスト
から…
• 1ヶ月/約28,000リクエスト
に変更(2018/07/16から施行)
詳しくは ↓↓
https://cloud.google.com/maps-platform/pricing/sheet/
GoogleMaps（無料枠）の場合
• 無料＋制限なし
• 手軽
• カスタマイズが豊富
OpenLayers の場合
• OpenStreetMap（OSM）
• 地理院地図
• etc…
OpenLayers なら無料(※)の地図利用が可能！！
※クレジット記載等の規約はあります。

8. OpenStreetMap(OSM) とは
• オープンライセンスの地図
• 登録や編集は一般の方が行なっている
• タイル（地図）サーバの自作が可能
こんなイベントも・・・
< https://openstreetmap.jp/ >

9. 手軽
• 無料＋制限なし
• 手軽
• カスタマイズが豊富

10. <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>
読み込み
div要素
マップ生成
＋
OSM読み込み
サンプルコード by codepen
< https://codepen.io/zucky_zakizaki/pen/dKOMMX >

11. カスタマイズが豊富
• 無料＋制限なし
• 手軽
• カスタマイズが豊富
デモで説明します。
サンプルコード by codepen
< https://codepen.io/zucky_zakizaki/pen/OwWmYK >

12. 座標のおはなし
地図系ライブラリを扱う上で
学んでおいたほうがよいこと。

13. 座標について
経緯度
[渋谷] 139.701636, 35.658034
Webメルカトル
[渋谷] 15551514.982507259,4253668.826571383
我々 と OpenLayers で扱う座標の種類が異なる。
※OpenLayers以外(GoogleMaps等)もほぼ同様。
変換が必要!!

14. Webメルカトル って？
ざっくり説明すると・・・
• Googleが策定した座標
• 世界地図をXY軸かつ正方形で表せる
• 北極と南極あたりは描画対象外

15. プログラミング OpenLayers
例）中心座標を設定したい
let lnglat = ol.proj.fromLonLat([経度, 緯度]);
olView.setCenter(lnglat);
let center = olView.getCenter();
let lnglat = ol.proj.transform(center, 'EPSG:3857', 'EPSG:4326');

16. まとめ
• OpenLayers とは
• 「無料＋制限なし、手軽、カスタマイズ豊富」
• 座標
• 経緯度ではなくWebメルカトルなので注意してね

17. OpenLayers
で始める地図の操作
と少し座標のおはなし
ご静聴ありがとうございました