Flutter地图渲染插件vtmap

Flutter地图渲染插件vtmap_gl的使用

项目简介

Flutter VTMaps GL 是一个社区驱动的项目，用于在Flutter应用中嵌入交互式和可定制的矢量地图。该项目支持VTMap-gl-native（用于Android和iOS）和VTMap-gl-js（用于Web）。请注意，此项目仅支持这些库API的一小部分。

安装示例应用

安装Flutter并验证安装：flutter doctor
克隆仓库：git clone git@github.com:tobrun/flutter-VTMap-gl.git
在example文件夹下添加VTMap访问令牌。
连接移动设备或启动模拟器、浏览器等。
使用flutter devices查找设备ID。
使用cd flutter_VTMap/example && flutter packages get && flutter run -d {device_id}运行应用。

添加VTMaps访问令牌

为了使用VTMaps矢量瓷砖，需要VTMaps账户和访问令牌。可以在VTMaps账户页面上获取免费访问令牌。

使用SDK

这个项目已发布到pub.dev，按照文档中的说明将包集成到您的Flutter应用中。对于平台特定的集成，请参考example文件夹下的flutter应用作为参考。

支持的API

特性	Android	iOS	Web
风格	✅	✅	✅
相机	✅	✅	✅
手势	✅	✅	✅
用户位置	✅	✅	✅
符号	✅	✅	✅
圆形	✅	✅	✅
线条	✅	✅	✅
填充	✅	✅

地图样式

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

传递地图样式的URL。可以是内置的地图样式，也可以是一个远程服务提供的URL（以’http(s)://'开头）。
传递本地资源。创建一个JSON文件在assets目录下，并在pubspec.yml中添加引用。将样式字符串设置为该资产的相对路径以便加载。
传递原始JSON地图样式。仅支持Android。

离线侧加载

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

按照指南创建您的瓷砖包。
将步骤一生成的tiles.db文件放入assets目录，并在pubspec.yml文件中添加引用。
```
assets:
  - assets/cache.db
```
在应用程序启动时调用installOfflineMapTiles方法将您的瓷砖复制到VTMap可以访问的位置。注意: 此方法应在复制文件之前调用，以防止冲突。

try {
  await installOfflineMapTiles(join("assets", "cache.db"));
} catch (err) {
  print(err);
}

用户位置功能

在Android应用中启用用户位置功能：

需要在AndroidManifest.xml中声明ACCESS_COARSE_LOCATION或ACCESS_FINE_LOCATION权限，并从Android API级别23开始在运行时请求权限。插件不处理此操作。示例应用使用flutter 'location'插件进行此操作。

在iOS应用中启用用户位置功能：

如果访问用户的当前位置，应向Info.plist添加以下键来解释为什么需要访问他们的位置数据：
```
<key>NSLocationWhenInUseUsageDescription</key>
<string>[Your explanation here]</string>
```
VTMap推荐解释为“显示您的位置并在地图上帮助改进地图”。

文档

此README文件目前包含了此Flutter项目的全部文档。请访问VTMap.com/android-docs了解关于VTMap Maps SDK for Android的更多信息，以及VTMap.com/ios-sdk了解关于VTMap Maps SDK for iOS的更多信息。

获取帮助

代码问题？ 查看带有#VTMap标签的问题——或者提问。
报告bug？ 打开问题。如果可能，请包括完整的日志和显示问题的信息。
有功能请求？ 打开问题。告诉我们功能应该做什么以及为什么需要这个功能。

贡献

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

示例代码

// Copyright 2 2  2  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/foundation.dart';
import 'package:flutter/material.dart';
import 'package:location/location.dart';
import 'package:mapbox_gl_example/full_map.dart';

import 'animate_camera.dart';
import 'full_map.dart';
import 'line.dart';
import 'map_ui.dart';
import 'move_camera.dart';
import 'page.dart';
import 'place_circle.dart';
import 'place_source.dart';
import 'place_symbol.dart';
import 'place_fill.dart';
import 'scrolling_map.dart';

final List&lt;ExamplePage&gt; _allPages = &lt;ExamplePage&gt;[
  MapUiPage(),
  FullMapPage(),
  AnimateCameraPage(),
  MoveCameraPage(),
  PlaceSymbolPage(),
  PlaceSourcePage(),
  LinePage(),
  PlaceCirclePage(),
  PlaceFillPage(),
  ScrollingingMapPage(),
];

class MapsDemo extends StatelessWidget {
  static const String ACCESS_TOKEN = "6ht5fdbc-1996-4f54-87gf-5664f304f3d2";
  void _pushPage(BuildContext context, ExamplePage page) async {
    if (!kIsWeb) {
      final location = Location();
      final hasPermissions = await location.hasPermission();
      if (hasPermissions != PermissionStatus.granted) {
        await location.requestPermission();
      }
    }
    Navigator.of(context).push(MaterialPageRoute&lt;void&gt;(
        builder: (_) =&gt; Scaffold(
              appBar: AppBar(title: Text(page.title)),
              body: page,
            )));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MapboxMaps examples')),
      body: ListView.builder(
        itemCount: _allPages.length,
        itemBuilder: (_, int index) =&gt; ListTile(
            leading: _allPages[index].leading,
            title: Text(_allPages[index].title),
            onTap: () =&gt; _pushPage(context, _allPages[index])),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MapsDemo()));
}

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

sinazl 1楼•11 天前

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

当然，关于Flutter中vtmap_gl插件的使用，下面是一个基本的代码示例，展示了如何在Flutter应用中集成和渲染一个地图。请注意，vtmap_gl是一个假设的插件名称，具体实现可能有所不同，但以下示例代码提供了一个常见的集成流程。如果你使用的插件名称或API有所不同，请参考官方文档进行调整。

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

dependencies:
  flutter:
    sdk: flutter
  vtmap_gl: ^x.y.z  # 替换为实际的版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用vtmap_gl插件来渲染地图：

导入必要的包：

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

创建地图控制器：

你可能需要创建一个地图控制器来管理地图的状态和交互。

class _MyHomePageState extends State<MyHomePage> {
  late VtMapController _mapController;

  @override
  void initState() {
    super.initState();
    // 初始化地图控制器（这里假设VtMapController是插件提供的控制器类）
    _mapController = VtMapController()
      ..onMapCreated = _onMapCreated;
  }

  void _onMapCreated(VtMap map) {
    // 地图创建后的回调，可以在这里设置初始视角等
    map.moveCamera(CameraUpdate.newLatLngZoom(LatLng(37.7749, -122.4194), 14));
  }

  @override
  void dispose() {
    _mapController.dispose();
    super.dispose();
  }

在Widget树中渲染地图：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('VtMap GL Example'),
    ),
    body: VtMapView(
      controller: _mapController,
      options: VtMapOptions(
        // 在这里设置地图的选项，如样式、初始视角等
        style: VtMapStyle.normal,
      ),
    ),
  );
}

完整的主函数和主页面类：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter VtMap GL Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

以上代码提供了一个基本的框架，展示了如何在Flutter应用中使用vtmap_gl插件来渲染地图。请注意，由于vtmap_gl是一个假设的插件名称，具体的类名和方法可能会有所不同。因此，强烈建议查阅该插件的官方文档以获取最准确和最新的使用指南。

此外，如果插件提供了额外的功能，如标记、多边形绘制、地理编码等，你可以参考官方文档来集成这些功能。通常，这些功能会作为地图控制器的方法或作为地图视图的额外属性提供。