Flutter 360度全景查看插件galli360viewer的使用

Flutter 360度全景查看插件galli360viewer的使用

Galli Maps 提供的用于展示尼泊尔街道360度图像的 Flutter 库。

特性

• 宽广、沉浸式的视图
• 可以平移、倾斜和缩放图像的不同部分
• 单击即可标记建筑物或地点
• 可以保存标记的位置并与其他用户分享

配置

在 pubspec.yaml 文件中添加 galli360viewer 作为依赖项：

dependencies:
    galli360viewer: ${last_version}

如何使用

首先导入 galli360viewer 包，并将 Galli360Viewer 小部件添加到项目中：

import 'package:galli360viewer/galli360viewer.dart';

// 初始化控制器
final Galli360 controller = Galli360(token);

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Viewer(
      // 设置经纬度坐标
      coordinate: LatLng(37.421997, -122.084057),
      // 设置标记的位置
      pinX: 0.5,
      pinY: 0.5,
      // 设置查看器的高度和宽度
      height: 400,
      width: 400,
      // 加载时显示的部件
      loadingWidget: Container(
        child: Center(
          child: const CircularProgressIndicator(),
        ),
      ),
      // 关闭按钮的部件
      closeWidget: Container(
        child: Center(
          child: Text('关闭'),
        ),
      ),
      // 是否显示关闭按钮
      showClose: true,
      // 是否启用动画
      animation: true,
      // 最大缩放级别
      maxZoom: 2,
      // 最小缩放级别
      minZoom: 0.5,
      // 动画速度
      animSpeed: 5,
      // 灵敏度
      sensitivity: 5,
      // 标记图标
      pinIcon: Icons.location_on,
      // 保存标记位置时的回调函数
      onSaved: (double x, double y) {
        print(x);
        print(y);
      },
      // 控制器
      controller: controller,
    ),
  );
}

预览

示例代码

以下是完整的示例代码：

import 'package:example/Const/env.dart';
import 'package:flutter/material.dart';
import 'package:galli360viewer/galli360viewer.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Galli 360 Viewer',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Galli 360 Viewer'),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Galli360 galli = Galli360(token);

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Viewer(
        controller: galli,
        onSaved: ((x, y) => {print("$x,$y")}),
        pinX: 10.189151195944662,
        pinY: 66.2590812683003,
        coordinate: LatLng(latitude: 27.683370, longitude: 85.304596),
      ),
    );
  }
}