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

galli_vector_package 是一个用于将Gallimaps矢量地图集成到Flutter应用中的插件。此插件提供了展示和交互高质量矢量地图的简便方法。

功能

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

安装

在 pubspec.yaml 文件中添加 galli_vector_package：

dependencies:
  galli_vector_package: latest

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

使用

在Dart代码中导入插件：

import 'package:galli_vector_package/galli_vector_package.dart';

基本示例

以下是一个简单的示例，展示了如何使用 galli_vector_package 插件：

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:galli_vector_package/galli_vector_package.dart';
import 'package:geolocator/geolocator.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 获取用户位置
  Future<void> getLocation() async {
    LocationPermission permissionStatus = await Geolocator.checkPermission();
    if (permissionStatus == LocationPermission.denied ||
        permissionStatus == LocationPermission.deniedForever) {
      permissionStatus = await Geolocator.requestPermission();
    }
  }

  [@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: Scaffold(
        body: SafeArea(
          child: FutureBuilder(
            future: getLocation(),
            builder: (context, snap) {
              return GalliMap(
                // 设置地图大小
                size: (
                  width: MediaQuery.sizeOf(context).width,
                  height: MediaQuery.sizeOf(context).height
                ),
                // 设置初始相机位置
                initialCameraPostion: const CameraPosition(
                    target: LatLng(27.675424, 85.324947), zoom: 19),
                // 设置认证令牌
                authToken: "token",
                // 显示当前位置
                showCurrentLocation: true,
                // 地图创建完成后的回调
                onMapCreated: (c) {},
              );
            },
          ),
        ),
      ),
    );
  }
}