Inleiding
Deze keer introduceren we hoe je een kaartapp maakt met Flutter. Flutter is een cross-platform open source UI toolkit die gebruikt kan worden voor app-ontwikkeling. Hiermee kun je apps ontwikkelen die werken op verschillende platforms zoals iOS, Android, Windows, macOS en webapps vanuit één broncode. Het is ook een populair framework voor cross-platform ontwikkeling en wordt door veel gebruikers gebruikt.Op dit moment.
Als je een kaart wilt weergeven in een Flutter-app, zijn er verschillende kaartpakketten beschikbaar, dus je zoekt er een die aan je eisen voldoet. Deze keer gebruiken we de ArcGIS Maps SDK for Flutter (hierna Flutter SDK), en laten we in een serie artikelen zien hoe je een kaartapp maakt die werkt op Android en iOS.
Flutter project aanmaken
We slaan dit artikel over, maar stel de ontwikkelomgeving in volgens de officiële Flutter gids.We gebruiken Visual Studio Code als editor.
- ArcGIS Maps SDK for Flutter 300.0
- Flutter 3.44.2
- Dart 3.12.2
- Xcode 26.5
- Android Studio Quail 1 2026.1.1
- Android NDK 28.2.13676358
Controleer ook de volgende artikelen afhankelijk van de versie van Flutter die je gebruikt.
1. Als de ontwikkelomgeving klaar is, maak dan een nieuw Flutter-project aan in Visual Studio Code via het commando ‘Flutter: New Project’. De app heet hier ‘flutter_map_application’.
cd <pad naar flutter_map_application>
dart pub add arcgis_maps
2. Gebruik ‘flutter pub upgrade’ om afhankelijkheden bij te werken.
flutter pub upgrade
3. Installeer arcgis_maps_core
dart run arcgis_maps install
Android/iOS specifieke instellingen
Vervolgens configureren we afzonderlijke instellingen voor uitvoering op Android en iOS. Afhankelijk van de omgeving waarin je uitvoert, configureer je beide of één van beide.
Als je uitvoert op Android,
1. Bewerk het bestand android/app/build.gradle.kts binnen flutter_map_application om de minimale vereisten bij te werken.Stel de minimale versie van de Android SDK in op 28.
android {
...
defaultConfig {
...
minSdk = 28
...
}
...
}
2. インターネットにアクセスするために、android/app/src/main/AndroidManifest.xml ファイルに権限を追加します。
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
...
iOSで実行する場合
1. flutter_map_application 内の ios/Podfile ファイルを編集して iOS のバージョンを 17.0 に設定します。行のコメントを解除して、バージョン番号を更新します。
platform :ios, '17.0'
2. Runtimecore および arcgis_maps_ffi ポッドを Runner ターゲット セクションに追加して arcgis_maps_core を構成します。
target 'Runner' do
...
pod 'Runtimecore', :podspec => '../arcgis_maps_core/ios/Runtimecore.podspec'
pod 'arcgis_maps_ffi', :podspec => '../arcgis_maps_core/ios/arcgis_maps_ffi.podspec'
...
end
3. ‘pod update’ を使用してポッドを構成します。
cd ios && pod update && cd ..
地図の追加
Flutter SDK の設定が完了したので、ここからはアプリに地図機能を追加していきます。
1. flutter_map_application 内の lib/main.dart を開き、既に書かれているインポート行の後に、下記のコードを追加して、arcgis_maps パッケージをインポートします。
import 'package:arcgis_maps/arcgis_maps.dart';
2. Flutter SDK を使用して地図を表示するには、API キーを作成する必要があります。「API キーの取得」ガイドに従って作成します。権限の設定では、このブログ記事の手順を実行するだけであれば、[ベースマップ] のみ有効になっていれば大丈夫です。
※ API キーをコピーできるのは作成時だけなのでご注意ください。
3. main() メソッドの最初に作成した API キーを設定します。
void main() {
ArcGISEnvironment.apiKey = '作成した API キーをここに入力';
…
}
4. Widget build() の Column ウィジェット内の children をマップビューに置き換えます。ArcGISMapView ウィジェット（マップビュー ウィジェット）をウィジェット ツリーに追加します。ArcGISMapView ウィジェットは、サイズが制限されているウィジェット内でのみ使用できます。制限のないサイズで使用すると、アプリケーションは例外をスローします。そのため、Column 内で使用するには、ArcGISMapView ウィジェットを Expanded でラップして適切な境界を指定します。
/*
children: [
const Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
*/
children: [
Expanded(
// ウィジェット ツリーにマップビューを追加し、コントローラーを設定します。
child: ArcGISMapView(
controllerProvider: () => _mapViewController,
onMapViewReady: _onMapViewReady,
),
),
],
5. _MyHomePageState クラスの最初で、ArcGISMapView のコントローラーを作成します。
// マップビューのコントローラーを作成します。
final _mapViewController = ArcGISMapView.createController();
6. 次の行に、マップビューが使用可能になったときに呼び出される onMapViewReady() 関数を作成します。ここでは、ベースマップのスタイル設定や地図の初期表示位置の設定、グラフィックス表示用のレイヤーの追加などを行っています。
void _onMapViewReady() {
// ベースマップのラベルを日本語表記にするためのパラメーターを設定します。
final bsp = BasemapStyleParameters();
bsp.specificLanguage = "ja";
// 道路地図のベースマップ スタイルを使用してマップを作成します。
final basemap = Basemap.withStyle(BasemapStyle.arcGISStreets, parameters: bsp);
final map = ArcGISMap.withBasemap(basemap);
// 緯度経度とスケールを指定してマップの初期表示位置を指定します。
final initialPoint = ArcGISPoint(
x: 139.745461,
y: 35.65856,
spatialReference: SpatialReference.wgs84,
);
map.initialViewpoint = Viewpoint.fromCenter(initialPoint, scale: 10000);
// マップビュー コントローラーに作成したマップを設定します。
_mapViewController.arcGISMap = map;
// 後の作業でマップ上にシンボルを追加するために使用するグラフィックス オーバーレイを作成し、それをマップビュー コントローラーに追加します。
final graphicsOverlay = GraphicsOverlay();
_mapViewController.graphicsOverlays.add(graphicsOverlay);
}
7. ここまでの実装で地図は表示できますが、今回は地図上に簡単なシンボルを追加する機能も実装していきます。incrementCounter() 関数に下記のコードを追加します。
// マップに表示するシンボルを画像ファイルの URL から作成します。
final pictureMarkerSymbol = PictureMarkerSymbol.withUri(Uri.parse("https://static.arcgis.com/images/Symbols/Shapes/BlueStarLargeB.png"));
pictureMarkerSymbol.height = 50;
pictureMarkerSymbol.width = 50;
// シンボルを表示する座標をマップの現在の表示範囲からランダムに取得します。
double xRengeMax = _mapViewController.visibleArea!.extent.xMax;
double xRengeMin = _mapViewController.visibleArea!.extent.xMin;
double xRandom = Random().nextDouble() * (xRengeMax - xRengeMin) + xRengeMin;
double yRengeMax = _mapViewController.visibleArea!.extent.yMax;
double yRengeMin = _mapViewController.visibleArea!.extent.yMin;
double yRandom = Random().nextDouble() * (yRengeMax - yRengeMin) + yRengeMin;
// ランダムに取得した座標からポイント オブジェクトを作成します。
final newPoint = ArcGISPoint(
x: xRandom,
y: yRandom,
spatialReference: _mapViewController.spatialReference,
);
// ポイントとシンボルを設定してグラフィックス オブジェクトを作成し、グラフィックス オーバレイに追加します。
final graphic = Graphic(geometry: newPoint, symbol: pictureMarkerSymbol);
_mapViewController.graphicsOverlays[0].graphics.add(graphic);
8. ランダムな座標値の取得に math ライブラリの Random クラスを使用するので、下記のコードを追加してインポートします。
import 'dart:math';
9. これで地図機能の実装は完了です。Android または iOS でアプリを起動して、地図を移動したり、右下の「+」Probeer op de knop te drukken.
Voltooide projectversieDe bestanden zijnhierte downloaden
Samenvatting
We hebben laten zien hoe je een kaartapp maakt met Flutter SDK.Op dit moment wordt alleen ondersteuning geboden voor Android en iOS als uitvoeringsomgeving.Hoewel niet in dit artikel besproken, zijn er naast de geïmplementeerde functies ook tal van andere functies die essentieel zijn voor kaartapps, zoals adreszoekopdrachten, routezoeken, weergave van de huidige locatie en offline kaartweergave.Op GitHub zijn ervoorbeeldcodes voor elke functiebeschikbaar, dus probeer die ook zeker uit.
Gerelateerde links
