Pioneer本ホームページでは、JavaScriptを使用しています。ウェブブラウザの設定でJavaScriptを無効にしている場合、正しく表示されませんので、JavaScriptを有効にしてご利用ください。未来の移動体験を創るモビリティAIプラットフォームさまざまなUXを実現するサービスの開発が可能です。APIとして、配車・配送ルートの最適化を実現するAPIを提供しています。API社内利用向けに、このAPIをコールし地図上に結果を表示するWebアプリケーションをFlutterで構築しています。その実装事例に関して、紹介します。社歴10年、クラウドエンジニア歴約3年の中堅エンジニア。普段はAWSを利用したサービスのバックエンド開発などを担当。フルスタックエンジニアを目指してFlutter勉強中(歴半年程度)。地図を表示する地図を表示するためのライブラリとしてflutter_mapを利用します。flutter_mapこのライブラリを使うことで簡単に地図表示をすることができます。TilelayerでOpenStreetMapのタイルサーバーを指定します。MapOptionsのcenterで表示する地図の中心を指定できます。今回はパイオニア川越事業所を中心に表示するようにしました。冒頭に定義している変数(markers/lines/result/selectO)は後ほど利用します。}}地図を表示することができました。地点を設定するルート探索をするために、出発地、目的地を設定する必要があります。Flutter_mapは任意の地点にマーカーを表示することが可能です。マーカーを追加する関数を定義します。});}この関数をMapOptionsのonLongPressで使います。このオプションは地図上を長押ししたときの処理を定義することができます。コールバックとして、緯度経度の情報が得られるため、マーカーにその情報を付与しています。FlutterMapのchildrenに、MarkerLayerを追加します。これで地図上にマーカーを表示することができるようになります。ルート形状を表示するためのPolylineLayerも追加しておきます。(ここでは使用しませんが、"5.ルート探索結果を表示する"で使用します)また、設定したマーカーを削除できるよう地点クリアボタンを地図に重ねて右上に表示するようにし、Stackウィジェットでbody全体を囲います。},])地図上任意の場所を長押しすることで、出発地(緑色の旗)、目的地(ピンク色の旗)を順に設定できるようになりました。4.ルート探索APIを呼ぶ出発地と目的地の設定ができたので、ルート探索APIをコールします。API通信は以下の記事を参考にRetrofitを利用して実装しました(本投稿では詳細の説明はしません)。RetrofitAPIの定義をします。req);}APIのリクエスト/レスポンスモデルの定義をします。RoutingRequestモデルがリクエストボディに含む内容で、それぞれ以下を表します。設定可能ですが、今回は含めていません。設定しない場合はルート探索APIで設定されているデフォルトの値でAPIコールされます。RoutingRequestモデルに関連するPointInfo/LatLonモデルの各要素は以下を表します。経度PointInfoには立寄地も設定可能ですが、今回は含めていません。_$LatLonToJson(this);}RoutingResponseモデルがレスポンスに含まれる内容で、それぞれ以下を表します。探索エラーメッセージコード。_$RoutingResponseToJson(this);}準備が整いましたのでmap_page.dartにAPIをコールする部分を実装します。Stackウィジェットの要素として追加します。出発地と目的地が設定されているときにOutputボタン押すことでルート探索APIを呼ぶようにしています。20))),),出発地と目的地を設定し、Outputボタンを押してみます。開発者コンソール上からルート探索APIをコールし、結果が得られていることが確認できました。これを地図上に表示します。ルート探索結果を表示するルート形状を描画するための点群の情報はPathPointListに含まれるため、これをflutter_mapが表示できるようPolylineに変換する関数を定義します。Colors.red);}距離/所要時間はDataTableウィジェットを使用して、表として表示します。}}map_page.dartに表示する処理を実装します。結果を表示"に続けて以下を追加します。});}responseのerrorCodeがゼロの場合、ルート探索が成功です。エラー処理に関してはここでは割愛しています。レスポンスから距離/所要時間を求めて、resultに設定することで表に表示します。ルート形状は前述の関数を呼び出した結果をlinesに追加することで表示します。最後に、Stackウィジェットの要素として以下を追加します。結果の表を右下に表示できるようになります。)}以上で、完了です。ルート探索APIをコールし、結果を地図上に表示することができました。APIは、パイオニアのナビゲーションシステム開発において構築してきた、独自のルートテクノロジーをAPIを通じて利用できるサービスです。実装方法などについて、お気軽にお問い合わせください。