🗺️

【WIP】mapbox_maps_flutterメソッドまとめ

2023/11/30に公開

Flutter

Mapbox

tech

概要

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

前提

本記事内のコード内の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 latitudeはgeolocatorを利用して取得したものを利用しています。
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));

左上のスケールバー非表示

mapboxMap.scaleBar.updateSettings(ScaleBarSettings(enabled: false));

右上のコンパス非表示

mapboxMap.compass.updateSettings(CompassSettings(enabled: false));

宣伝

私が実際にmapbox_maps_flutterを利用して作成したアプリです！
よかったら参考に見てみてください🐕