Esta es una serie de artículos de blog que presentan funciones útiles para el desarrollo de aplicaciones de mapas con Flutter. En esta ocasión, nos enfocamos en la visualización de archivos Shape. Implementaremos la función para mostrar datos de archivos Shape en el mapa. En este artículo, se explica cómo implementar esta función utilizando el SDK de mapas para Flutter (ArcGIS Maps SDK for Flutter).
El código de ejemplo está disponible en GitHub, así que si quieres revisarlo rápidamente, descárgalo. Las instrucciones para ejecutar la aplicación están en README. Para ejecutar el ejemplo, necesitas obtener una clave API (gratuita). Para aprender cómo integrar el SDK de mapas y mostrar un mapa, consulta el artículo del blog “¡Creemos una aplicación de mapas con Flutter!”. Este artículo se centra en la función para mostrar archivos Shape.
¿Qué es un archivo Shape?
Un archivo Shape es uno de los formatos de datos GIS (Sistema de Información Geográfica). Puede almacenar datos vectoriales (puntos, líneas, polígonos) que contienen la ubicación, forma e información atributiva de objetivos, carreteras, edificios, etc. Los archivos Shape son un formato estándar vectorial en la industria GIS y son compatibles no solo con productos ArcGIS sino también con muchos otros softwares GIS. Implementación de la función para mostrar archivos Shape
Para mostrar un archivo Shape, se utiliza la clase
ShapefileFeatureTable
5. lib/main.dart を開き、既に書かれているインポート行の後に、下記のコードを追加して、この後の処理に必要なパッケージをインポートします。
import 'package:path_provider/path_provider.dart';
import 'package:flutter/services.dart';
import 'dart:io';
6. ファイル操作等に await を使用するため _onMapViewReady() を async 関数に変更します。
// 変更前
void _onMapViewReady() {
// 変更後
Future<void> _onMapViewReady() async {
7. _onMapViewReady() async 関数の最後にコードを追加します。assets フォルダーにあるシェープファイルを読み込み、iOS/Android アプリケーションのドキュメント ディレクトリーに、新たにシェープファイルを作成します。
// マップビュー コントローラーに作成したマップを設定します。
_mapViewController.arcGISMap = map;
// 追加
// assets フォルダーにあるシェープファイルから、ドキュメントディレクトリーに新たにシェープファイルを作成します。
final assetManifest = await AssetManifest.loadFromAssetBundle(rootBundle);
final fileAssetsList = assetManifest
.listAssets()
.where((string) => string.startsWith("assets/shp/"))
.toList();
for (int i = 0; i < fileAssetsList.length; i++) {
String filePath = fileAssetsList[i];
final byteData = await rootBundle.load(filePath);
final file =
File('${(await getApplicationDocumentsDirectory()).path}/$filePath');
await file.create(recursive: true);
await file.writeAsBytes(byteData.buffer
.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));
}
8. 続いて、ドキュメント ディレクトリーに作成したシェープファイル (.shp) のパスから File オブジェクトを作成します。
final shapefile = File(
'${(await getApplicationDocumentsDirectory()).path}/assets/shp/random_points.shp',
);
9. File.uri を引数に指定して ShapefileFeatureTable を作成し、作成した ShapefileFeatureTable から FeatureLayer を作成します。ShapefileFeatureTable はシェープファイルに格納されているデータにアクセス (検索や編集) でき、FeatureLayer はマップ上での表示を管理します。
// ドキュメントディレクトリーにあるシェープファイルのパスから ShapefileFeatureTable を作成します。
final shapefileFeatureTable =
ShapefileFeatureTable.withFileUri(shapefile.uri);
await shapefileFeatureTable.load();
final shapefileFeatureLayer =
FeatureLayer.withFeatureTable(shapefileFeatureTable);
await shapefileFeatureLayer.load();
10. 作成した FeatureLayer を ArcGISMap オブジェクトの operationalLayers に追加します。
_mapViewController.arcGISMap!.operationalLayers.add(shapefileFeatureLayer);
11. この状態でビルドします。マップを千葉県に移動して、シェープファイルを表示します。表示スタイルを設定していないため、ポイント データが黒い点で表示されています。
属性に応じた色分け表示機能の実装
12. 今回は、シェープファイルの属性情報に応じて、色分け表示する機能を実装してみます。手順4の FeatureLayer を ArcGISMap の operationalLayers に追加するコードの前に、下記のコードを追加します。シェープファイルのポイント データには、name 属性フィールドに a, b, c のいずれかの属性値がランダムに格納されています。属性値が a のときは赤色の丸で、b のときは青色の丸で、c のときは黄色の丸で、それ以外の場合は黒色の丸で表示するために、それぞれのシンボル (SimpleMarkerSymbol) を作成します。
// 各属性値用のシンボルを作成します。
final redMarkerSymbol = SimpleMarkerSymbol(
style: SimpleMarkerSymbolStyle.circle,
color: Colors.red,
size: 10,
);
final blueMarkerSymbol = SimpleMarkerSymbol(
style: SimpleMarkerSymbolStyle.circle,
color: Colors.blue,
size: 10,
);
final yellowMarkerSymbol = SimpleMarkerSymbol(
style: SimpleMarkerSymbolStyle.circle,
color: Colors.yellow,
size: 10,
);
final defaultMarkerSymbol = SimpleMarkerSymbol(
style: SimpleMarkerSymbolStyle.circle,
color: Colors.black,
size: 10,
);
13. 続いて、レイヤーの表示ルールを定義するレンダラーを作成します。各ポイントの属性値に応じて表示スタイルを定義することができるレンダラーである UniqueValueRenderer を使用します。UniqueValueRenderer オブジェクトの uniqueValues プロパティには、a, b, c の属性値とそれに対応するシンボルから作成した UniqueValue オブジェクトの配列を設定します。
// name フィールドの属性値に応じて色分け表示（a は赤色、b は青色、c は黄色）するための、UniqueValueRenderer を作成します。
final aValue = UniqueValue(
description: 'name is a',
label: 'a',
symbol: redMarkerSymbol,
values: ['a'],
);
final bValue = UniqueValue(
description: 'name is b',
label: 'b',
symbol: blueMarkerSymbol,
values: ['b'],
);
final cValue = UniqueValue(
description: 'name is c',
label: 'c',
symbol: yellowMarkerSymbol,
values: ['c'],
);
final uniqueValueRenderer = UniqueValueRenderer(
fieldNames: ['name'],
uniqueValues: [
aValue,
bValue,
cValue,
],
defaultLabel: 'Other',
defaultSymbol: defaultMarkerSymbol,
);
14. 作成した UniqueValueRenderer をシェープファイル表示用の FeatureLayer の renderer プロパティに設定します。
shapefileFeatureLayer.renderer = uniqueValueRenderer;
15. シェープファイルのポイント データのシンボルが目立つように暗色のベースマップに変更します。
//変更前
final basemap =
Basemap.withStyle(BasemapStyle.arcGISStreets, parameters: bsp);
//変更後
final basemap =
Basemap.withStyle(BasemapStyle.arcGISDarkGray, parameters: bsp);
16. 最後にマップの初期表示座標とスケールを調整します。
//変更前
final initialPoint = ArcGISPoint(
x: 139.745461,
y: 35.65856,
spatialReference: SpatialReference.wgs84,
);
map.initialViewpoint = Viewpoint.fromCenter(initialPoint, scale: 10000);
//Después del cambio
final initialPoint = ArcGISPoint(
x: 140.1111782,
y: 35.6130401,
spatialReference: SpatialReference.wgs84,
);
map.initialViewpoint = Viewpoint.fromCenter(initialPoint, scale: 100000);
17. Compila y prueba mostrar el archivo shapefile. Los datos de puntos se muestran en tres colores: rojo/azul/amarillo.
Resumen
En este artículo implementamos la función para mostrar archivos shapefile. No solo mostramos los datos, sino que también es posible acceder a ShapefileFeatureTable, realizar consultas de datos (consultas) y editar (agregar/eliminar/actualizar) entre otras cosas. En esta ocasión usamos archivos shapefile, pero el SDK también soporta muchos otros datos GIS como geodatabases y GeoPackage, raster y más.
Enlaces relacionados
