Flutter地图展示插件mapbox_widget_layer的使用

Flutter 地图展示插件 mapbox_widget_layer 的使用

mapbox_widget_layer 是一个定制的 Flutter 小部件，用于在 Mapbox 地图上显示动态小部件。该插件允许基于屏幕位置、缩放级别、方位角和倾斜度来创建小部件。

使用说明

1. 安装 mapbox_gl 包： 首先，确保你已经在你的项目中安装了 mapbox_gl 包。你可以通过在 pubspec.yaml 文件中添加以下依赖来实现：

   dependencies:
     flutter:
       sdk: flutter
     mapbox_gl: ^0.14.0
     mapbox_widget_layer: ^0.1.0
   

2. 创建包含 MapboxMap 和 MapboxWidgetLayer 的新小部件： 创建一个新的 Flutter 小部件，并在其中包含一个 Stack 小部件，该小部件内嵌入 MapboxMap 和 MapboxWidgetLayer。

小部件渲染选项

有三种小部件渲染选项可供选择：

1. MapboxItemBuilder： 这种方式提供了所有属性以手动控制小部件的渲染。它会暴露 screenPosition、zoom、bearing 和 tilt 属性，并通过 builder 函数来响应这些属性的变化。

   MapboxItemBuilder(
       builder: (context, screenPosition) {
           debugPrint('${screenPosition.screenPosition}');
           debugPrint('${screenPosition.zoom}');
           debugPrint('${screenPosition.bearing}');
           debugPrint('${screenPosition.tilt}');
           return Container(
             height: 100,
             width: 100,
             color: Colors.blue[200],
             child: const Center(child: Text('builder')),
           );
       },
       size: const Size(100, 100),
       coordinate: const LatLng(49.457647152564334, 11.076190602176172),
   ),
   

2. MapboxItem： 这种方式不提供自定义渲染选项。它会直接将小部件放置在指定的位置。

   MapboxItem(
       child: Container(
           height: 100,
           width: 100,
           color: Colors.red[200],
           child: const Center(child: Text('item')),
       ),
       size: const Size(100, 100),
       coordinate: const LatLng(49.45800162760231, 11.076150534247994),
   ),
   

3. MapboxAutoTransformItem： 这种方式自动调整渲染，基于 zoom、bearing 和 tilt。它允许手动控制 zoomBase（在哪个缩放级别小部件的大小应与像素大小匹配）和 zoomExpFactor（缩放级别的插值指数基数）。

   MapboxAutoTransformItem(
       child: Container(
           height: 100,
           width: 100,
           color: Colors.green[200],
           child: const Center(child: Text('auto')),
       ),
       size: const Size(100, 100),
       coordinate: const LatLng(49.45750295375467, 11.076125061775054),
   ),
   

完整示例

完整的示例代码可以在文件 ./example/main.dart 中找到 此处。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:mapbox_gl/mapbox_gl.dart';
import 'package:mapbox_widget_layer/mapbox_widget_layer.dart';

class MapboxWithWidgetLayer extends StatelessWidget {
  MapboxWithWidgetLayer({Key? key}) : super(key: key);
  final completer = Completer<MapboxMapController>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        MapboxMap(
          accessToken: 'ACCESS TOKEN',
          initialCameraPosition: CameraPosition(target: LatLng(0, 0)),
          onMapCreated: (controller) => completer.complete(controller),
        ),
        MapboxWidgetLayer(
          onMapInteractive: (contorller) {},
          controllerFuture: completer.future,
          items: [
            MapboxItem(
              child: Container(
                height: 100,
                width: 100,
                color: Colors.red[200],
                child: const Center(child: Text('item')),
              ),
              size: const Size(100, 100),
              coordinate: const LatLng(49.45800162760231, 11.076150534247994),
            ),
            MapboxItemBuilder(
              builder: (context, screenPosition) {
                debugPrint('${screenPosition.screenPosition}');
                debugPrint('${screenPosition.zoom}');
                debugPrint('${screenPosition.bearing}');
                debugPrint('${screenPosition.tilt}');
                return Container(
                  height: 100,
                  width: 100,
                  color: Colors.blue[200],
                  child: const Center(child: Text('builder')),
                );
              },
              size: const Size(100, 100),
              coordinate: const LatLng(49.457647152564334, 11.076190602176172),
            ),
            MapboxAutoTransformItem(
              child: Container(
                height: 100,
                width: 100,
                color: Colors.green[200],
                child: const Center(child: Text('auto')),
              ),
              size: const Size(100, 100),
              coordinate: const LatLng(49.45750295375467, 11.076125061775054),
            ),
          ],
        ),
      ],
    );
  }
}