Mapbox Flutter

该项目受到Mapbox_gl的启发

该项目还集成了Null_Safety

我们欢迎反馈和贡献。

mapbox

运行示例应用

  • 安装 Flutter 并使用 flutter doctor 验证安装情况
  • 克隆仓库 git clone [email protected]:BorisGautier/mapbox_flutter.git
  • 在示例应用中添加公开的Mapbox访问令牌（请参阅下一节）
  • 为下载SDK添加秘密Mapbox访问令牌
  • 连接移动设备或启动模拟器、仿真器或Chrome浏览器
  • 使用 flutter devices 查找设备ID
  • 使用 cd mapbox_flutter/example && flutter packages get && flutter run -d {device_id} 运行应用

添加Mapbox访问令牌

此项目使用Mapbox矢量瓦片，需要Mapbox账户和Mapbox访问令牌。请在您的Mapbox账户页面上获取免费访问令牌。

即使您不使用Mapbox矢量瓦片，而是使用其他来源（如自托管瓦片）的矢量瓦片，您仍然需要像下面那样指定任何非空字符串作为访问令牌！

提供访问令牌的推荐方法是通过MapboxFlutterMap构造函数的accessToken参数。请注意，您应该始终在应用程序中使用相同的令牌。

添加Mapbox访问令牌

此项目使用Mapbox矢量瓦片，需要Mapbox账户和Mapbox访问令牌。请在您的Mapbox账户页面上获取免费访问令牌。

即使您不使用Mapbox矢量瓦片，而是使用其他来源（如自托管瓦片）的矢量瓦片，您仍然需要像下面那样指定任何非空字符串作为访问令牌！

在Flutter中提供您的访问令牌（推荐）

提供访问令牌的推荐方法是通过MapboxFlutterMap构造函数的accessToken参数。请注意，您应该始终在整个应用程序中使用相同的令牌。

通过特定平台文件设置您的访问令牌（旧方法）

对于早期版本，您需要按照下面的说明通过特定平台文件设置您的访问令牌。对于v0.8版本，这也将继续作为备用方案。您不应该同时通过构造函数参数和特定平台文件来设置访问令牌！

Android

在应用程序清单 example/android/app/src/main/AndroidManifest.xml 中添加Mapbox访问令牌配置

<manifest ...
  <application ...
    <meta-data android:name="com.mapbox.token" android:value="YOUR_TOKEN_HERE" />

iOS

将Mapbox访问令牌配置添加到应用程序的Info.plist example/ios/Runner/Info.plist

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>MGLMapboxAccessToken</key>
<string>YOUR_TOKEN_HERE</string>

Web

将Mapbox访问令牌配置添加到index.html example/web/index.html

<body>
  ...
  <script>
    mapboxgl.accessToken = 'YOUR_TOKEN_HERE';
  </script>
</body>

SDK下载令牌

您还必须[配置一个具有下载：读取
范围的秘密访问令牌][https://docs.mapbox.com/ios/maps/guides/install/]。如果此配置
不存在，iOS构建过程中会出现类似如下的错误。

[!] Error installing Mapbox-iOS-SDK
curl: (22) The requested URL returned error: 401 Unauthorized

避免Android UnsatisfiedLinkError

更新 android\app\build.gradle 中的buildTypes

buildTypes {
    release {
        // other configs
        ndk {
            abiFilters 'armeabi-v7a','arm64-v8a','x86_64', 'x86'
        }
    }
}

在您的项目中 Yaobang SDK

此项目可在 pub.dev 上找到，请按照 说明 将包集成到您的Flutter应用程序中。对于特定平台的集成，请参考示例文件夹下的Flutter应用程序。

支持的API

功能 Android iOS Web
风格 :white_check_mark :white_check_mark :white_check_mark
相机 :white_check_mark :white_check_mark :white_check_mark
手势 :white_check_mark :white_check_mark :white_check_mark
用户位置 :white_check_mark :white_check_mark :white_check_mark
符号 :white_check_mark :white_check_mark :white_check_mark
圆形 :white_check_mark :white_check_mark :white_check_mark
线 :white_check_mark :white_check_mark :white_check_mark
填充 :white_check_mark :white_check_mark :white_check_mark

地图样式

可以通过在 MapOptions 中设置 styleString 来提供地图样式。支持以下格式

  1. 传递地图样式的URL。这可以是内置地图样式之一（也请参阅 MapboxStyles），或者通过以'http(s)://'或'mapbox://'开头的URL远程提供的自定义地图样式。
  2. 将样式作为本地资源传递。在 assets 中创建一个JSON文件，并在 pubspec.yml 中添加引用。将样式字符串设置为该资源的相对路径，以便将其加载到地图中。
  3. 将样式作为本地文件传递。在应用程序目录（例如ApplicationDocumentsDirectory）中创建一个JSON文件。将样式字符串设置为该JSON文件的绝对路径。
  4. 传递地图样式的原始JSON。这仅在Android上受支持。

离线旁加载

通过“旁加载”所需的地图瓦片并将其包含在 assets 文件夹中，可以支持离线地图。

  • 请按照 此处 提供的指南创建您的瓦片包。

  • 将第一步生成的tiles.db文件放在您的assets目录中，并在 pubspec.yml 文件中为其添加引用。

   assets:
     - assets/cache.db
  • 在应用程序启动时调用 installOfflineMapTiles 将您的瓦片复制到Mapbox可以访问的位置。注意：此方法应在加载Map Widget之前调用，以防止在将文件复制到位时发生冲突。
    try {
      await installOfflineMapTiles(join("assets", "cache.db"));
    } catch (err) {
      print(err);
    }

下载离线区域

离线区域是地图的一个定义区域，可在网络连接受限或无网络连接的条件下使用。所选区域、样式和精度的瓦片将通过适当的SDK方法从Mapbox下载并存储在应用程序的缓存中。

    final Function(DownloadRegionStatus event) onEvent = (DownloadRegionStatus status) {
      if (status.runtimeType == Success) {
        // ...
      } else if (status.runtimeType == InProgress) {
        int progress = (status as InProgress).progress.round();
        // ...
      } else if (status.runtimeType == Error) {
        // ...
      }
    };

    final OfflineRegion offlineRegion = OfflineRegion(
      bounds: LatLngBounds(
        northeast: LatLng(52.5050648, 13.3915634),
        southwest: LatLng(52.4943073, 13.4055383),
      ),
      id: 1,
      minZoom: 6,
      maxZoom: 18,
      mapStyleUrl: 'mapbox://styles/mapbox/streets-v11',
    );

    downloadOfflineRegionStream(offlineRegion, onEvent);

位置功能

Android

在应用程序清单 android/app/src/main/AndroidManifest.xml 中添加 ACCESS_COARSE_LOCATION 或 ACCESS_FINE_LOCATION 权限，以在Android应用程序中启用位置功能

<manifest ...
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

从Android API级别23开始，您还需要在运行时请求它。此插件不会为您处理此问题。示例应用程序使用Flutter的'location' 插件来实现此目的。

iOS

要在iOS应用程序中启用位置功能

如果您访问用户的位置，您还应该将以下键添加到 ios/Runner/Info.plist 中，以解释为什么您需要访问他们的位置数据

xml ...
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>[Your explanation here]</string>

Mapbox 建议的说明是“在地图上显示您的位置并帮助改进地图”。

贡献

  • 就拟议的更改开放一个issue。
  • 仓库所有者将在那里与您联系。
  • 如果您的提议获得批准，请Fork此仓库并进行更改。
  • 针对最新的 dev 分支打开PR。在PR中添加详细描述。
  • 您已完成！

GitHub

https://github.com/BorisGautier/mapbox_flutter