Ceci est un article de blog présentant une série de fonctionnalités utilisables pour le développement d'applications cartographiques avec Flutter.Dans les applications cartographiques mobiles, la fonction d'afficher la carte en synchronisation avec la position actuelle de l'appareil est souvent mentionnée. Cet article présente comment implémenter cette fonction en utilisant le SDK cartographique pour Flutter (ArcGIS Maps SDK for Flutter).
Le code d'exemple est disponible sur GitHub, donc si vous souhaitez vérifier immédiatement, veuillez le télécharger. Les instructions pour exécuter l'application sont décrites dans README. Pour exécuter l'exemple, vous aurez besoin d'obtenir une clé API (gratuite).
Pour savoir comment intégrer le SDK cartographique et afficher la carte, veuillez consulter l'article de blog « Flutter で地図アプリを作成してみよう！ ». Cet article se concentre sur la fonction d'affichage de la carte synchronisée avec la position actuelle.
Ajout des permissions
Pour accéder aux informations de localisation de l'appareil dans l'application, il est nécessaire d'ajouter les permissions suivantes. Ajoutez chaque permission dans les fichiers correspondants.
Android
android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
iOS
ios/Runner/Info.plist
<key>NSLocationUsageDescription</key>
<string>L'accès à la localisation nécessite l'autorisation d'utiliser les données de localisation dans l'application.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>L'accès à la localisation nécessite l'autorisation d'utiliser les données de localisation dans l'application.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>L'accès à la localisation nécessite l'autorisation d'utiliser les données de localisation dans l'application.</string>
La chaîne définie dans la balise string du fichier Info.plist est affichée à l'utilisateur pour confirmation lors de l'accès à la localisation. Veuillez définir un message personnalisé.
Implémentation de la fonction d'affichage de la position actuelle
La fonction pour afficher la position actuelle sur la carte utilise la classe LocationDisplay. LocationDisplay obtient la position actuelle à partir de la source de données spécifiée par LocationDataSource, puis affiche un symbole représentant cette position sur la carte. Lorsque la position actuelle est mise à jour, le symbole sur la carte est également mis à jour automatiquement. De plus, il est possible de déplacer ou faire pivoter automatiquement la carte lorsque la position, l'orientation ou la direction changent.
1. Dans l'étape 6 de l'article de blog « Flutter で地図アプリを作成してみよう！ », après avoir configuré le contrôleur de vue cartographique avec la carte créée et affiché celle-ci, configurez dans _mapViewController.locationDisplay la source des données qui fournira les informations de localisation.
・・・
// Configurez le contrôleur de vue cartographique avec la carte créée.
_mapViewController.arcGISMap = map;
// Ajout
// Configurez pour afficher sur la carte la position actuelle fournie par le service système de localisation.
_mapViewController.locationDisplay.dataSource = SystemLocationDataSource();
Vous pouvez configurer comme source des données soit SystemLocationDataSource, soit SimulatedLocationDataSource. SystemLocationDataSource utilise les informations de localisation du système de l'appareil. SimulatedLocationDataSource peut utiliser des informations simulées pour les tests. Vous pouvez utiliser une collection d'objets ArcGISLocation représentant les positions actuelles ou spécifier vitesse et ligne via la méthode collection, ou setLocationsWithPolyline, pour déplacer la position actuelle le long d'une ligne.
2. Ensuite, configurez comment afficher/déplacer automatiquement la carte lors des mises à jour des informations de localisation en utilisant AutoPanMode.
// Configurez AutoPanMode en mode Recenter.
_mapViewController.locationDisplay.autoPanMode = LocationDisplayAutoPanMode.recenter;
AutoPanMode propose plusieurs modes d'affichage adaptés à la navigation à pied ou en véhicule. Choisissez ou changez le mode approprié selon l'utilisation prévue.
- Recenter : lorsque la position actuelle sort du périmètre défini par wanderExtentFactor で設定された範囲外に移動したときに、現在地を再度画面の中心に表示するようにマップが自動で移動します。wanderExtentFactor には、0 から 1 の間の値を設定します。0 の場合は、現在地が更新される度にマップが移動します。1 の場合は、現在地が現在のマップの表示範囲の端に達したときにマップが移動します。
- Navigation: 現在地が常に画面の下部に表示されるようにマップが自動で移動します。また、進行方向が常にデバイス上端を向くように、進行方向に基づいて自動でマップが回転します。車両での移動を想定したモードです。
- Compass Navigation: 現在地が常に画面の中心に表示されるようにマップが自動で移動します。また、向いている方向が常にデバイス上端を向くように、向きに基づいて自動でマップが回転します。徒歩での移動を想定したモードです。
- Off: 現在地のみが更新され、地図は自動で移動しません。
3. 位置情報の取得を開始するための準備ができたので LocationDisplay の start メソッドを呼び出します。
// 位置情報の取得を開始します（これにより、ユーザーに許可を求めるプロンプトが表示されます）。
try {
await _mapViewController.locationDisplay.dataSource.start();
} on ArcGISException catch (e) {
if (mounted) {
showDialog(
context: context,
builder: (_) => AlertDialog(content: Text(e.message)),
);
}
}
非同期に関するエラーが発生したら、_onMapViewReady 関数に async を付けて、下記のように変更します。
Future<void> _onMapViewReady() async {
これで、デバイスが現在地を取得できる場合に、現在地を示す青いシンボルがマップの中心に表示されるはずです。
4. 続いて、位置情報の取得の開始/停止と AutoPanMode を切り替える UI を実装します。まず、これらの UI を含む locationSettings ウィジェットを作成します。
Widget locationSettings(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(
20.0,
20.0,
20.0,
max(
20.0,
View.of(context).viewPadding.bottom / View.of(context).devicePixelRatio,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Text(
'表示設定',
style: Theme.of(context).textTheme.titleLarge,
),
const Spacer(),
],
),
Row(
children: [
const Text('ロケーションの表示'),
const Spacer(),
// 位置情報の取得を開始および停止するためのスイッチです。
Switch(
value: _isLocationStarted,
onChanged: (value) {
setState(() {
if (_mapViewController.locationDisplay.dataSource.status == LocationDataSourceStatus.started) {
_mapViewController.locationDisplay.stop();
_isLocationStarted = false;
} else {
_mapViewController.locationDisplay.start();
_isLocationStarted = true;
}
});
},
),
],
),
Row(
children: [
const Text('Auto-Pan モード'),
const Spacer(),
// AutoPanMode を選択するためのドロップダウン ボタンです。
DropdownButton(
value: _mapViewController.locationDisplay.autoPanMode,
onChanged: (value) {
setState(() {
_mapViewController.locationDisplay.autoPanMode = value!;
});
},
items: const [
DropdownMenuItem(
value: LocationDisplayAutoPanMode.off,
child: Text('Off'), // 現在位置のシンボルをマップ上に表示するのみ
),
DropdownMenuItem(
value: LocationDisplayAutoPanMode.recenter,
child: Text('Recentrer'), // Zoomer la carte pour que la position actuelle soit au centre
),
DropdownMenuItem(
value: LocationDisplayAutoPanMode.navigation,
child: Text(
'Navigation'), // Afficher la position actuelle en bas de la carte et faire pivoter la carte selon la direction du dispositif
),
DropdownMenuItem(
value: LocationDisplayAutoPanMode.compassNavigation,
child: Text(
'Compass'), // Afficher la position actuelle toujours au centre de la carte et faire pivoter la carte selon l'orientation du dispositif
),
],
),
],
),
],
),
);
}
5. Ajoutez le widget locationSettings créé à l'étape précédente dans l'Expanded contenant ArcGISMapView.
children: [
Expanded(
// Ajouter la vue de la carte dans l'arborescence des widgets et définir le contrôleur.
child: ArcGISMapView(
controllerProvider: () => _mapViewController,
onMapViewReady: _onMapViewReady,
),
),
// Ajouter le widget locationSettings sous l'écran de la carte.
locationSettings(context),
],
6. Au début de la classe _MyHomePageState, créez une variable _isLocationStarted pour suivre l'état de LocationDisplay. Dans le widget locationSettings, activez l'interrupteur « Afficher la localisation » lorsque LocationDisplay est démarré (start) et désactivez-le lorsque LocationDisplay est arrêté (stop).
bool _isLocationStarted = true;
7. Enfin, ouvrez lib/main.dart et ajoutez le code ci-dessous après les lignes d'import déjà présentes pour importer les packages nécessaires au traitement.
import 'dart:math';
Voilà, l'interface utilisateur pour démarrer/arrêter la récupération de localisation et changer AutoPanMode est terminée. Lancez l'application et testez le changement d'AutoPanMode pour observer le comportement de chaque mode.
Résumé
Dans cet article, nous avons implémenté une fonction affichant une carte synchronisée avec la position actuelle de l'appareil. La classe LocationDisplay permet aussi de modifier le symbole de localisation, l'échelle de zoom initiale lors de l'affichage de la position, ou encore la position d'affichage en mode Navigation, des réglages non abordés ici. N'hésitez pas à personnaliser le style d'affichage selon vos préférences et à expérimenter.
Liens associés
