Isochrone API がおもしろいので紹介する

2.5K Views

September 25, 24

スライド概要

https://teamlab.connpass.com/event/329937/
での登壇資料です。

profile-image

フリーランスiOSエンジニア 「エンジニアと人生」コミュニティ主宰

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

Isochrone API がおもしろいので紹介する 堤 修一 (@shu223)

2.

自己紹介 • 堤 修一 • @shu223 (GitHub, Zenn, Qiita, note, Docswell, 𝕏, YouTube, Podcast, etc...) • 書籍(商業出版4冊、個人出版多数 @BOOTH):

3.

Isochrone(アイソクロン)とは? • 「等時線」 と訳される(c.f. 等高線) • ある地点から◯分で到達で きる範囲を計算 • 単純な直線距離ではなく移 動経路が考慮される 中心地点から徒歩5分, 10分, 20分のアイソクロン

4.

中心地点から移動時間5分、10分、20分のアイソクロン 徒歩 ! 車 !

5.

• 当然徒歩より車のアイソクロンが大きい 徒歩 ! 車 !

6.

• 道路が通ってない山間部ではアイソクロンが小さくなってい る

7.

距離ベースのアイソクロン (300m, 500m, 1km) ! !

8.

• 距離ベースなので徒歩でも車でも範囲はあまり変わらない • 通れる道などが違うので微妙に差異がある

9.

iOS デモ

10.

ルート検索やPOI検索との違い • 通常のルート検索API(MapKit, Google, Mapbox, etc...)は始点と終点を決 める必要がある • POI(Point of Interest)検索は領域(region)の指定はでき るが移動時間では絞り込めない

11.

Isochrone のユースケース • ジョギングコースやハイキングコースの検討 • 昼休みや予定のスキマ時間等にちょうどいい行き先を見つけ る • 観光客が初めて訪れる街を散策する

12.

Isochrone のユースケース • ジョギングコースやハイキングコースの検討 • 昼休みや予定のスキマ時間等にちょうどいい行き先を見つけ る • 観光客が初めて訪れる街を散策する → 移動時間ベースでコースや行き先を決めたい場合に便利

13.

Mapbox の Isochrone API docs.mapbox.com/api/navigation/isochrone/ Isochroneを計算するAPIはBing Maps等、他にも提供している ところはある

14.

価格

15.

Parameters (Required) https://api.mapbox.com/isochrone/v1/{profile}/{coordinates}?{contours_minutes|contours_meters} • profile : 移動手段 - mapbox/{walking|cycling|driving|driving-traffic} • contours_minutes: 移動時間を分で指定 - 昇順で4つまで指定できる。最大60分。 • contours_meters: 移動距離をメートルで指定 - 昇順で4つまで指定できる。最大100000メートル。

16.

Parameters (Optional) 割愛(ドキュメント見たほうが早い)

17.

iOSでの実装

18.

MapboxDirections パッケージ github.com/mapbox/mapbox-directions-swift Mapboxのナビゲーション系APIをラップしたSwift Package • Directions API • Map Matching API • Isochrone API • 1 etc... これを使わずに普通にAPIを直接たたいてもいいとは思う 1

19.

Isochrone の計算 import MapboxDirections let options = IsochroneOptions(centerCoordinate: coordinate, contours: .byDistances([ .init(value: 500, unit: .meters), ])) .init(value: 1, unit: .kilometers) Isochrones.shared.calculate(options) { session, result in ... // resultの処理 }

20.

レスポンスの処理 Isochrones.shared.calculate(options) { session, result in if case .success(let response) = result { // レスポンスを地図上に描画する } } ... Isochrones APIのレスポンスはGeoJSON形式で得られる → MapboxのマップにもMapKitのマップにも描画可

21.

Mapboxマップのスナップショットに描画(MapboxStatic パッケージ利 用) if case .success(let response) = result { let data = try! JSONEncoder().encode(response) let geoJSONString = String(data: data, encoding: .utf8)! let geoJSONOverlay = GeoJSON(objectString: geoJSONString) snapshotOptions.overlays.append(geoJSONOverlay) let snapshot = Snapshot(options: snapshotOptions, accessToken: accessToken) drawImage(snapshot.image)

22.

Mapboxマップのスナップショットに描画

23.

Mapboxマップに描画(MapboxMaps パッケージ利用) let data = try! JSONEncoder().encode(response) let geoJSONString = String(data: data, encoding: .utf8)! var geoJSONSource = GeoJSONSource(id: "source") geoJSONSource.data = .string(geoJSONString) var fillLayer = FillLayer(id: "polygon", source: geoJSONSource.id) ... // FillLayerの設定 try! self.mapView.mapboxMap.addSource(geoJSONSource) try! self.mapView.mapboxMap.addLayer(fillLayer, layerPosition: nil)

24.

Appleマップ(MapKit)に描画 UIKit版の MKMapView, SwiftUI版の Map どちらも利用可 解説記事: MapKitでGeoJSONを扱う

25.

Isochrone APIとルート検索やPOI検索との連 携 Isochrone APIの結果のGeoJSONからPolygon / Polyline を形成 する位置情報(緯度経度)の配列が得られる guard let feature = feature as? MKGeoJSONFeature else { ... } for geometry in feature.geometry { guard let multiPoint = geometry as? MKMultiPoint else { ... } ... // MKMultiPoint から [CLLocationCoordinate2D] が得られる → 緯度経度を扱う各種機能と連携可能

26.

Isochroneまとめ • 通常のルート検索と違い、移動時間ベースでコースや行き先 を決めたい場合に便利 • MapboxなどがAPIを提供しており、Swift Packageも用意され ている • Mapbox Maps SDK以外にもMapKit等どのようなマップとも 組み合わせて利用可能 • ルート検索やPOI検索とも連携させていろいろできそう!

27.

ご清聴ありがとうございました!