Flutter矢量瓦片渲染插件vector_tile_renderer的使用

简介

vector_tile_renderer 是一个用于创建地图切片图像或将矢量瓦片绘制到画布上的矢量瓦片渲染器。它用Dart编写，以支持Flutter中的矢量瓦片使用。

如果你正在寻找一个使用矢量瓦片的地图小部件，请参阅 vector_map_tiles。

已知问题

• 尚未实现的主题图层类型：raster, circle, fill-extrusion, heatmap, hillshade, sky

开发资源

• Maputnik Style Editor
• 主题 style specification

示例代码

以下是一个完整的示例Demo，展示了如何使用 vector_tile_renderer 插件来渲染矢量瓦片。

示例代码

import 'package:flutter/material.dart';
import 'tile.dart'; // 假设这是你自定义的Tile组件文件路径

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.light(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  late TextEditingController _scale;
  late TextEditingController _size;
  late TextEditingController _zoom;
  late TextEditingController _xOffset;
  late TextEditingController _yOffset;
  late TextEditingController _clipOffsetX;
  late TextEditingController _clipOffsetY;
  late TextEditingController _clipSize;
  TileOptions options = TileOptions(
      size: const Size(256, 256),
      scale: 1.0,
      zoom: 15,
      xOffset: 0,
      yOffset: 0,
      clipOffsetX: 0,
      clipOffsetY: 0,
      clipSize: 0,
      renderMode: RenderMode.vector);

  @override
  void initState() {
    super.initState();
    _scale = TextEditingController(text: '${options.scale}');
    _size = TextEditingController(text: '${options.size.width}');
    _zoom = TextEditingController(text: '${options.zoom.toInt()}');
    _xOffset = TextEditingController(text: '${options.xOffset.toInt()}');
    _yOffset = TextEditingController(text: '${options.yOffset.toInt()}');
    _clipOffsetX = TextEditingController(text: '${options.clipOffsetX.toInt()}');
    _clipOffsetY = TextEditingController(text: '${options.clipOffsetY.toInt()}');
    _clipSize = TextEditingController(text: '${options.clipSize.toInt()}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Vector Tile Example"),
        ),
        body: Column(children: [
          Padding(
              padding: const EdgeInsets.all(10),
              child: Row(children: [
                _doubleTextField(_scale, 'Scale', (value) => options.withValues(scale: value)),
                _doubleTextField(_size, 'Size', (value) => options.withValues(size: Size(value, value))),
                _doubleTextField(_xOffset, 'X Offset', (value) => options.withValues(xOffset: value)),
                _doubleTextField(_yOffset, 'Y Offset', (value) => options.withValues(yOffset: value)),
                _doubleTextField(_clipOffsetY, 'Clip Offset X', (value) => options.withValues(clipOffsetX: value)),
                _doubleTextField(_clipOffsetX, 'Clip Offset Y', (value) => options.withValues(clipOffsetY: value)),
                _doubleTextField(_clipSize, 'Clip Size', (value) => options.withValues(clipSize: value)),
                _doubleTextField(_zoom, 'Zoom', (value) => options.withValues(zoom: value)),
              ])),
          _radio('Rendering', RenderMode.values, () => options.renderMode, (v) => options.withValues(renderMode: v as RenderMode)),
          Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [Tile(options: options)]))
        ]));
  }

  Widget _doubleTextField(TextEditingController controller, String label, TileOptions Function(double) applyer) {
    return _textField(controller, label, (value) {
      final d = double.tryParse(value);
      if (d != null) {
        return applyer(d);
      }
      return null;
    });
  }

  Widget _textField(TextEditingController controller, String label, TileOptions? Function(String) applyer) =>
      Padding(
          padding: const EdgeInsets.only(right: 5.0),
          child: SizedBox(
              width: 100,
              child: TextField(
                  controller: controller,
                  onChanged: (value) {
                    final newOptions = applyer(value);
                    if (newOptions != null) {
                      setState(() {
                        options = newOptions;
                      });
                    }
                  },
                  decoration: InputDecoration(
                    border: const OutlineInputBorder(),
                    labelText: label,
                  ))));

  Widget _radio<T extends Enum>(String label, List<T> values, T Function() currentValue, TileOptions Function(T value) applyer) {
    return Row(
        children: values
            .map((v) => SizedBox(
                width: 150,
                child: ListTile(
                  title: Text(v.name),
                  leading: Radio<T>(
                    value: v,
                    groupValue: currentValue(),
                    onChanged: (T? value) {
                      if (value != null) {
                        setState(() {
                          options = applyer(value);
                        });
                      }
                    },
                  ),
                )))
            .toList());
  }
}

关键点解释

1. TileOptions: 定义了渲染矢量瓦片的各种选项，如尺寸、缩放比例、缩放级别等。
2. TextEditingController: 用于控制和获取输入框的值。
3. _doubleTextField 和 _textField: 创建文本输入框，并根据用户输入更新 TileOptions。
4. _radio: 创建单选按钮，允许用户选择不同的渲染模式（例如矢量或栅格）。
5. Tile 组件: 这里假设有一个名为 Tile 的自定义组件，用于实际渲染矢量瓦片。你需要根据实际情况实现这个组件。

通过这个示例，你可以动态调整矢量瓦片的渲染参数，并实时查看效果。希望这个示例能帮助你更好地理解和使用 vector_tile_renderer 插件。