🗺️

【WIP】mapbox_maps_flutterメソッドまとめ

2023/11/30に公開

概要

mapbox公式のFlutter用のSDKで、アプリを作成中なので、使ったメソッド等を都度残して行こうと思います。
(全体的な実装方法は説明しません。需要がありそうだったらしっかり書きます...🐜)
https://pub.dev/packages/mapbox_maps_flutter

前提

本記事内のコード内のMapboxMapは下記のonMapCreatedで受け取れるMapboxMapのインスタンスを指します。

onMapCreated: (MapboxMap mapboxMap) {},

ユーザーの位置情報表示

事前にpermission_handlerを利用し位置情報権限のリクエストを行う必要があります。

実装コード

MapboxMap.location.updateSettings(
 LocationComponentSettings(
   /// ユーザー位置情報表示
    enabled: true,
    /// ユーザーの向きを表す矢印を表示
    puckBearingEnabled: true,
    /// ユーザー位置情報のアイコンからパルスを表示
    pulsingEnabled: true,
    /// 精度リングを表示
    // showAccuracyRing: true,
    /// ユーザー現在位置のアイコンを変更(下記デモコードは3Dのアヒルが表示される)
    // locationPuck: LocationPuck(
    //   locationPuck3D: LocationPuck3D(
    //   modelUri:"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Embedded/Duck.gltf",
    //   ),
    // ),
  ),

カメラポジション移動

longitude latitudegeolocatorを利用して取得したものを利用しています。
MapBoxのパッケージのみで、現在位置の表示ができているので、緯度経度がとれるのではと思い、メソッドを探してみましたが、見当たらなかった為別のパッケージを利用しています。
もし見つけたら教えてくもらえると嬉しいです。

アニメーション有り-実装コード

// flyTo 以外にも様々なアニメーションがあります
await MapboxMap.flyTo(
 CameraOptions(
  center:
   Point(coordinates: Position([longitude], [latitude])).toJson(),
  zoom: 10,
  bearing: 20,
 ),
 // durationでカメラポジションの移動速度を変更
 MapAnimationOptions(duration: 2000, startDelay: 0));

アニメーション無し-実装コード

MapboxMap.setCamera(CameraOptions(
  center: Point(coordinates: Position([longitude], [latitude])).toJson(),
  zoom: 10.0));

Discussion