Flutter地图瓦片插件alfa_vector_mbtiles的使用

VectorMBTiles

VectorMB Tiles 是一个用于在 FlutterMap 中处理 Mapbox 矢量瓦片的 Flutter 插件。

特性

通过扩展 VectorTileProvider 并指定 VectorMBTiles 作为 MemoryCacheVectorTileProvider 的参数，可以在内存中高速操作。

开始使用

首先，在你的项目中添加 alfa_vector_mbtiles 包：

flutter pub add alfa_vector_mbtiles

使用示例

以下是一个完整的示例，展示了如何使用 alfa_vector_mbtiles 插件。你可以查看 /example 文件夹中的详细信息。

AlfaVectorTileLayerWidget(
    options: AlfaVectorTileLayerOptions(
        theme: Theme,
        tileProviders: TileProviders({
            'openmaptiles': AlfaVectorMBTilesProvider(
                mbtilesPath: '/path/to/mbtiles',
                maximumZoom: 18)
        })
    ),
)

完整示例代码

以下是从 GitHub 上获取的完整示例代码。你可以直接将这些代码复制到你的项目中来运行示例。

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:vector_map_tiles/vector_map_tiles.dart';
import 'package:alfa_vector_mbtiles/alfa_vector_mbtiles.dart';
import 'package:vector_tile_renderer/vector_tile_renderer.dart';
import 'package:vector_tile_renderer/vector_tile_renderer.dart' as vector_tile_renderer;

import 'osm_bright_ja_style.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: 'VectorMBTiles 示例',
      theme: ThemeData(
        // 这是你应用的主题。
        //
        // 尝试用 "flutter run" 运行你的应用。你会看到应用有一个蓝色工具栏。然后，不退出应用，尝试
        // 将下面的 primarySwatch 改为 Colors.green 并执行 "热重载"（按控制台中的 "r" 键，或者保存文件以触发热重载）。
        // 注意计数器没有重置回零；应用并没有重启。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'VectorMBTiles 示例'),
    );
  }
}

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

  // 这个小部件是你的应用的首页。它是有状态的，意味着
  // 它有一个包含影响其外观字段的状态对象（定义在下面）。
  //
  // 这个类是状态的配置。它保存了由父级（在这个例子中是App小部件）提供的值（如标题）
  // 并被构建方法使用。小部件子类中的字段总是标记为 "final"。

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final MapController _mapController = MapController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这个方法每次调用 setState 时都会重新运行，比如上面的 _incrementCounter 方法。
    //
    // Flutter 框架经过优化，使得重建方法变得快速，因此你可以重建任何需要更新的东西，而不是逐个更改小部件实例。
    return Scaffold(
        appBar: AppBar(
          // 这里我们从 MyHomePage 对象中获取值，该对象由 App.build 方法创建，
          // 并用它来设置我们的应用栏标题。
          title: Text(widget.title),
        ),
        body: Center(
          // Center 是一个布局小部件。它接受一个子元素并将其放置在父元素的中间。
          child: FlutterMap(
              mapController: _mapController,
              options: MapOptions(
                center: LatLng(35.68132332775388, 139.76712479771956),
                zoom: 15,
                maxZoom: 18,
                // plugins: [VectorMapTilesPlugin()],
              ),
              children: [
                VectorTileLayer(
                  key: const Key('AlfaVectorTileLayerWidget'),
                  theme: _mapTheme(context),
                  tileProviders: TileProviders(
                      {'openmaptiles': _cachingTileProvider(_basemapPath())}),
                ),
              ]),
        ));
  }
}

VectorTileProvider _cachingTileProvider(String mbtilesPath) {
  return MemoryCacheVectorTileProvider(
      delegate: VectorMBTilesProvider(
          mbtilesPath: mbtilesPath,
          // 这是提供程序的最大缩放级别，而不是地图的最大缩放级别。矢量瓦片被渲染
          // 成更大的尺寸以支持更高的缩放级别
          maximumZoom: 14),
      maxSizeBytes: 1024 * 1024 * 2);
}

_mapTheme(BuildContext context) {
  // 地图使用主题进行渲染
  // 要提供深色主题，可以这样做：
  // if (MediaQuery.of(context).platformBrightness == Brightness.dark) return myDarkTheme();
  return OSMBrightTheme.osmBrightJaTheme();
}

extension OSMBrightTheme on ProvidedThemes {
  static vector_tile_renderer.Theme osmBrightJaTheme({Logger? logger}) =>
      ThemeReader(logger: logger).read(osmBrightJaStyle());
}

String _basemapPath() {
  return 'assets/example.mbtiles';
}