Flutter如何加载第三方PBF矢量瓦片并实现双图层叠加展示？

依赖配置 #

先在pubspec.yaml中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^6.1.0
  vector_map_tiles: ^6.1.1
  latlong2: ^0.9.0

完整main.dart代码 #

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:vector_tile_renderer/vector_tile_renderer.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '矢量瓦片叠加示例',
      home: Scaffold(
        appBar: AppBar(title: const Text('矢量瓦片叠加展示')),
        body: const VectorTileMap(),
      ),
    );
  }
}

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

  @override
  State<VectorTileMap> createState() => _VectorTileMapState();
}

class _VectorTileMapState extends State<VectorTileMap> {
  final MapController _mapController = MapController();
  // 自定义渲染主题，可按需调整样式
  final _theme = Theme(
    layers: [
      // 第一个图层layer1样式：半透蓝色填充
      Layer(
        id: 'layer1',
        type: LayerType.fill,
        sourceLayer: 'layer1',
        paint: {
          'fill-color': Colors.blue.value,
          'fill-opacity': 0.5,
        },
      ),
      // 第二个图层layer2样式：红色描边
      Layer(
        id: 'layer2',
        type: LayerType.line,
        sourceLayer: 'layer2',
        paint: {
          'line-color': Colors.red.value,
          'line-width': 2,
        },
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        initialCenter: const LatLng(35.8617, 104.1954), // 初始中心点默认设为中国区域
        initialZoom: 4,
        minZoom: 1,
        maxZoom: 18,
      ),
      children: [
        // 下层layer1矢量瓦片
        VectorTileLayer(
          tileProviders: TileProviders([
            VectorTileProvider(
              urlTemplate: 'http://35.137.120.5:8080/geoserver/gwc/service/tms/1.0.0/country:layer1@EPSG:900913@pbf/{z}/{x}/{y}.pbf',
              tms: true, // 适配Geoserver TMS格式的y轴翻转规则
            ),
          ]),
          theme: _theme,
          layerIds: const ['layer1'],
        ),
        // 上层layer2矢量瓦片
        VectorTileLayer(
          tileProviders: TileProviders([
            VectorTileProvider(
              urlTemplate: 'http://35.138.119.4:8080/geoserver/gwc/service/tms/1.0.0/country:layer2@EPSG:900913@pbf/{z}/{x}/{y}.pbf',
              tms: true,
            ),
          ]),
          theme: _theme,
          layerIds: const ['layer2'],
        ),
      ],
    );
  }
}

注意事项 #

• 需提前在Geoserver端配置跨域过滤器，否则移动端请求瓦片会被跨域策略拦截
• 图层样式可根据业务需求自定义，支持填充、描边、符号、文字标注等多种渲染类型
• 若瓦片服务需要鉴权，可在VectorTileProvider的additionalHeaders参数中添加鉴权请求头

内容的提问来源于stack exchange，提问作者Huy Le