Flutter路线规划插件osrm的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter路线规划插件osrm的使用

概述

osrm 是一个用于Dart和Flutter的OSRM(Open Source Routing Machine)客户端。它提供了一个简单易用的接口,用于与OSRM服务器通信并获取路径规划和其他相关信息。

安装

在项目的 pubspec.yaml 文件中添加以下依赖项:

dependencies:
  osrm: ^latest_version

然后运行 flutter pub get 来安装依赖。

使用方法

首先需要创建一个 OSRM 类的实例,之后可以通过该实例调用不同的服务,如 nearestroute

简单示例

Nearest Service
import 'package:osrm/osrm.dart';

void main() async {
  final osrm = Osrm();

  // 获取最近的3个点
  NearestResponse response = await osrm.nearest(
    NearestOptions(
      coordinate: (-0.1234, 51.1234),
      number: 3,
    ),
  );

  print(response);
}
路径规划服务(GoogleMap中的方向)
import 'package:osrm/osrm.dart';

void main() async {
  final osrm = Osrm();

  final route = await osrm.route(
    RouteRequest(
      coordinates: [
        (-0.1234, 51.1234), // 点A
        (-0.1234, 51.1234), // 点B
        (-0.1234, 51.1234), // 点C
      ],
      alternatives: OsrmAlternative.true_,
      steps: true,
      annotations: OsrmAnnotation.true_,
      overview: OsrmOverview.full,
      continueStraight: OsrmContinueStraight.true_,
      format: OsrmFormat.json,
      waypoints: [
        /// 访问顺序
        OsrmWaypoint(
          distance: 0.0,
          location: (-0.1234, 51.1234),
        ),
      ],
    ),
  );

  print(route);
}

更完整的Flutter示例

下面是一个更完整的Flutter应用示例,展示了如何在地图上显示路径规划结果。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OSRM Flutter Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  [@override](/user/override)
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  List<LatLng> _routePoints = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    _fetchRoute();
  }

  Future<void> _fetchRoute() async {
    final osrm = Osrm();

    final route = await osrm.route(
      RouteRequest(
        coordinates: [
          (2.829099, 36.479960), // Point A
          (2.825987, 36.473662), // Point B
        ],
      ),
    );

    setState(() {
      _routePoints = route.routes.first.geometry.map((coord) => LatLng(coord[1], coord[0])).toList();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OSRM Flutter Example'),
      ),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(36.479960, 2.829099),
          zoom: 13.0,
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c'],
          ),
          PolylineLayerOptions(
            polylines: [
              Polyline(
                points: _routePoints,
                strokeWidth: 4.0,
                color: Colors.blue,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

更多关于Flutter路线规划插件osrm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter路线规划插件osrm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中集成OSRM(Open Source Routing Machine)以实现路线规划功能,可以通过调用OSRM的HTTP API来完成。下面是一个使用Flutter和相关插件(如http)来与OSRM交互的示例代码。

首先,确保你的Flutter项目已经设置好,并且已经添加了http依赖。在pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来,我们编写一个Flutter应用,通过调用OSRM的API来获取路线规划数据。假设你有一个OSRM服务器运行在http://localhost:5000,并且你已经准备好了一些坐标点来进行路线规划。

以下是一个简单的Flutter应用示例,它展示了如何向OSRM发送HTTP请求并解析返回的数据:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OSRM Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RoutePlanningScreen(),
    );
  }
}

class RoutePlanningScreen extends StatefulWidget {
  @override
  _RoutePlanningScreenState createState() => _RoutePlanningScreenState();
}

class _RoutePlanningScreenState extends State<RoutePlanningScreen> {
  String routeResponse = '';

  Future<void> fetchRoute() async {
    String osrmUrl = 'http://localhost:5000/route/v1/driving/';
    String coords = '13.388860,52.517037;13.428552,52.523219'; // 示例坐标点
    String apiUrl = '$osrmUrl$coords?overview=full&steps=true';

    try {
      final response = await http.get(Uri.parse(apiUrl));

      if (response.statusCode == 200) {
        setState(() {
          routeResponse = jsonDecode(response.body).toString();
        });
      } else {
        setState(() {
          routeResponse = 'Failed to fetch route: ${response.statusCode}';
        });
      }
    } catch (error) {
      setState(() {
        routeResponse = 'Error: $error';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OSRM Route Planning'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: fetchRoute,
              child: Text('Get Route'),
            ),
            SizedBox(height: 20),
            Text('Route Response:'),
            SizedBox(height: 10),
            Expanded(
              child: SingleChildScrollView(
                child: Text(routeResponse),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 定义了一个Flutter应用,并在pubspec.yaml中添加了http依赖。
  2. 创建了一个RoutePlanningScreen,它包含了一个按钮来触发路线规划请求。
  3. 使用http.get方法向OSRM服务器发送HTTP GET请求,请求URL包含了我们想要规划的起点和终点坐标。
  4. 解析OSRM返回的JSON响应,并在UI中显示。

请注意,这个示例假设你的OSRM服务器正在运行,并且可以接受坐标点作为输入。如果OSRM服务器配置不同,或者你需要使用其他参数,你可能需要调整请求的URL。

此外,实际应用中,你可能还需要处理更多的错误情况,例如网络问题、OSRM服务器错误等,并且可能需要将返回的路线数据进一步解析和处理,以便在地图上显示。

回到顶部