Flutter跟踪与分析插件trackasia_gl_dart的使用

Flutter跟踪与分析插件trackasia_gl_dart的使用

库用于从Dart中使用Trackasia GL JS。

该库是从@andrea689的mapbox-gl-dart项目分叉出来的，并且稍作修改以适应Trackasia的使用。

感谢您的伟大工作@andrea689！

使用此插件

要在你的.html文件中使用此插件，你必须包含Trackasia GL JS。

<script src="https://cdn.maptiler.com/maplibre-gl-js/v2.2.0-pre.2/maplibre-gl.js"></script>
<link href="https://cdn.maptiler.com/maplibre-gl-js/v2.2.0-pre.2/maplibre-gl.css" rel="stylesheet" />

运行示例

pub global activate webdev
webdev serve example:8081

在浏览器中打开localhost:8081。

示例代码

以下是使用trackasia_gl_dart的一个完整示例：

import 'dart:convert';
import 'dart:html';

void main() {
  makeRequest();
}

// 发起HTTP请求获取示例数据
Future<void> makeRequest() async {
  const path = 'examples.json'; // 示例数据的路径
  final httpRequest = HttpRequest(); // 创建HttpRequest对象
  httpRequest
    ..open('GET', path) // 设置请求类型和路径
    ..onLoadEnd.listen((e) => requestComplete(httpRequest)) // 请求完成时调用回调函数
    ..send(''); // 发送请求
}

// 请求完成后的处理函数
void requestComplete(HttpRequest request) {
  DivElement examples = querySelector('#examples') as DivElement; // 获取HTML元素
  switch (request.status) { // 检查请求状态
    case 200: // 成功
      for (var obj in json.decode(request.responseText!)) { // 解析返回的数据
        AnchorElement link = AnchorElement(href: '${obj['folder']}/index.html'); // 创建链接
        link.text = obj['title']; // 设置链接文本
        link.className = 'list-group-item list-group-item-action'; // 设置样式类
        examples.children.add(link); // 添加到DOM
      }
      removeSpinner(); // 移除加载动画
      return;
    default: // 失败
      final error = DivElement()
        ..text = 'Request failed, status=${request.status}' // 设置错误信息
        ..className = 'alert alert-danger'; // 设置样式类
      examples.children.add(error); // 添加到DOM
      removeSpinner(); // 移除加载动画
  }
}

// 移除加载动画
void removeSpinner() {
  DivElement spinner = querySelector('#spinner') as DivElement; // 获取加载动画元素
  spinner.remove(); // 从DOM移除
}

更多关于Flutter跟踪与分析插件trackasia_gl_dart的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter跟踪与分析插件trackasia_gl_dart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


trackasia_gl_dart 是 Flutter 的一个插件，用于在 Flutter 应用中集成 Mapbox 地图和地理空间数据可视化。它基于 Mapbox GL JS 和 Mapbox GL Native，并提供了丰富的功能和灵活的 API，用于地图显示、交互、数据可视化等。

1. 安装插件

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

dependencies:
  flutter:
    sdk: flutter
  trackasia_gl_dart: ^0.0.1 # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 获取 Mapbox Access Token

在使用 trackasia_gl_dart 之前，你需要一个 Mapbox Access Token。你可以在 Mapbox 官网 注册并获取 Access Token。

3. 配置 Access Token

在你的 Flutter 项目中，你需要在 main.dart 文件中配置 Mapbox Access Token：

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

void main() {
  TrackasiaGL.setAccessToken("YOUR_MAPBOX_ACCESS_TOKEN");
  runApp(MyApp());
}

4. 使用 TrackasiaMap

你可以在应用的任何地方使用 TrackasiaMap 组件来显示地图。以下是一个简单的例子：

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

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Trackasia GL Dart Map'),
      ),
      body: TrackasiaMap(
        options: TrackasiaMapOptions(
          styleUrl: "mapbox://styles/mapbox/streets-v11",
          center: LatLng(37.7749, -122.4194), // San Francisco
          zoom: 12.0,
        ),
      ),
    );
  }
}

5. 添加标记和图层

你可以在地图上添加标记、图层等元素。以下是一个添加标记的示例：

TrackasiaMap(
  options: TrackasiaMapOptions(
    styleUrl: "mapbox://styles/mapbox/streets-v11",
    center: LatLng(37.7749, -122.4194),
    zoom: 12.0,
  ),
  onMapCreated: (controller) {
    controller.addSymbol(
      SymbolOptions(
        geometry: LatLng(37.7749, -122.4194),
        iconImage: 'marker-icon.png',
        textField: 'San Francisco',
        textOffset: Offset(0, -2),
      ),
    );
  },
);

6. 处理地图事件

你可以监听地图的各种事件，例如点击、拖动等。以下是一个处理地图点击事件的示例：

TrackasiaMap(
  options: TrackasiaMapOptions(
    styleUrl: "mapbox://styles/mapbox/streets-v11",
    center: LatLng(37.7749, -122.4194),
    zoom: 12.0,
  ),
  onMapClick: (point, latLng) {
    print("Map clicked at: $latLng");
  },
);

7. 自定义地图样式

你可以使用 Mapbox Studio 创建自定义地图样式，并将其 URL 传递给 styleUrl 参数：

TrackasiaMap(
  options: TrackasiaMapOptions(
    styleUrl: "mapbox://styles/your-username/your-style-id",
    center: LatLng(37.7749, -122.4194),
    zoom: 12.0,
  ),
);

8. 使用矢量图层和栅格图层

trackasia_gl_dart 支持添加矢量图层和栅格图层。以下是一个添加矢量图层的示例：

controller.addLayer(
  LineLayerProperties(
    id: 'route',
    sourceId: 'route-source',
    layout: LineLayoutProperties(
      lineCap: 'round',
      lineJoin: 'round',
    ),
    paint: LinePaintProperties(
      lineColor: '#FF0000',
      lineWidth: 3.0,
    ),
  ),
);

9. 使用 GeoJSON 数据

你可以在地图上显示 GeoJSON 数据。以下是一个加载 GeoJSON 数据的示例：

controller.addGeoJsonSource(
  'route-source',
  'https://example.com/your-data.geojson',
);
回到顶部