Как построит маршрут по массиву координат в flutter используя библиотеку Mapbox?

Для построения маршрута по массиву координат в Flutter с использованием библиотеки Mapbox, мы можем воспользоваться пакетом flutter_map и его встроенным инструментом построения маршрутов.

Прежде всего, убедитесь, что у вас установлены все необходимые зависимости в вашем файле pubspec.yaml:

dependencies:
  flutter_map: ^0.10.0
  mapbox_gl: ^1.0.0
  flutter_polyline_points: ^0.2.6

Перед началом работы с Mapbox, вам понадобится токен доступа (access token). Если у вас ещё нет токена, вы можете его получить на сайте Mapbox.

После установки зависимостей и получения токена доступа, вы можете приступить к созданию маршрута. Вот пример кода:

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

class MapPage extends StatefulWidget {
  final List<LatLng> routeCoordinates;

  MapPage({Key key, this.routeCoordinates}) : super(key: key);

  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  MapController mapController = MapController();
  List<LatLng> polylineCoordinates = [];
  PolylinePoints polylinePoints = PolylinePoints();

  @override
  void initState() {
    super.initState();
    getPolylineCoordinates();
  }

  void getPolylineCoordinates() async {
    List<PointLatLng> result = await polylinePoints.getRouteBetweenCoordinates(
      'YOUR_MAPBOX_ACCESS_TOKEN',
      widget.routeCoordinates[0].latitude,
      widget.routeCoordinates[0].longitude,
      widget.routeCoordinates[1].latitude,
      widget.routeCoordinates[1].longitude,
    );

    if (result.isNotEmpty) {
      result.forEach((PointLatLng point) {
        polylineCoordinates.add(LatLng(point.latitude, point.longitude));
      });
    }

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map'),
      ),
      body: FlutterMap(
        mapController: mapController,
        options: MapOptions(
          center: widget.routeCoordinates[0],
          zoom: 13.0,
        ),
        layers: [
          TileLayerOptions(
            urlTemplate:
                'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}',
            additionalOptions: {
              'accessToken': 'YOUR_MAPBOX_ACCESS_TOKEN',
              'id': 'mapbox.mapbox-streets-v8',
            },
          ),
          PolylineLayerOptions(
            polylines: [
              Polyline(
                points: polylineCoordinates,
                color: Colors.red,
                strokeWidth: 3.0,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

В этом примере мы создаем StatefulWidget, который принимает массив координат маршрута в свой конструктор. Мы также создаем контроллер карты (MapController), список точек маршрута (polylineCoordinates) и объект PolylinePoints для получения маршрута.

В методе initState () мы вызываем getPolylineCoordinates (), который выполняет запрос к Mapbox API и получает маршрутные точки. Затем мы перебираем result и преобразуем каждую точку в LatLng-объект и добавляем в наш список polylineCoordinates.

В методе build () мы создаем Scaffold с AppBar и FlutterMap виджет, который содержит все необходимые слои и настройки карты. Мы используем TileLayerOptions для отображения карты Mapbox и PolylineLayerOptions для рисования маршрута, используя данные из polylineCoordinates.

Не забудьте заменить YOUR_MAPBOX_ACCESS_TOKEN на ваш собственный токен доступа Mapbox.

Это пример как построить маршрут по массиву координат в Flutter, используя библиотеку Mapbox. Вы можете адаптировать его под свои потребности, например, для отображения маршрута с несколькими точками или для добавления дополнительных функций и настроек.