Flutter地图快照生成插件mapkit_snapshotter_flutter的使用

Flutter地图快照生成插件mapkit_snapshotter_flutter的使用

mapkit_snapshotter_flutter 是一个用于在 Flutter 中生成地图快照的插件。该插件利用了 MapKit SDK，因此仅适用于 iOS 设备。

快照示例

下图展示了两种类型的快照示例：

示例 1（标准）	示例 2（混合）

使用方法

首先，确保你已经在 pubspec.yaml 文件中添加了依赖项：

dependencies:
  mapkit_snapshotter_flutter: ^x.x.x

然后你可以通过以下方式来创建一个地图快照：

final widget = Image(
  image: MapKitSnapshotterImage(
    MapKitSnapshotterOptions(
      /// 定义要捕获的地图区域。
      region: MapKitSnapshotterRegion(
        centerLatitude: 53.552363,
        centerLongitude: 9.990831,
        latitudeMeters: 2000,
        longitudeMeters: 2000,
      ),
      /// 设置快照的其他属性。
      brightness: MapKitSnapshotterBrightness.light,
      mapType: MapKitSnapshotterMapType.hybridFlyover,
    ),
  ),
  height: 100,
  width: 100,
);

/// ... 使用你的 widget

完整示例

以下是一个完整的示例，展示了如何在应用中集成和使用 mapkit_snapshotter_flutter 插件：

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  MapKitSnapshotterBrightness brightness = MapKitSnapshotterBrightness.light;
  int mapType = 0;
  bool showsBuildings = false;
  bool showsPointsOfIntereset = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('MapKit Snapshotter 示例'),
        ),
        body: Container(
          width: double.infinity,
          child: Column(
            children: [
              // 显示地图快照
              Image(
                image: MapKitSnapshotterImage(
                  MapKitSnapshotterOptions(
                    region: MapKitSnapshotterRegion(
                      centerLatitude: 53.552363,
                      centerLongitude: 9.990831,
                      latitudeMeters: 1000,
                      longitudeMeters: 1000,
                    ),
                    brightness: brightness,
                    mapType: MapKitSnapshotterMapType.values[mapType],
                    showsBuildings: showsBuildings,
                    showsPointsOfInterest: showsPointsOfIntereset,
                  ),
                ),
                width: 350,
                height: 200,
              ),
              // 显示当前设置
              Column(
                children: [
                  Text('亮度: ${brightness.toString()}'),
                  Text('地图类型: ${MapKitSnapshotterMapType.values[mapType]}'),
                ],
              ),
              // 控制按钮
              Column(
                children: [
                  MaterialButton(
                    child: Text('切换亮度'),
                    onPressed: () {
                      setState(() {
                        var newBrightness = MapKitSnapshotterBrightness.light;
                        if (this.brightness == MapKitSnapshotterBrightness.light) {
                          newBrightness = MapKitSnapshotterBrightness.dark;
                        }
                        this.brightness = newBrightness;
                      });
                    },
                  ),
                  MaterialButton(
                    child: Text('切换地图类型'),
                    onPressed: () {
                      setState(() {
                        mapType++;
                        if (mapType >= MapKitSnapshotterMapType.values.length) {
                          mapType = 0;
                        }
                      });
                    },
                  ),
                  MaterialButton(
                    child: Text('${showsBuildings ? '隐藏' : '显示'}建筑物'),
                    onPressed: () {
                      setState(() {
                        showsBuildings = !showsBuildings;
                      });
                    },
                  ),
                  MaterialButton(
                    child: Text('${showsPointsOfIntereset ? '隐藏' : '显示'}兴趣点'),
                    onPressed: () {
                      setState(() {
                        showsPointsOfIntereset = !showsPointsOfIntereset;
                      });
                    },
                  ),
                  Builder(
                    builder: (context) {
                      return MaterialButton(
                        child: Text('打开演示'),
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => DemoRoute()),
                          );
                        },
                      );
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}