Flutter

出典：ArcGIS Maps SDK for Flutter - Tutorials - Display a map

マップを表示する

このチュートリアルでは ArcGIS Maps SDK for Flutter を使用して、マップとベースマップ レイヤーを表示する方法を紹介します。

マップには、地理データのレイヤーが含まれています。マップには、ベースマップ レイヤーと、オプションで 1 つ以上のデータ レイヤーを追加できます。

このチュートリアルでは、地形図ベースマップ レイヤーを使用して、富士山付近を表示する地図を作成します。

前提条件

このチュートリアルを実施するには、以下が必要です。

1. API キーにアクセスするための ArcGIS 開発者アカウント。アカウントをお持ちでない場合は、サインアップ（無料）してください。アカウントの作成方法は「開発者アカウントの作成」をご覧ください。
2. 開発環境がシステム要件を満たしていることを確認します。
3. Flutter 用の IDE。VS Code を推奨しています。

認証の設定

このチュートリアルで使用するセキュアな ArcGIS ロケーション サービスにアクセスするには、ArcGIS Location Platform または ArcGIS Online アカウントを使用して、API キー認証を実装する必要があります。

開発またはダウンロード

このチュートリアルを完了するには、2 つの選択肢があります。

1. オプション 1: コードを開発する
2. オプション 2: 完成したソリューションをダウンロードする

オプション 1: コードを開発する

新しい Flutter アプリを作成する

1. VS Code を起動し、ウェルカム タブで [Open…] を選択します。プロジェクトを保存したい場所を選択してください。
2. [View]>[Terminal] に移動してください。
3. ターミナル ウィンドウで、次のコマンドを実行して display_a_map という名前の新しい Flutter アプリを作成します。必要なターゲット プラットフォームと、組織名 com.example.app を設定してください。

   flutter create -e display_a_map --platforms ios,android --org com.example.app
   Flutter command-line tool を使えば、Flutter アプリの作成と実行が簡単に行えます。flutter create -e を実行すると、最小限のアプリケーション テンプレートに基づいて新しい Flutter プロジェクトが作成されます。生成される main.dart にはコメントが含まれておらず、デフォルトの widget test も省略されているため、新しいアプリケーションの開発を始めるための出発点となります。

テンプレート コードをリファクタリングする

ArcGIS Maps SDK for Flutter を使用する際、データの変更に応じて UI を更新するなど、アプリケーションの状態を更新する必要が生じることはよくあります。アプリがこうした処理に対応できるよう、ステートフル ウィジェットを実装します。
ステートレスなウィジェットの実装を使用して地図を表示することも可能です。詳細は Display map サンプルを参照してください。

1. VS Code で、lib/main.dart を開きます。
2. main() 関数内で、runApp() 内に MaterialApp をインスタンス化し、名前付き引数 home に MainApp のインスタンスを設定します。
   main.dart

   void main() {
       runApp(
   
           const MaterialApp(home: MainApp()), //変更
   
       );
   }
3. テンプレートの MainApp クラスの定義を、StatefulWidget を継承するようにリファクタリングします。StatelessWidget キーワードにマウスを合わせ、右クリックして [Refactor…] を選択し、[Convert to StatefulWidget] を選んでコードをリファクタリングします。
   main.dart

   class MainApp extends StatefulWidget { //変更
   
       const MainApp({super.key});
   
       @override
       State<MainApp> createState() => _MainAppState();//変更
   
   }
   
   //追加開始
   class _MainAppState extends State<MainApp> {
       @override
       Widget build(BuildContext context) {
   
           return const MaterialApp(
               home: Scaffold(body: Center(child: Text('Hello World!'))),
           );
   
       }
   }
   //追加終了
4. クラス _MainAppState の build メソッド内で返されている MaterialApp ウィジェットを削除してください。このコードは Flutter の作成テンプレートによって生成されたものであり、後の手順で、マップを含むウィジェットを返すコードに置き換えられます。
   main.dart

   class _MainAppState extends State<MainApp> {
       @override
       Widget build(BuildContext context) {
   
           //削除開始
           return const MaterialApp(
               home: Scaffold(body: Center(child: Text('Hello World!'))),
           );
           //削除終了
   
       }
   }

ArcGIS Maps SDK for Flutter を追加する

arcgis_maps パッケージに依存関係を追加します。

1. VS Code のターミナルで、ディレクトリーを新しいプロジェクトに変更します。

   cd display_a_map
2. 以下のコマンドを実行します。

   dart pub add arcgis_maps
3. 以下のコマンドを実行します。

   flutter pub upgrade
4. 最後に、以下のコマンドを実行します。

   dart run arcgis_maps install
5. main.dart に戻ります。
6. arcgis_maps パッケージをインポートします。
   main.dart

   import 'package:arcgis_maps/arcgis_maps.dart';//追加

プラットフォーム固有の構成

Android、iOS、またはその両方のアプリを開発する際、Flutter のツールセットでは、いくつかの設定バージョンに対してデフォルト値が設定されています。これらは、新しいプロジェクトを作成する際にあらかじめ設定されます。以下に示す更新内容は、最新バージョンの ArcGIS Maps SDK for Flutter パッケージを使用してアプリケーションをコンパイルするために、これらのデフォルト設定に変更を加える必要がある点です。詳細については、システム要件のページをご覧ください。

1. プロジェクトの android/app/build.gradle.kts ファイルを編集して、Android の最小 SDK 要件を更新します。

   build.gradle.kts

   defaultConfig {
       // TODO: 任意のアプリケーション ID を指定します (https://developer.android.com/studio/build/application-id.html).
       applicationId = "com.example.app.display_a_map"
       // アプリケーションの要件に合わせて次の値を更新します。
       // 詳細については https://flutter.dev/to/review-gradle-config を参照してください。
       minSdk = 28 //変更
       targetSdk = flutter.targetSdkVersion
       versionCode = flutter.versionCode
       versionName = flutter.versionName
   }

2. android/app/src/main/AndroidManifest.xml に、オンライン リソースにアクセスするためのパーミッションを追加します。

   AndroidManifest.xml

   <manifest xmlns:android="http://schemas.android.com/apk/res/android">
       <uses-permission android:name="android.permission.INTERNET" /> <!-- 追加 -->
       <application
           android:label="display_a_map"
           android:name="${applicationName}"
           android:icon="@mipmap/ic_launcher">

1. 以下のコマンドを実行して、プロジェクト内のデフォルトの Xcode ワークスペースを開きます。

   open ios/Runner.xcworkspace

2. Xcode で、Runner プロジェクトを選択します。[Build Settings] タブに移動し、[Deployment] セクションを見つけます。[iOS Deployment Target] をバージョン 18 に設定し、Xcode を閉じます。

3. VS Code に戻り、pubspec.yaml を開き、flutter: セクションの下に次のブロックを追加します。

   pubspec.yaml

   # ...
   
   flutter:
       uses-material-design: true
   
       #追加開始
       config:
           enable-swift-package-manager: true
       #追加終了

   このソリューションでは、チュートリアルのソリューションが期待どおりに動作するように、pubspec.yaml 内でアプリケーション レベルで Swift Package Manager を有効にしています。実際には、Flutter 3.44 以降では、Flutter 環境内でグローバル レベルで Swift Package Manager がデフォルトで有効になっているため、ご自身のプロジェクトではこのアプリ レベルの設定は必要ない場合があります。詳細については、アプリ開発者向け Swift Package Manager を参照してください。

開発者資格情報を設定する

アプリ ユーザーが ArcGIS の位置情報サービスにアクセスできるようにするには、認証の設定 ステップで作成した開発者資格情報を使用して、リソースへのリクエストを認証します。

マップを追加する

地形図ベースマップ レイヤーを含むマップを作成します。 地図は富士山の付近とします。

1. _MainAppState クラスの内部で、final クラス メンバー変数 _mapViewController を定義し、ArcGISMapView クラスの createController() を呼び出して ArcGISMapViewController で初期化します。

   ArcGIS マップ ビュー コントローラーは、ArcGISMap で定義された 2 次元 (2D) 地理コンテンツを表示するユーザー インターフェース コントロールです。

   API キー認証ユーザー認証
   main.dart

   class _MainAppState extends State<MainApp> {
   
       final _mapViewController = ArcGISMapView.createController(); //追加
   
       @override
       Widget build(BuildContext context) {
   
       }
   
   }

   main.dart

   class _MainAppState extends State<MainApp> {
   
       final _mapViewController = ArcGISMapView.createController(); //追加
   
       final _oAuthUserConfiguration = OAuthUserConfiguration(
           portalUri: Uri.parse('https://www.arcgis.com'),
           clientId: 'YOUR_CLIENT_ID',
           redirectUri: Uri.parse('YOUR_REDIRECT_URL'),
       );
   
       @override
       void dispose() {
           Authenticator.revokeOAuthTokens().whenComplete(
           Authenticator.clearCredentials,
           );
   
           super.dispose();
       }
   
       @override
       Widget build(BuildContext context) {
   
       }
   }
2. API キー認証ユーザー認証

   build() 内で Scaffold、Column、Expanded から構成されるウィジェット ツリーに ArcGISMapView ウィジェットを追加します。マップ ビューの名前付き引数 controllerProvider をクラス メンバー変数 _mapViewController に設定し、onMapViewReady 引数を、その引数と同じ名前の新しいメソッドに設定します。この新しいメソッドについては、次で定義します。

   Scaffold ウィジェットは基本的なマテリアル デザインのビジュアル レイアウト構造を提供し、Column ウィジェットは子ウィジェットを垂直配列で表示します。ArcGISMapView ウィジェットは、サイズが制限されたウィジェット内でのみ使用できます。 サイズが制限されていない状態で使用すると、アプリケーションは例外をスローします。 たとえば、ArcGISMapView を Column ウィジェット内で使用すると、サイズが制限されないため、このような例外が発生します。 代わりに、チュートリアルのこのステップで説明するように、ArcGISMapView を Expanded ウィジェットでラップして、適切な境界を提供することができます。

   main.dart

   class _MainAppState extends State<MainApp> {
   
       final _mapViewController = ArcGISMapView.createController();
   
       @override
       Widget build(BuildContext context) {
   
           //追加開始
           return Scaffold(
               body: Column(
                   children: [
                       Expanded(
                           child: ArcGISMapView(
                               controllerProvider: () => _mapViewController,
                               onMapViewReady: onMapViewReady,
                           ),
                       ),
                   ],
               ),
           );
           //追加終了
   
       }
   
   
   }

   build() 内で、Scaffold、Column、Expanded、Authenticator、および ArcGISMapView から構成されるウィジェット ツリーにウィジェットを追加します。authenticator の名前付き引数 oAuthUserConfigurations をクラス メンバー変数 _oAuthUserConfiguration に設定し、ArcGISMapView ウィジェットを authenticator の子として配置します。最後に、マップ ビューの名前付き引数 controllerProvider をクラスのメンバー変数 _mapViewController に設定し、onMapViewReady 引数を、引数と同じ名前の新しいメソッドに設定します。この新しいメソッドは次に定義します。

   Scaffold ウィジェットは基本的なマテリアル デザインの視覚的レイアウト構造を提供しますが、Column ウィジェットは子要素を縦方向の配列として表示します。ArcGISMapView ウィジェットは、サイズが制限されたウィジェット内でのみ使用できます。サイズが制限されていないウィジェットで使用すると、アプリケーションで例外が発生します。たとえば、Column ウィジェット内で ArcGISMapView を使用すると、サイズが無制限になるため、このような例外が発生します。代わりに、このチュートリアルのこのステップで示されているように、ArcGISMapView を Expanded ウィジェットでラップして、適切な境界を設定することができます。Authenticator はウィジェット ツリー内のどこにでも配置できますが、このチュートリアルでは ArcGISMapView ウィジェットの親として使用するのが最も理にかなっています。

   main.dart

   class _MainAppState extends State<MainApp> {
   
       final _mapViewController = ArcGISMapView.createController();
   
       final _oAuthUserConfiguration = OAuthUserConfiguration(
           portalUri: Uri.parse('https://www.arcgis.com'),
           clientId: 'YOUR_CLIENT_ID',
           redirectUri: Uri.parse('YOUR_REDIRECT_URL'),
       );
   
       @override
       void dispose() {
           Authenticator.revokeOAuthTokens().whenComplete(
               Authenticator.clearCredentials,
           );
   
           super.dispose();
       }
   
       @override
       Widget build(BuildContext context) {
           
           //追加開始
           return Scaffold(
             body: Column(
               children: [
                 Expanded(
                   child: Authenticator(
                     oAuthUserConfigurations: [_oAuthUserConfiguration],
                     child: ArcGISMapView(
                       controllerProvider: () => _mapViewController,
                       onMapViewReady: onMapViewReady,
                     ),
                   ),
                 ),
               ],
             ),
           );
           //追加終了
   
       }
   }

3. _MainAppState 内で、何も返さない新しいメソッド onMapViewReady() を定義してください。

   main.dart

   //追加開始
   void onMapViewReady() {
   
   
   }
   //追加終了

4. 新しいメソッド内で final 変数 map を定義し、ArcGIS 地形図ベースマップ スタイルを使用して ArcGISMap として初期化します。

   main.dart

   void onMapViewReady() {
   
       //追加開始
       final basemapStyleParams = BasemapStyleParameters();
       basemapStyleParams.specificLanguage = "ja"; //ベースマップの言語を日本語に設定
   
       final basemap = Basemap.withStyle(BasemapStyle.arcGISTopographic, parameters: basemapStyleParams); //ベースマップに設定を適用
       final map = ArcGISMap.withBasemap(basemap); //設定したベースマップでマップを生成
       //追加終了
   }

5. ArcGIS マップ ビュー コントローラーの arcGISMap プロパティを map に設定します。さらに、setViewpoint() を呼び出して、富士山にズームインします。

   縮尺はビューポイントを作成する上で不可欠な要素です。これは、マップをどの程度拡大して表示するかを決定します。縮尺とは、マップビュー上の測定値と実世界の測定値との比率のことです。この変換ツールを使用して、ズームレベルに対する縮尺の仕組みを確認し、その関係についてさらに詳しく学びましょう。

   main.dart

   void onMapViewReady() {
   
       final map = ArcGISMap.withBasemapStyle(BasemapStyle.arcGISTopographic);
   
       //追加開始
       _mapViewController.arcGISMap = map;
   
       _mapViewController.setViewpoint(
           Viewpoint.withLatLongScale(
               latitude: 35.360626,
               longitude: 138.727363,
               scale: 200000.0,
           ),
       );
       //追加終了
   
   }

アプリを実行する

1. Android エミュレーター、iOS シミュレーター、または物理的なデバイスが設定され、実行されていることを確認します。
2. VS Codeで、[Run] > [Run Without Debugging] を選択します。

富士山を中心に、地形図のベースマップ レイヤーが表示された地図が表示されます。マップ ビューをピンチ、ドラッグ、またはダブルタップして、地図を閲覧してください。

または、以下の手順に従ってチュートリアル ソリューションをダウンロードすることもできます。

オプション 2: 完成したソリューションをダウンロードする

1. こちらをクリックしファイルをダウンロードし、コンピュータ内の任意の場所に解凍してください。
2. VS Code で、プロジェクトを開いてください。

ダウンロードしたソリューションには認証情報が含まれていないため、認証の設定 セクションで作成した開発者資格情報を追加する必要があります。

ソリューションに開発者資格情報を設定する

アプリ ユーザーが ArcGIS の位置情報サービスにアクセスできるようにするには、認証の設定 ステップで作成した開発者資格情報を使用して、リソースへのリクエストを認証します。

アプリを実行する

以下の手順に従ってアプリケーションを実行してください。

1. VS Codeのターミナルで、次のコマンドを実行してください。

   flutter pub upgrade

2. 次のコマンドを実行します。

   dart run arcgis_maps install

3. Android エミュレーター、iOS シミュレーター、または物理的なデバイスが設定され、実行されていることを確認します。

4. VS Code で、[Run] > [Run Without Debugging] を選択します。

カリフォルニア州のサンタモニカ山脈を中心に、地形図のベースマップ レイヤーが表示された地図が表示されます。地図ビューをピンチ、ドラッグ、またはダブルタップして、地図を閲覧してください。

アプリの動作が確認できたら ArcGIS の セキュリティーと認証について学びましょう！