Flutter地图展示插件mapsm_lv的使用

Flutter地图展示插件mapsm_lv的使用

引言

此Flutter插件允许在Flutter小部件中嵌入交互式且可自定义的矢量地图。对于Android和iOS集成，我们使用了mapbox-gl-native。对于Web，我们依赖于mapbox-gl-js。此项目仅支持这些库所暴露API的一个子集。

![screenshot.png]

设置

该包可以在pub.dev上找到。

通过运行以下命令获取它：

flutter pub add mapsm_lv

移动端

秘密Mapbox访问令牌

一个具有Downloads: Read范围的秘密访问令牌是必要的，以便底层Mapbox SDK能够下载。 有关设置的信息，请参阅Mapbox文档：

如果没有正确配置的令牌存在，则构建过程会失败，并出现以下错误（分别针对Android和iOS）：

* What went wrong:
A problem occurred evaluating project ':mapsm_lv'.
> SDK Registry token is null. See README.md for more information.

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

Web

在<head>标签中包含JavaScript和CSS文件到您的index.html文件中：

<script src='https://api.mapsm.net/files/sdk/v34/smmapv35.js'></script>
<link href='https://api.mapsm.net/files/sdk/v34/smmapv34.css' rel='stylesheet' />

注意：请在Mapbox GL JS文档中查找最新版本。

所有平台

公共Mapbox访问令牌

一个公共访问令牌必须提供给MapboxMap小部件以检索样式和资源。虽然可以直接将其硬编码到源文件中，但建议从外部来源（例如配置文件或环境变量）获取访问令牌。示例应用程序使用以下技术：

通过命令行参数传递访问令牌，当构建时：

flutter build &lt;platform&gt; --dart-define ACCESS_TOKEN=YOUR_TOKEN_HERE

或者运行应用程序时：

flutter run --dart-define ACCESS_TOKEN=YOUR_TOKEN_HERE

然后在Dart中检索它：

MapboxMap(
  ...
  accessToken: const String.fromEnvironment("ACCESS_TOKEN"),
  ...
)

支持的API

功能 Android iOS Web
样式 ✅ ✅ ✅
摄像机 ✅ ✅ ✅
手势 ✅ ✅ ✅
用户位置 ✅ ✅ ✅
样式DSL ❌ ❌ ❌
栅格图层 ✅ ✅ ✅
符号图层 ✅ ✅ ✅
圆形图层 ✅ ✅ ✅
线图层 ✅ ✅ ✅
填充图层 ✅ ✅ ✅
高光图层 ✅ ✅ ✅
热图图层 ❌ ❌ ❌
向量源 ✅ ✅ ✅
栅格源 ✅ ✅ ✅
GeoJSON源 ✅ ✅ ✅
图像源 ✅ ✅ ✅
表达式 ✅ ✅ ✅
符号注释 ✅ ✅ ✅
圆形注释 ✅ ✅ ✅
线注释 ✅ ✅ ✅
填充注释 ✅ ✅ ✅

地图样式

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

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

离线侧加载

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

  1. 按照这里提供的指南创建您的瓦片包。
  2. 将第一步生成的tiles.db文件放在您的assets目录中，并在pubspec.yml文件中添加对其的引用。
   assets:
     - assets/cache.db
  1. 在应用程序启动时调用installOfflineMapTiles以将您的瓦片复制到Mapbox可以访问的位置。注意：此方法应在Map小部件加载之前调用，以防止在复制文件时发生冲突。
try {
  await installOfflineMapTiles(join("assets", "cache.db"));
} catch (err) {
  print(err);
}

下载离线区域

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

  1. 注意选择较大的区域，因为大小可能显著。可以使用在线估算器https://docs.mapbox.com/playground/offline-estimator/。
  2. 使用预定义的OfflineRegion调用downloadOfflineRegionStream，并在回调函数中可选地跟踪进度。
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

在AndroidManifest.xml中添加<uses-permission>以启用定位功能：

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

从Android API级别23开始，还需要在运行时请求权限。此插件不会为您处理此问题。示例应用程序使用了flutter的location插件来实现这一点。

iOS

在Info.plist中添加以下键以解释为什么需要访问用户的位置数据：

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

推荐的解释是：“在地图上显示您的位置并帮助改进地图。”

运行示例代码

请参考文档了解如何运行示例代码。

贡献

我们欢迎对本仓库的贡献！如果您有兴趣帮助构建此Mapbox-Flutter集成，请阅读贡献指南以了解如何开始。

示例代码

以下是完整的示例代码，展示了如何使用mapsm_lv插件在Flutter中展示地图。

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:mapsm_lv/mapsm/map/pages/map_page.dart';
import 'package:mapsm_lv/mapsm/util/bloc_observer.dart';
import 'package:http/http.dart' as http;
import 'package:mapsm_lv_platform_interface/mapsm_lv_platform_interface.dart';

void main() async {
  BlocOverrides.runZoned(
    () => runApp(const MapsDemo()),
    blocObserver: AppBlocObserver(),
  );
}

const MaterialColor primaryColorShades = MaterialColor(
  0xFF181861,
  <int, Color>{
    50: Color(0xFFA4A4BF),
    100: Color(0xFFA4A4BF),
    200: Color(0xFFA4A4BF),
    300: Color(0xFF9191B3),
    400: Color(0xFF7F7FA6),
    500: Color(0xFF181861),
    600: Color(0xFF6D6D99),
    700: Color(0xFF5B5B8D),
    800: Color(0xFF494980),
    900: Color(0xFF181861),
  },
);

class MapsDemo extends StatelessWidget {
  static const String ACCESS_TOKEN = String.fromEnvironment("ACCESS_TOKEN");

  const MapsDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    List<LatLng> rPoints = [];
    rPoints.add(LatLng(21.0085698, 105.7300834));
    rPoints.add(LatLng(21.007515599999998, 105.8075224));
    rPoints.add(LatLng(21.0008976, 105.80317009999999));

    return MaterialApp(
      title: 'MB SmartMap',
      theme: ThemeData(
        primarySwatch: primaryColorShades,
      ),
      home: MapPage(
        rPoints: rPoints,
      ),
    );
  }
}

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

1 回复

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


mapsm_lv 是 Flutter 中的一个地图展示插件，它允许开发者在应用中集成地图功能。以下是如何使用 mapsm_lv 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 mapsm_lv 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  mapsm_lv: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 mapsm_lv 插件。

import 'package:mapsm_lv/mapsm_lv.dart';

3. 使用地图组件

在你的 Flutter 应用中使用 MapSmLv 组件来展示地图。

class MapScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Example'),
      ),
      body: MapSmLv(
        initialCameraPosition: CameraPosition(
          target: LatLng(37.7749, -122.4194), // 初始位置，例如旧金山
          zoom: 12.0, // 初始缩放级别
        ),
        onMapCreated: (controller) {
          // 地图创建后的回调
          // 你可以保存 controller 以便后续操作
        },
      ),
    );
  }
}

4. 运行应用

现在你可以运行你的 Flutter 应用，并在应用中看到地图展示。

5. 其他功能

mapsm_lv 插件可能还提供了其他功能，例如添加标记、绘制路线、监听地图事件等。你可以参考插件的官方文档来了解更多详细用法。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 mapsm_lv 插件：

import 'package:flutter/material.dart';
import 'package:mapsm_lv/mapsm_lv.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Example'),
      ),
      body: MapSmLv(
        initialCameraPosition: CameraPosition(
          target: LatLng(37.7749, -122.4194), // 初始位置，例如旧金山
          zoom: 12.0, // 初始缩放级别
        ),
        onMapCreated: (controller) {
          // 地图创建后的回调
          // 你可以保存 controller 以便后续操作
        },
      ),
    );
  }
}
回到顶部