Flutter地图渲染插件mapsforge_flutter的使用

Flutter 地图渲染插件 mapsforge_flutter 的使用

mapsforge_flutter 是一个纯离线的地图库，用于在 Flutter 应用中展示离线地图。它源自于 Java/Android 的 mapsforge 项目 [https://github.com/mapsforge/mapsforge]。

该库的主要功能是从本地存储的 .map 文件读取地图数据，并在用户设备上渲染这些地图，而无需互联网连接。

如果你的用户在查看地图时在线，那么不建议使用此库。虽然可以显示在线地图，但有许多更简单的库可以完成这项任务。

截图

示例

开始使用请参考 简化示例

在子目录 示例 中找到更多示例：

• 白天和黑夜主题
• 世界地图
• 室内示例
• 等高线渲染
• 右键菜单
• 标记点
• 拖拽功能
• 在线地图
• 旋转功能

致谢

首先要感谢 mapsforge 项目的作者，他做了出色的工作！

还要感谢 Chemnitz 大学，他们实现了室内地图的支持。

开始使用

前提条件

在 pubspec.yaml 中包含库：

  mapsforge_flutter: ^3.0.0

注意：开发过程中可以考虑直接从 GitHub 仓库引入。

在 pubspec.yaml 中包含所有使用的资源文件（参见示例项目的 pubspec 文件）：

flutter:
  assets:
    - packages/mapsforge_flutter/assets/patterns/coniferous.svg
    - packages/mapsforge_flutter/assets/patterns/coniferous_and_deciduous.svg
    - packages/mapsforge_flutter/assets/patterns/deciduous.svg
  ...

初始化 mapsforge

加载包含 OpenStreetMap 数据的 .map 文件：

MapFile mapFile = await MapFile.from(filename, null, null);

或

MapFile mapFile = await MapFile.using(content, null, null);

注意：如果不再需要，调用 dispose() 方法销毁 mapFile。

创建符号缓存，用于存储小图标：

SymbolCache symbolCache = FileSymbolCache();

创建显示模型，定义和保存视图设置，如最大缩放级别：

DisplayModel displayModel = DisplayModel();

注意：为了获得更清晰的地图，可以将 deviceScaleFactor 设置为更高的值，例如 2。

创建渲染主题，指定如何渲染地图信息：

RenderTheme renderTheme = await
RenderThemeBuilder.create(displayModel, "assets/render_themes/defaultrender.xml");

创建渲染器：

JobRenderer jobRenderer = MapDataStoreRenderer(mapFile, renderTheme, symbolCache, true);

或者使用在线渲染器提供 OpenStreetMap 图片：

JobRenderer jobRenderer = MapOnlineRenderer();

可选地，创建一个位图缓存来存储地图瓦片。瓦片将在重启后继续存在，但可能会占用磁盘空间：

TileBitmapCache bitmapCache = await FileTileBitmapCache.create(jobRenderer.getRenderKey());

注意：如果不希望将瓦片存储在文件系统中，也可以使用 MemoryTileBitmapCache。

将所有组件组合在一起，形成两个模型：

MapModel mapModel = MapModel(
  displayModel: displayModel,
  renderer: jobRenderer,
  symbolCache: symbolCache,
  tileBitmapCache: bitmapCache,
);

ViewModel viewModel = ViewModel(displayModel: displayModel);

在 build() 方法中包含 MapView：

return FlutterMapView(mapModel: mapModel, viewModel: viewModel);

这样就完成了。

更改位置

可以通过调用 viewModel 来更改地图的位置：

viewModel.setMapViewPosition(48.0901926 , 16.308939);

类似的方法可用于缩放。

示例代码

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:mapsforge_example/map-list.dart';

/// 全局变量，包含一系列地图文件。
///
/// 数据可以是包含不同地点的文件，也可以是大型区域的一部分。
final List<MapFileData> MAP_FILE_DATA_LIST = [
  new MapFileData.online(
    displayedName: "Online Austria (支持网页)",
    initialPositionLat: 48.089415,
    initialPositionLong: 16.311374,
    initialZoomLevel: 12,
  ),
  new MapFileData.onlineSatellite(
    displayedName: "Online Austria 卫星视图 (支持网页)",
    initialPositionLat: 48.089415,
    initialPositionLong: 16.311374,
    initialZoomLevel: 12,
  ),
  const MapFileData(
    url: "https://dailyflightbuddy.com/mapsforge_examples/Chemnitz Uni.map",
    fileName: "Chemnitz Uni.map",
    displayedName: "Chemnitz - 大学 (室内)",
    initialPositionLat: 50.81348,
    initialPositionLong: 12.92936,
    initialZoomLevel: 18,
    indoorZoomOverlay: true,
    indoorLevels: {1: 'OG', 0: 'EG', -1: 'UG'},
  ),
  // 其他地图文件...
];

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

/// 应用程序的入口点。
class MyApp extends StatelessWidget {
  MyApp() {
    _initLogging();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mapsforge 示例应用',
      home: MapList(MAP_FILE_DATA_LIST),
    );
  }

  /// 设置日志记录器以记录调试消息。
  void _initLogging() {
    // 打印输出到控制台。
    Logger.root.onRecord.listen((LogRecord r) {
      print('${r.time}\t${r.loggerName}\t[${r.level.name}]:\t${r.message}');
    });

    // 日志记录器级别。
    Logger.root.level = Level.FINEST;
  }
}