Flutter天文绘图插件skyplot的使用

SkyPlot Flutter Package

SkyPlot 是一个功能强大的 Flutter 库，用于在动态天空图界面中可视化位置数据。它不仅限于 GNSS 卫星位置，还可以适应各种其他应用，如雷达地图、设备可用性扫描等。其灵活性使其适用于广泛的应用场景。

Features

• 多用途可视化：适合显示从卫星到本地设备的2D位置数据。
• 可定制的界面：可以根据应用程序的需求自定义外观，包括颜色、图标等。
• 自适应和响应式：无缝适应不同的屏幕尺寸和方向。
• 交互性和信息丰富：提供交互元素以吸引用户并显示详细信息。

Getting Started

添加依赖

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

dependencies:
  skyplot: any

导入库

在 Dart 代码中导入 SkyPlot：

import 'package:skyplot/skyplot.dart';

Usage

创建 SkyPlot Widget

通过提供数据和配置来创建 SkyPlot Widget：

SkyPlot(
  skyData: yourDataList,
  categories: yourCategoryMap,
  options: SkyPlotOptions(),
)

SkyData

SkyData 是一个多功能的数据结构，表示图中的每个项目：

SkyData(
  azimuthDegrees: 100,
  elevationDegrees: 50,
  category: 'CategoryName',
  id: 'UniqueID',
  usedInFix: true, // 或 false，具体取决于上下文
)

自定义

配置天空图的外观和行为：

SkyPlotOptions(
  baseRadiusInFix: 8.0,
  baseRadiusNotInFix: 6.0,
  azimuthDivisions: 30,
  // ... 其他可自定义选项 ...
)

Example Applications

• 卫星跟踪：可视化轨道上的卫星。
• 雷达映射：显示雷达扫描和检测到的对象。
• 设备扫描：显示一定范围内的可用设备。

Contributing

🍺 欢迎提交 Pull 请求！

开源没有贡献者是没有意义的。无论你的更改有多大，即使是修改一行代码也对我们帮助很大。

文档中可能有很多语法问题。如果你英语流利，帮助我们修复这些问题将是一个很大的帮助。

报告错误和问题也是贡献的一部分。

Author

Charles Gameti: gameticharles@GitHub.

License

本库在 MIT 许可下提供。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 SkyPlot：

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:skyplot/skyplot.dart';
import 'package:raw_gnss/raw_gnss.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'SkyPlot Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late RawGnss _rawGnss;
  var _hasPermissions = false;

  @override
  void initState() {
    super.initState();
    _rawGnss = RawGnss();

    Permission.location
        .request()
        .then((value) => setState(() => _hasPermissions = value.isGranted));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: SkyPlotGNSS(
              rawGnss: _rawGnss,
              hasPermissions: _hasPermissions,
              options: SkyPlotOptions(
                azimuthTextStyle: TextStyle(
                    color: Theme.of(context).colorScheme.primary,
                    fontSize: 10,
                    fontWeight: FontWeight.normal),
                directionTextStyle: TextStyle(
                    color: Theme.of(context).colorScheme.primary,
                    fontSize: 10,
                    fontWeight: FontWeight.bold),
                elevationTextStyle: TextStyle(
                    color: Theme.of(context).colorScheme.primary,
                    fontSize: 10,
                    fontWeight: FontWeight.normal),
                showSkyObjectNotInFix: true,
                directionDetail: DirectionDetail.eight,
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: Column(
        children: [
          FloatingActionButton(
            onPressed: () {},
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
          FloatingActionButton(
            onPressed: () {},
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
          FloatingActionButton(
            onPressed: () {},
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
          FloatingActionButton(
            onPressed: () {},
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ].insertBetween<Widget>(const SizedBox(height: 5.0)).toList(),
      ), // 这个尾随逗号使构建方法的自动格式化更美观。
    );
  }
}

说明

• 权限请求：在 initState 中请求位置权限，并根据权限状态更新 _hasPermissions。
• SkyPlotGNSS：使用 SkyPlotGNSS 组件显示 GNSS 数据。
• 自定义选项：通过 SkyPlotOptions 配置天空图的样式和行为。

希望这个示例能帮助你更好地理解和使用 SkyPlot 插件！