Flutter地图绘制插件mapbox_maps_flutter_draw的使用
Flutter 地图绘制插件 mapbox_maps_flutter_draw 的使用
简介
mapbox_maps_flutter_draw 是一个 Flutter 包，用于在 Mapbox 地图上绘制、编辑和删除点、线和多边形。该包通过 mapbox_maps_flutter 库实现，帮助创建和管理交互式的标注。
特性
- 绘制几何图形：可以在地图上添加点、线和多边形。
- 删除几何图形：可以移除已存在的几何图形。
- 撤销上次编辑：可以撤销最后的编辑操作。
- 管理几何图形：可以存储和检索多个几何图形。
开始使用
要在项目中使用此包，请将 mapbox_maps_flutter_draw 及其依赖项添加到 pubspec.yaml 文件中：
dependencies:
mapbox_maps_flutter: ^<最新版本>
mapbox_maps_flutter_draw:
provider:
使用示例
请查看 示例项目 获取完整的示例代码。
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
import 'package:mapbox_maps_flutter_draw/mapbox_maps_flutter_draw.dart';
import 'package:provider/provider.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (_) => MapboxDrawController(),
),
],
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late MapboxDrawController _mapboxDrawController;
[@override](/user/override)
Widget build(BuildContext context) {
_mapboxDrawController = Provider.of<MapboxDrawController>(context);
MapboxOptions.setAccessToken("YOUR_MAPBOX_ACCESS_TOKEN");
return Scaffold(
appBar: AppBar(
title: const Text('Mapbox Draw'),
),
body: Stack(
children: [
MapWidget(
styleUri: MapboxStyles.STANDARD,
cameraOptions: CameraOptions(
center: Point(
coordinates: Position(9.738585205431917, 50.54399019335429),
),
zoom: 3.0,
),
onMapCreated: (mapInstance) async {
void onChangeHandler(GeometryChangeEvent event) {
print(event);
}
final geometryStyles = GeometryStyles(
lineStyle: GeometryStyle(
color: Colors.red,
width: 4,
opacity: 0.8,
));
await _mapboxDrawController.initialize(mapInstance,
onChange: onChangeHandler, styles: geometryStyles);
final pointStrings = [
'{"type":"Point","coordinates":[6.570985857967685,55.90719196736157]}',
];
_mapboxDrawController.addPoints(
pointStrings.map((e) => Point.fromJson(jsonDecode(e))).toList(),
);
final lineString = [
'{"type":"LineString","coordinates": [[5.064497149207369,54.4540017101983],[3.813159322052627,53.370235277869114]]}',
];
_mapboxDrawController.addLines(
lineString
.map((e) => LineString.fromJson(jsonDecode(e)))
.toList(),
);
final polygonString = [
'{"type":"Polygon","coordinates":[[[2.4126939197327033,48.854917603709794],[16.345373363928786,48.19160560896381],[4.302329069480351,50.799690739582275]]]}',
];
_mapboxDrawController.addPolygons(
polygonString
.map((e) => Polygon.fromJson(jsonDecode(e)))
.toList(),
);
},
),
// 绘制动作按钮
Positioned(
right: 8,
top: 64,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
IconButton.filled(
icon: const Icon(Icons.undo),
onPressed: () => _mapboxDrawController.undoLastAction(),
),
IconButton.filled(
icon: const Icon(Icons.radio_button_checked),
onPressed: () => _mapboxDrawController.toggleEditing(EditingMode.DRAW_POINT),
),
IconButton.filled(
icon: const Icon(Icons.timeline),
onPressed: () => _mapboxDrawController.toggleEditing(EditingMode.DRAW_LINE),
),
IconButton.filled(
icon: const Icon(Icons.crop_square_outlined),
onPressed: () => _mapboxDrawController.toggleEditing(EditingMode.DRAW_POLYGON),
),
IconButton.filled(
icon: const Icon(Icons.delete),
onPressed: () => _mapboxDrawController.toggleDeleteMode(),
),
],
),
),
// 保存按钮
Positioned(
left: 8,
top: 64,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton.filled(
icon: const Icon(Icons.save),
onPressed: () {
final points = _mapboxDrawController.getAllPoints();
final lines = _mapboxDrawController.getAllLines();
final polygons = _mapboxDrawController.getAllPolygons();
// 显示功能计数对话框
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Saved Features'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Points: ${points.length}'),
Text('Lines: ${lines.length}'),
Text('Polygons: ${polygons.length}'),
],
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('OK'),
),
],
);
},
);
},
),
],
),
),
],
),
);
}
}
更多关于Flutter地图绘制插件mapbox_maps_flutter_draw的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
