Flutter矢量图标管理插件galli_vector_plugin的使用

galli_vector_plugin 是一个用于在 Flutter 应用程序中集成来自 Gallimaps 的矢量地图的插件。该插件提供了方便的方式来展示和交互高质量的矢量地图。

特性

• 高性能矢量地图
• 地图标记、路线、填充和圆圈
• 用户交互处理（例如，点击、缩放、倾斜、平移）
• 自动地图缓存以供离线使用

安装

在 pubspec.yaml 文件中添加 galli_vector_plugin 依赖：

dependencies:
  galli_vector_plugin: latest

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

使用

在 Dart 代码中导入插件：

import 'package:galli_vector_plugin/galli_vector_plugin.dart';

基本示例

以下是一个简单的示例，展示如何使用 galli_vector_plugin：

GalliMap(
  showCurrentLocation: true,
  authToken: "authToken",
  size: (
    height: MediaQuery.of(context).size.height * 2,
    width: MediaQuery.of(context).size.width * 2,
  ),
  compassPosition: (
    position: CompassViewPosition.topRight,
    offset: const Point(32, 82)
  ),
  showCompass: true,
  onMapCreated: (newC) {
    controller = newC;
    setState(() {});
  },
  onMapClick: (LatLng latLng) {

  },
),

完整示例

下面是一个完整的示例，展示了如何在 Flutter 应用程序中使用 galli_vector_plugin：

import 'dart:developer';
import 'dart:math' hide log;

import 'package:flutter/material.dart';
import 'package:galli_vector_plugin/galli_vector_plugin.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const VectorMap(),
    );
  }
}

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

  [@override](/user/override)
  State<VectorMap> createState() => _VectorMapState();
}

class _VectorMapState extends State<VectorMap> {
  GalliMapController? controller;
  GalliMethods methods = GalliMethods("token");
  List<Marker> markers = [];
  late void Function() clearMarkers;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: GalliMap(
            showCurrentLocation: true,
            authToken: "token",
            size: (
              height: MediaQuery.of(context).size.height * 2,
              width: MediaQuery.of(context).size.width * 2,
            ),
            compassPosition: (
              position: CompassViewPosition.topRight,
              offset: const Point(32, 82)
            ),
            showCompass: true,
            onMapCreated: (newC) {
              controller = newC;
              setState(() {});
            },
            onMapClick: (LatLng latLng) {
              methods.get360Image(latLng).then((value) {
                if (value != null) {
                  GalliViewer galliViewer = GalliViewer(
                    builder:
                        (BuildContext context, Function() methodFromChild) {
                      clearMarkers = methodFromChild;
                    },
                    image: value,
                    onTap: (latitude, longitude, tilt) {},
                    markers: markers,
                    maxMarkers: 2,
                  );
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (_) => Scaffold(
                              appBar: AppBar(
                                actions: [
                                  GestureDetector(
                                      onTap: () {
                                        clearMarkers();
                                      },
                                      child: const Text("Clear"))
                                ],
                              ),
                              body: galliViewer)));
                } else {
                  log("Image not found");
                }
              });
            },
          ),
        ),
      ),
    );
  }
}