Flutter地图展示插件flutter_map_maplibre的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter地图展示插件flutter_map_maplibre的使用

flutter_map_maplibre 是一个为 flutter_map 提供高性能 Mapbox Vector Tiles (MVT) 支持的插件，由 maplibre 驱动。

获取开始

1. 添加依赖到 pubspec.yaml

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_map: ^7.0.0
  flutter_map_maplibre: ^0.0.1
  maplibre: ^0.1.0

2. 按照平台特定的设置步骤进行配置

根据 maplibre 包的要求进行平台特定的设置：

使用方法

有两种方式可以在 flutter_map 和 maplibre 之间搭建桥梁：

  1. 将 MapLibre 地图作为 FlutterMap 的一层。
  2. 在 MapLibre 地图中使用 FlutterMap 的层。

使用 MapLibre 作为 FlutterMap 的矢量层

在此方法中，我们将 MapLibreMap 作为 FlutterMap 的一层，并让 flutter_map 处理所有的手势输入。

注意：MapLibreLayer 当前在 Android 上有一个已知的 bug，会导致高延迟和抛出异常到控制台。详情请参见 issue #54。

@override
Widget build(BuildContext context) {
  return FlutterMap(
    mapController: _mapController,
    options: const MapOptions(
      initialZoom: 4,
      initialCenter: LatLng(0, 0),
      maxZoom: 20,
      cameraConstraint: CameraConstraint.contain(
        bounds: LatLngBounds(
          const LatLng(-90, -180),
          const LatLng(90, 180),
        ),
      ),
    ),
    children: [
      const MapLibreLayer(
        initStyle: 'insert your style url here', // 替换为您自己的样式 URL
      ),
      // 在此处添加其他 flutter_map 层
    ],
  );
}

在 MapLibre 中使用 FlutterMap 层

在此解决方案中，我们在 MapLibreMap 中使用 FlutterMap 的层。所有手势输入都由 maplibre 处理。

@override
Widget build(BuildContext context) {
  return MapLibreMap(
    onMapCreated: (controller) => _controller = controller,
    options: MapOptions(
      initCenter: Position(0, 0),
      initZoom: 3,
      maxPitch: 0, // flutter_map 不支持相机倾斜角度，因此在此禁用它
      initStyle: 'insert your style url here', // 替换为您自己的样式 URL
    ),
    children: [
      // 将每个 flutter_map 层包装在一个 FlutterMapAdapter 小部件中
      const FlutterMapAdapter(
        child: MarkerLayer(
          markers: [
            Marker(
              point: LatLng(15, 5),
              width: 40,
              height: 40,
              child: Icon(Icons.location_on, color: Colors.red, size: 40),
              alignment: Alignment.topCenter,
            ),
          ],
        ),
      ),
    ],
  );
}

其他信息

如果您有任何问题或需要帮助，请提交 pull request 或 bug 报告，或者加入 flutter_map Discord 服务器。

您可以查看 示例应用 来了解如何使用该插件和其他相关插件。


更多关于Flutter地图展示插件flutter_map_maplibre的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter地图展示插件flutter_map_maplibre的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 flutter_map_maplibre 插件在 Flutter 应用中展示地图的示例代码。这个插件是 flutter_map 的一个分支，它使用 MapLibre GL（一个开源的 Mapbox GL JS 的分支）来渲染地图。

首先，确保你已经在 pubspec.yaml 文件中添加了依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^0.x.x  # 请检查最新版本号
  flutter_map_maplibre: ^0.x.x  # 请检查最新版本号

注意：版本号 0.x.x 是一个占位符，请替换为实际的最新版本号。

接下来，创建一个 Flutter 应用并在其中使用 flutter_map_maplibre 插件来展示地图。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_maplibre/flutter_map_maplibre.dart';
import 'package:latlong2/latlong2.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter MapLibre Demo'),
        ),
        body: MapScreen(),
      ),
    );
  }
}

class MapScreen extends StatelessWidget {
  final MapController _controller = MapController();

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      mapController: _controller,
      options: MapOptions(
        center: LatLng(40.7128, -74.0060), // 纽约市的经纬度
        zoom: 10.0,
      ),
      layers: [
        TileLayerOptions(
          urlTemplate:
              'https://api.maplibre.org/styles/v1/{id}/tiles/{z}/{x}/{y}@{scale}x?access_token=YOUR_ACCESS_TOKEN',
          subdomains: ['a', 'b', 'c'],
          additionalOptions: {
            'id': 'mapbox://styles/mapbox/streets-v11',
            'accessToken': 'YOUR_ACCESS_TOKEN', // 替换为你的 MapLibre 访问令牌
          },
        ),
      ],
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 在 pubspec.yaml 文件中添加了 flutter_map 和 flutter_map_maplibre 依赖项。
  2. 创建了一个 MyApp 小部件，它是应用的主入口。
  3. 在 MyApp 中，我们使用了 MaterialApp 和 Scaffold 来构建应用的基本结构。
  4. 创建了一个 MapScreen 小部件，它包含了 FlutterMap 小部件。
  5. 在 FlutterMap 中，我们设置了地图的中心点、缩放级别以及图层。
  6. 使用 TileLayerOptions 来配置 MapLibre 图层，并提供了访问令牌（你需要替换 YOUR_ACCESS_TOKEN 为你自己的 MapLibre 访问令牌）。

请确保你已经从 MapLibre 网站获取了一个有效的访问令牌，并将其替换到代码中的 accessToken 字段。

这个示例展示了如何在 Flutter 应用中使用 flutter_map_maplibre 插件来展示一个基本的地图。你可以根据需要进一步自定义和扩展这个示例。

回到顶部