flutter_map

leaflet 的 Flutter 实现。

flutter_map

观看视频 下载源码

用法

将 flutter_map 添加到您的 pubspec 中

dependencies:
  flutter_map: ^0.0.1

使用MapOptions和图层选项配置地图

  Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(51.5, -0.09),
        zoom: 13.0,
      ),
      layers: [
        new TileLayerOptions(
          urlTemplate: "https://api.tiles.mapbox.com/v4/"
              "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
          additionalOptions: {
            'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
            'id': 'mapbox.streets',
          },
        ),
        new MarkerLayerOptions(
          markers: [
            new Marker(
              width: 80.0,
              height: 80.0,
              point: new LatLng(51.5, -0.09),
              builder: (ctx) =>
              new Container(
                child: new FlutterLogo(),
              ),
            ),
          ],
        ),
      ],
    );
  }

请参阅flutter_map_example/文件夹中的工作示例应用程序。

Mapbox 图块

您可以使用来自多个
免费和付费地图供应商的地图图块,
或者您可以托管自己的地图图块。

该示例使用了OpenStreetMap图块，这些图块是免费的，但可能会比较慢。

使用TileLayerOptions配置其他图块提供商，例如mapbox

new TileLayerOptions(
  urlTemplate: "https://api.mapbox.com/v4/"
      "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
  additionalOptions: {
    'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
    'id': 'mapbox.streets',
  },
),

要使用，您需要一个mapbox密钥

  1. 创建一个mapbox账户以获取API密钥
  2. 打开leaflet_flutter_example/lib/main.dart并将API密钥粘贴到
    additionalOptions映射中。

离线地图

请遵循本指南获取离线图块

一旦您将地图导出为.mbtiles，您就可以使用mbtilesToPng将其解压为/{z}/{x}/{y}.png。将其移至Assets文件夹，并将Asset目录添加到pubspec.yaml。离线地图所需的最低字段是

new FlutterMap(
  options: new MapOptions(
    center: new LatLng(56.704173, 11.543808),
    minZoom: <offline map minimum zoom>,
    maxZoom: <offline map maximum zoom>,
    zoom: 13.0,
    swPanBoundary: LatLng(56.6877, 11.5089),
    nePanBoundary: LatLng(56.7378, 11.6644),
  ),
  layers: [
    new TileLayerOptions(
      offlineMode: true,
      maxZoom: <offline map maximum zoom>,
      urlTemplate: "assets/offlineMap/{z}/{x}/{y}.png",
    ),
  ],
),

确保PanBoundaries在离线地图边界内，以停止丢失资产错误。

请参阅flutter_map_example/文件夹中的工作示例。

特点

此包正在积极开发中。
以下路线图侧重于AppTree所需的各项功能。我们欢迎
任何对路线图内外各项功能的贡献。

  • [x] 内嵌地图
  • [x] 捏合缩放
  • [x] 拖动
  • [x] 标记
  • [ ] 打包结构清理
  • [ ] 改进捏合缩放（直接缩放到焦点）
  • [x] 缩放移除了其他级别的太多图块
  • [x] 改进图片获取和缓存
  • [x] UI设置支持（禁用平移/缩放等）
  • [ ] 当前位置支持
  • [ ] 文档
  • [ ] 折线
  • [x] 离线地图支持

GitHub

https://github.com/apptreesoftware/flutter_map