【テクニカルウェビナー#7】Mapbox GL JS + Turf

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

目的：Mapbox Maps製品のより詳しい使い方について理解する
ゴール：
・Mapbox GL JSの機能についてさらに理解する
・Turf, deck.gl等のサードパーティツールとの連携方法を理解する

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

Transcript

1. テクニカルウェビナー #7 Mapbox GL JS + Turf
2. 目的・ゴール 目的 • Mapbox Maps製品のより詳しい使い方について理解する ゴール • 新機能、新製品について知る • Mapbox GL JSの機能についてさらに理解する • Mapbox GL JSとMapbox Maps SDK for Android/iOSとの違いを知る • Turf, deck.gl等のサードパーティツールとの連携方法を理解する 対象 • Mapbox Maps製品の技術にご興味のある方
3. はじめに Turf: 地理情報の分析等を行うJavaScriptのサードパーティーライブラリ Mapbox GL JSと組み合わせて使用可 機能: • Measurement: 計測 ◦ distance: 2地点間の距離計算 ◦ length: LineStringの距離計算 ◦ area: 面積計算 • Transformation: 変形 ◦ circle: 円に近似したPolygonを出力 ◦ polygonSmooth: なめらかにしたPolygonを出力
4. Mapbox GL JSでTurfを使ったサンプルの探し方1 Examples
5. Mapbox GL JSでTurfを使ったサンプルの探し方2 Tutorials
6. 練習(󰳕) コンソール上に距離を表示（distance） インポート（CDN） 処理
7. nodeを使用する場合 npmパッケージも利用可 % npm install @turf/distance % npm install @turf/helpers CommonJS ES Modules package.json
8. Mapbox GL JSのサンプル
9. 復習：FeatureCollectionとレイヤー 一つのGeoJSONからCircle/Lineレイヤーを作成 ① ① ② ② ③ ③ ④ ④ A A
10. Measure Distances
11. 概要 Mature distances クリックした地点間の距離を計測 • 新しい地点クリックで追加 • 既存地点クリックで削除 • Circle/Line表示 • 左上に距離表示 lengthを利用
12. データの初期化処理(󰳕) GeoJSONデータ（LineString）をグローバル領域に保存
13. レイヤー作成(󰳕) GeoJSONをソースに指定 Circleレイヤー Lineレイヤー
14. クリック検出(󰳕) クリックした場所にPointがあるか調査 geojson.featuresが２個以上あるときは一番最後が必ず LineString 後でLineString追加されるのでここで削除しておく
15. クリック処理(󰳕) クリックした場所にPointがあった場合はそれを除去 そうでなければクリックした場所を Pointとして追加
16. 距離計測(󰳕) Pointが2個以上ある場合はそれらを LineStringにも追加 LineStringの長さを計測 ソースのデータのアップデート
17. Helper(󰳕) turfのhelperを使うとGeoJSONの記述量が削減 グローバルの初期化 空リストの指定はエラー Pointの作成 LineStringの作成
18. Draw a polygon and calculate its area
19. 概要 Draw a polygon and calculate its area 囲われた領域の面積計算 MapboxDrawプラグインを利用 areaを利用
20. Drawコントロールの使い方1 インポート 作成
21. Drawコントロールの使い方2 UIの変更 イベント すべてのコントロールを表示しない 表示するコントロールだけ true eには追加されたFeatureのみ getAll()ですべてのFeatureを含むFeatureCollection取得
22. Drawコントロール作成(󰳕) Drawコントロール作成
23. 面積計算(󰳕) イベント Data (FeatureCollection)を代入 全イベントで同じ処理を使用
24. Transformを試す
25. Circle概要 Polygonで擬似的に円を描画 Circleを利用 booleanPointInPolygon
26. Circleコード(󰳕) circleはFeatureを生成
27. PolygonSmooth概要 もとよりも滑らかなPolygonを生成 polygonSmoothを利用 geojson.ioでPolygon作成
28. PolygonSmoothコード(󰳕) iterationが大きいほどなめらか polygon0 polygon1 polygon2
29. その他のトピック・まとめ
30. JavaScript以外の実装 Turf for Java (GitHub) Mapbox製 Turf for Swift Mapbox製 注意点: 一部の機能が不足
31. まとめ • TurfはJavaScript用の地理情報分析ライブラリ • GeoJSONを使用するのでMapbox GLJSとの親和性高 • Java/Swift版は注意が必要