Flutter에서 지도위에 행정구역 그리기-(2) FlutterMap에 넣기

이제 geojson을 준비하였으니 flutter에서 데이터를 지도 위에 보여주는 과정을 살펴보자

안드로이드 스튜디오에서 우선 pubspec.yaml에 가서 라이브러리를 설치하자

  flutter_map: ^3.1.0
  latlong2: ^0.8.1
  geojson: ^1.0.0

flutter_map : 말그대로 지도
latlong2: 위도 경도 데이터를 사용해야 하니 필요
geojson: 준비된 geojson데이터를 읽을 수 있도록 하는 라이브러리

asset에 사용 할 geojson을 넣고 pubget하는거 잊지 말자

geojson 파일을 열어보면

영어이름, 한국이름, 행정구역넘버 등의 데이터가 있는데 여기서 우린 coordinate를 얻기 위해서 데이터를 load해서 뽑아 사용할 것이다.

여기서 GeoJsonPolygon 이랑 GeoJsonMultiPolygon의 두개가 있는데
GeoJsonPolygon은 하나의 단일 구역을 의미하고 GeoJsonMultiPolygon은 여러 구역을 의미하는데
이게 뭔말이냐 하면
서울특별시의 경우 여지없는 한개의 단일 구역인데
전라도나 경상도 쪽에 가면 섬이 어~~엄청많다 이런 섬들의 좌표도 데이터에 포함되어 있는데 이런 경우가 GeoJsonMultiPolygon이다.

예시에서는 서울 특별시만 할 예정이니 GeoJsonPolygon타입만 사용 할 예정이다.
(만약 군도 같은 섬 지역이 포함된다면GeoJsonMultiPolygon의 경우도 정해줘야 한다.)
Geojson데이터 구성은 대략적으로 보면 다음과 같다

이제 데이터를 뽑아서 List에 넣어주는 과정을 진행 할 것이다.

  // 준비된 데이터를 List<Latlng> 형태로 가공
List<LatLng> seoul = [];

Future<void> loadmapdata(String link) async {
  List<LatLng> _polygon = [];
  final geojson = GeoJson();
  // GeoJson에서 데이터를 추출 하는 중이라 데이터 호출

  final data = await rootBundle.loadString(link);
  // data를 geojson으로 가공
  await geojson.parse(data);
  // 현재 데이터의 위도,경도에 맞춰서 _polygon에 넣는다.
  // polygon 값들이 여러개 일 경우에 맞춰 for문 적용
  for (final feature in geojson.features) {
    // 서울은 한개의 단일 구역이니 GeoJsonPolygon이라 정의한다.
    final geojsonpolygon = feature.geometry as GeoJsonPolygon;
    // 여기서  polygon값들을 가지고 있는 GeoSeries를 다시 뽑아야 한다.
    final geoseries = geojsonpolygon.geoSeries;
    for (final geoserie in geoseries) {
      for (final geopoint in geoserie.geoPoints) {
        seoul.add(LatLng(geopoint.latitude, geopoint.longitude));
      }
    }
  }
}

자 이 과정을 거치고 나면 seoul 이란 List에 데이터가 들어가 있을 것이다.

못믿을 세상이니 print(seoul)한번 찍어보자

잘찍혀 있는걸 확인했다. 이제 map에 그리는 과정을 시작한다.

FlutterMap에 는 polylineLayer이라는 속성을 사용하면된다.
여러 라인을 그릴 수 있고 여러 기능이 부가 되어있는데 자세한건 공식 문서를 참고합시다

https://pub.dev/packages/flutter_map

https://docs.fleaflet.dev/

전체 코드는 다음과 같다.

  @override
void initState() {
  // Map 키키전에 데이터를 추출해서 넣는게 좋으니 inistate로 넣었음
  loadmapdata('asset/seoul.geojson');
}

@override
Widget build(BuildContext context) {
  return Expanded(
      // 나중에 뭐 덮어 씌우려면 stack을 쓴다. ex 확대버튼, 내위치 버튼
      child: Stack(
    children: [
      FlutterMap(
        mapController: mapController,
        options: MapOptions(
          // 시작 위치를 찍는다. 지금은 임의로 내위치를 설정한다.
          center: LatLng(37.60732175555233, 127.0710794642477),
        ),
        children: [
          PolylineLayer(
            //열심히 가공한 seoul 데이터를 넣어 준다.
            polylines: [Polyline(points: seoul, color: Colors.red)],
          )
        ],
      )
    ],
  ));
}

에뮬레이터로 보면 이쁘게 서울이 그려진걸 확인 할 수 있다.

이 과정을 거치면 국내의 어느 행정구역 이든 표시를 할 수 있다.

다음 글에선 서울 외곽 지역에 맞게 이미지를 넣는 작업을 올릴 예정!