【テクニカルウェビナー#3】Mapbox GL JS 応用編

本スライドは、Mapbox Japanによるウェビナー「【テクニカルウェビナー#3】Mapbox GL JS 応用編」のスライドです。

目的：Mapbox Maps製品のエコシステムを技術的観点から理解する
ゴール：
・Source, Layer, Styleについて理解する
・Mapbox GL JSの簡単な使い方を理解する
・各種APIの役割を理解する
・Web上のリファレンスを見て調査できるようになる

Mapbox Japan公式サイト： https://www.mapbox.jp/
この資料に関するお問い合わせ： https://www.mapbox.jp/contact
このウェビナーはこちらからご覧いただけます：https://www.mapbox.jp/webinars/technical-mapbox-webinar-03

Transcript

1. Mapbox Maps Mapbox GL JS詳細
2. 目的・ゴール 目的 • Mapbox Maps製品のエコシステムを技術的観点から理解する ゴール • Source, Layer, Styleについて理解する • Mapbox GL JSの簡単な使い方を理解する • 各種APIの役割を理解する • ウェブ上のリファレンスを見て調査できるようになる 対象 • Mapbox Maps製品の技術にご興味のある方
3. イベント処理
4. イベントの種類 • 色々なイベント　 • Evented: イベントを持つ要素の基底クラス ◦ Map → Camera → Evented • map.on(‘load’, callback) ◦ onでcallbackを登録、イベントタイプが ’loaded’ ◦ ロード完了時にfire • SDKソースを探索するとドキュメントにないイベントも ◦ style.load map.style.on('style.load', ()=> { console.log('style#style.load'); }); map.on('style.load', ()=> { console.log('map#style.load'); });
5. クリックイベント • MapMouseEventで定義（ソース） • クリックイベントを使っているサンプル ◦ Display a popup on click https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/ map.on('click', (e) => { console.log(e);
6. クリックイベントを試す(󰳕) map.on('click', (e) => { console.log(e); new mapboxgl.Popup() .setLngLat(e.lngLat) .setHTML('other') .addTo(map); }); map.on('click', 'seminar', (e) => { console.log(e); new mapboxgl.Popup() .setLngLat(e.lngLat) .setHTML('Tokyo station') .addTo(map); }); Map#onはEvented#onのオーバーロードが定義 レイヤ名
7. queryRenderedFeatures • 座標上のfeatureを探すAPI • 描画されたfeatureのみ • サンプル map.on('click', (e) => { console.log(e); const features = map.queryRenderedFeatures(e.point); let description = ''; for(const feature of features) { console.log(feature); description += `${feature.layer['id']}: ${feature.properties['name']} <br />` } new mapboxgl.Popup() .setLngLat(e.lngLat) .setHTML(description) .addTo(map); });
8. プラグイン / コントロール
9. プラグイン • 地図に機能を追加するプラグイン ◦ Geocoder ◦ Directions • MapboxのGitHubにあるものは基本的にサポート対象
10. Geocodingを試す(󰳕) サンプル, mapbox-gl-geocoder map.addControl( new MapboxGeocoder({ accessToken: mapboxgl.accessToken, mapboxgl: mapboxgl }) ); <script src="https://api.mapbox.com/mapbox-gl-js/plugins/ mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min. js"></script> <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins /mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css " type="text/css">
11. カスタムコントロールを試す(󰳕) • 自作コントロールも使用可能 • onAdd, onRemove(IControl)を実装するクラスを定義 ◦ Geocoder onAdd, onRemove class HelloWorldControl { onAdd(map) { this._map = map; this._container = document.createElement('button'); this._container.className = 'mapboxgl-ctrl'; this._container.textContent = 'Hello, world'; this._container.onclick = () => {alert('clicked')} return this._container; } onRemove() { this._container.parentNode.removeChild(this._container); this._map = undefined; } } map.addControl( new HelloWorldControl() );
12. Mapbox GL JS - カメラ
13. カメラの概念 • 「カメラ越しに地図を見ている」イメージ ◦ Map extends Camera ◦ 3D terrain sample • カメラ移動 ◦ jumpTo: 瞬間移動 ◦ easeTo: スクロール移動 ◦ flyTo: 一度カメラを引いて移動 • Free Camera ◦ v2で導入 ◦ カメラのx/y/z、カメラを向けるx/y/zを指定 --> 自動的にlat/lng/zoom/pitch/bearing制御 ◦ サンプル　https://docs.mapbox.com/mapbox-gl-js/example/free-camera-point/
14. jumpTo, easeTo, flyTo を試す(󰳕) カスタムコントロールでjumpTo, easeTo, flyToボタン作成 東京駅 / 秋葉原駅を往復 coordinates = [ [139.773056, 35.698634], // Akihabara [139.768435, 35.681054], // Tokyo ]; class CameraControl { onAdd(map) { this._cnt = 0; this._map = map; const container = document.createElement('div'); container.className = 'mapboxgl-ctrl'; const flyTo = document.createElement('button'); flyTo.textContent = 'flyTo'; flyTo.onclick = () => { map.flyTo({ center: coordinates[this._cnt++%coordinates.length], zoom: 14, speed: 0.5, }); };
15. Mapbox GL JSのまとめ 代表的なトピック • イベント • プラグイン/コントロール • カメラ わからないときはソースを参照