Flutter地图瓦片加载插件pmtiles的使用

pmtiles 是一个用于读取 PMTiles v3 归档文件（本地或远程）的 Dart 插件。它支持从文件系统或 HTTP URL 加载瓦片数据，并且可以在不同的环境中使用，包括原生 Dart VM、Node.js 和浏览器。

主要功能

• 支持从文件或 HTTP URL 读取 PMTiles 归档。
• 提供对归档元数据和瓦片数据的访问。
• 支持多种压缩格式（如 gzip, brotli 等）。
• 可以提取单个或多个瓦片数据。

示例代码

下面是一个完整的示例 Demo，展示了如何在 Flutter 应用中使用 pmtiles 插件来加载和显示地图瓦片。

添加依赖

首先，在 pubspec.yaml 文件中添加 pmtiles 依赖：

dependencies:
  flutter:
    sdk: flutter
  pmtiles: ^1.0.0  # 使用最新版本

示例代码

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:pmtiles/pmtiles.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter PMTiles Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapTileViewer(),
    );
  }
}

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

class _MapTileViewerState extends State<MapTileViewer> {
  String? tileData;

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

  Future<void> loadTile() async {
    // 打开 PmTiles 归档文件
    final archive = await PmTilesArchive.from('https://example.com/path/to/file.pmtiles');

    try {
      // 获取某个特定瓦片的数据
      final int tileId = ZXY(4, 3, 2).toTileId(); // 根据需要调整 ZXY 坐标
      final Tile tile = await archive.tile(tileId);

      // 解压瓦片数据
      final List<int> bytes = tile.bytes();

      // 在这里你可以将 bytes 转换为图像或其他格式
      setState(() {
        tileData = base64Encode(bytes); // 这里只是简单地将字节转换为 base64 字符串
      });
    } catch (e) {
      print('Error loading tile: $e');
    } finally {
      await archive.close();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PMTiles Viewer'),
      ),
      body: Center(
        child: tileData != null
            ? Image.memory(base64Decode(tileData!)) // 显示解码后的图像
            : CircularProgressIndicator(), // 加载中的提示
      ),
    );
  }
}