[flutter] 플러터에서 지도 위에 선(polygon) 또는 도형(shape) 그리기

21 Dec 2023

flutter

플러터를 사용하여 지도 위에 선이나 도형을 그릴 수 있습니다. 이를 위해 google_maps_flutter 패키지를 사용하여 지도를 표시하고, flutter_map 패키지를 사용하여 지도 위에 다각형(polygons) 또는 도형(shapes)을 그릴 수 있습니다.

google_maps_flutter 패키지를 사용하여 지도 표시하기

우선, google_maps_flutter 패키지를 사용하여 지도를 표시해야 합니다. 아래는 플러터에서 지도를 표시하는 간단한 예제입니다.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps Example'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 12,
          ),
        ),
      ),
    );
  }
}

flutter_map 패키지를 사용하여 선 또는 도형 그리기

flutter_map 패키지를 사용하면 지도 위에 다양한 도형을 그릴 수 있습니다. 이를 위해 polyline, polygon 및 circle 위젯을 사용할 수 있습니다. 아래는 flutter_map 패키지를 사용하여 다각형을 그리는 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Map Example'),
        ),
        body: FlutterMap(
          options: MapOptions(
            center: LatLng(51.0, 0.0),
            zoom: 13.0,
          ),
          layers: [
            TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c'],
            ),
            PolygonLayerOptions(
              polygons: [
                Polygon(
                  points: [
                    LatLng(51.5, 0.0),
                    LatLng(51.5, 0.1),
                    LatLng(51.6, 0.1),
                  ],
                  color: Colors.blue.withOpacity(0.5),
                  borderColor: Colors.blue,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

결론

플러터를 사용하여 google_maps_flutter 및 flutter_map 패키지를 활용하면 지도 위에 다양한 선이나 도형을 그릴 수 있습니다. 이를 통해 지도 기반 애플리케이션을 개발할 때 원하는 선이나 도형을 표시하는 것이 가능해집니다.

참고: