Flutter地图路径绘制插件flexible_polyline_dart的使用

flexible_polyline_dart 是一个用于对坐标对或坐标三元组进行编码和解码的库。它提供了灵活的多边形编码功能，可以将一系列坐标压缩为字符串表示形式。

使用方法

编码

首先，我们需要创建一个包含一系列坐标点的列表。然后，我们可以使用 FlexiblePolyline.encode 方法来将这些坐标点编码为一个压缩字符串。

List<LatLngZ> pairs = List<LatLngZ>();
pairs.add(LatLngZ(50.1022829, 8.6982122));
pairs.add(LatLngZ(50.1020076, 8.6956695));
pairs.add(LatLngZ(50.1006313, 8.6914960));
pairs.add(LatLngZ(50.0987800, 8.6875156));

String encoded = FlexiblePolyline.encode(
  pairs, // 坐标点列表
  5, // 坐标精度
  ThirdDimension.ABSENT, // 第三维是否使用
  0 // 第三维精度
);

// encoded == 'BFoz5xJ67i1B1B7PzIhaxL7Y'

解码

接下来，我们可以通过 FlexiblePolyline.decode 方法将编码后的字符串解码回原始的坐标点列表。

List<LatLngZ> decoded = FlexiblePolyline.decode("BFoz5xJ67i1B1B7PzIhaxL7Y");

/*
decoded == [
  LatLngZ(50.10228, 8.69821),
  LatLngZ(50.10201, 8.69567),
  LatLngZ(50.10063, 8.69150),
  LatLngZ(50.09878, 8.68752),
]
*/

完整示例 Demo

为了更好地展示如何在实际项目中使用 flexible_polyline_dart 插件，我们来编写一个完整的 Flutter 应用程序示例。在这个示例中，我们将实现一个简单的地图应用，用户可以在地图上绘制一条路径，并使用 flexible_polyline_dart 对路径进行编码和解码。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

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

class _MapScreenState extends State<MapScreen> {
  GoogleMapController mapController;
  Set<Marker> markers = {};
  List<LatLng> path = [];

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  void _addMarker(LatLng position) {
    setState(() {
      markers.add(Marker(
        markerId: MarkerId(position.toString()),
        position: position,
      ));
      path.add(position);
    });
  }

  void _encodePath() {
    String encodedPath = FlexiblePolyline.encode(
      path.map((point) => LatLngZ(point.latitude, point.longitude)).toList(),
      5,
      ThirdDimension.ABSENT,
      0
    );

    print('Encoded Path: $encodedPath');
  }

  void _decodePath(String encodedPath) {
    List<LatLngZ> decodedPoints = FlexiblePolyline.decode(encodedPath);

    setState(() {
      path.clear();
      for (var point in decodedPoints) {
        path.add(LatLng(point.lat, point.lng));
      }
      markers.clear();
      for (var i = 0; i < path.length; i++) {
        markers.add(Marker(
          markerId: MarkerId(path[i].toString()),
          position: path[i],
        ));
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map with Path Encoding'),
      ),
      body: Stack(
        children: <Widget>[
          GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(
              target: LatLng(50.1022829, 8.6982122),
              zoom: 12,
            ),
            markers: markers,
            onTap: (position) {
              _addMarker(position);
            },
          ),
          Positioned(
            bottom: 16,
            left: 16,
            right: 16,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    _encodePath();
                  },
                  child: Text('Encode Path'),
                ),
                ElevatedButton(
                  onPressed: () {
                    _decodePath('BFoz5xJ67i1B1B7PzIhaxL7Y'); // 示例编码字符串
                  },
                  child: Text('Decode Path'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}