Flutter地图编辑插件polaris_map_editor的使用

Flutter地图编辑插件polaris_map_editor的使用

PolarisMapEditor 是一个用于创建带有天文学特色的地图编辑器的 Flutter 库。用户可以通过它在地图上交互式地绘制区域。该库的灵感来源于北极星（Polaris），即北天极附近的恒星，为用户提供了一个可靠的参照点。

开始使用

首先，在您的 Dart 代码中导入该库：

import 'package:polaris_map_editor/polaris_map_editor.dart';

如何使用

PolarisMapEditor 小部件

以下是一个简单的示例，展示了如何使用 PolarisMapEditor 小部件来创建一个地图编辑器：

import 'dart:io';

import 'package:example/config.dart';
import 'package:flutter/material.dart';
import 'package:polaris_map_editor/polaris_map_editor.dart';
import 'package:polaris_map_editor/polaris_map_editor_dependencies.dart';

void main() {
  runApp(const Example());
}

/// 一个展示如何使用 PolarisMapEditor 小部件的例子。
class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Polaris Map Editor',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const Editor(),
    );
  }
}

class Editor extends StatefulWidget {
  const Editor({super.key});

  @override
  State<Editor> createState() => _EditorState();
}

class _EditorState extends State<Editor> {
  /// 一个用于控制地图的 flutter map 控制器。
  final mapController = MapController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Polaris Map Editor'),
      ),
      body: PolarisMapEditor(
        mapController: mapController,
        options: PolarisOptions.defaultOptions(
          color: Colors.deepPurple,
          googlePlaceApiKey: Platform.isMacOS || Platform.isIOS
              ? Config.googlePlaceIosKey
              : Config.googlePlaceAndroidKey,
        ),
        onAreaChanged: print,
        child: FlutterMap(
          mapController: mapController,
          options: MapOptions(
            interactionOptions: InteractionOptions(
              cursorKeyboardRotationOptions: CursorKeyboardRotationOptions.disabled(), // 防止快捷键
            ),
          ),
          children: [
            TileLayer(
              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              userAgentPackageName: 'com.cosmos-in-code.polaris_map_editor',
            ),
            const PolarisLayer(), // Polaris 小部件，包括 AreaLayer、LinesLayer 和 PointsLayer
          ],
        ),
      ),
    );
  }
}

PolarisOptions

PolarisOptions 类负责自定义 Polaris 地图编辑器。它可以与 Flutter Map 完美集成，并提供多种定制选项。

factory PolarisOptions.defaultOptions({
  Color color = Colors.blue,
  String? googlePlaceApiKey,
}) {
  return PolarisOptions(
    menu: const MenuOptions(
      enabled: true,
    ),
    area: AreaOptions(
      color: color.withOpacity(0.3),
      isFilled: true,
    ),
    line: LineOptions(
      color: color,
      strokeWidth: 3,
    ),
    draggedLine: LineOptions(
      color: color,
      strokeWidth: 3,
      isDotted: true,
    ),
    point: PointOptions(
      icon: Icon(
        Icons.circle,
        color: color,
        size: 14,
      ),
      lastPointIcon: Stack(
        fit: StackFit.expand,
        children: [
          Icon(
            Icons.circle,
            color: color,
            size: 10,
          ),
          Icon(
            Icons.circle_outlined,
            color: color,
            size: 19,
          ),
        ],
      ),
    ),
    place: googlePlaceApiKey != null
        ? PlaceOptions.googleMapService(apiKey: googlePlaceApiKey)
        : null,
    mouse: const MouseOptions(),
    shortcut: const ShortcutOptions(
      undo: [
        [LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.keyZ],
        [LogicalKeyboardKey.metaLeft, LogicalKeyboardKey.keyZ],
      ],
      redo: [
        [LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.keyY],
        [LogicalKeyboardKey.metaLeft, LogicalKeyboardKey.keyY],
        [
          LogicalKeyboardKey.controlLeft,
          LogicalKeyboardKey.shiftLeft,
          LogicalKeyboardKey.keyZ
        ],
        [
          LogicalKeyboardKey.metaLeft,
          LogicalKeyboardKey.shiftLeft,
          LogicalKeyboardKey.keyZ
        ],
      ],
      search: [
        [LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.keyF],
        [LogicalKeyboardKey.metaLeft, LogicalKeyboardKey.keyF],
      ],
      zoomIn: [
        [LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.add],
        [LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.equal],
        [LogicalKeyboardKey.metaLeft, LogicalKeyboardKey.add],
        [LogicalKeyboardKey.metaLeft, LogicalKeyboardKey.equal],
        [
          LogicalKeyboardKey.controlLeft,
          LogicalKeyboardKey.shiftLeft,
          LogicalKeyboardKey.add
        ],
        [
          LogicalKeyboardKey.metaLeft,
          LogicalKeyboardKey.shiftLeft,
          LogicalKeyboardKey.add
        ],
      ],
      zoomOut: [
        [LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.minus],
        [LogicalKeyboardKey.metaLeft, LogicalKeyboardKey.minus],
      ],
      fitCameraToArea: [
        [LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.keyH],
        [LogicalKeyboardKey.metaLeft, LogicalKeyboardKey.keyH],
      ],
      deletePoint: [
        [LogicalKeyboardKey.controlLeft],
      ],
    ),
  );
}