Flutter地图动画标记插件flutter_mapbox_animarker的使用

Flutter地图动画标记插件flutter_mapbox_animarker的使用

介绍

此插件允许在Mapbox地图上平滑地动画化标记。通过动态添加和移动标记，可以基于实时位置来实现这些动画。

特性

• 动态向地图上添加标记。
• 在不同位置之间平滑地动画化标记。
• 支持位置和旋转动画曲线。
• 可自定义标记属性，如大小、不透明度和旋转。
• 轻松从地图上移除标记。

注意事项

该插件仅负责标记变化的动画。Mapbox的配置不在该插件的范围内。因此，在尝试使用该插件之前，请确保已正确配置您的Mapbox地图，并且了解如何向地图添加标记。

安装

要使用此插件，请将以下依赖项添加到您的pubspec.yaml文件中：

dependencies:
  flutter_mapbox_animarker: ^0.0.9
  # 其他依赖项

添加标记

您可以动态添加一个或多个标记，并传递标记的运动数据，如下所示：

final markerAnimator = MarkerAnimator(mapboxMap);
markerAnimator.addMarkerPoint(
  'markerId123',
  'assets/marker_icon.png',  // 标记图像路径
  [
    {'position': [longitude, latitude], 'rotation': 0},
    {'position': [longitude2, latitude2], 'rotation': 30},
    // 根据需要添加更多位置
  ],
  interval: 0.05,  // 可选：动画帧之间的间隔
  properties: {
    "icon-opacity": 0.9,
    "icon-size": 1.2,
  }
);

移除标记

要从地图上移除标记：

await markerAnimator.removeMarker();

自定义标记属性

您可以为标记传递自定义属性：

Map<String, dynamic> customProperties = {
  "icon-opacity": 0.8,
  "icon-size": 1.5,
  "icon-anchor": "center",
  'icon-allow-overlap': true,
};

markerAnimator.addMarkerPoint(
  'markerId456',
  'assets/another_marker_icon.png',
  data,  // 标记运动数据
  properties: customProperties,
);

标记样式属性

属性应遵循Mapbox Style Specification中的符号层规范。这些属性允许您控制图标大小、不透明度、旋转、锚点位置等。

注意事项

• 标记运动数据应包括位置和旋转列表。
• 动画间隔控制标记过渡的速度。较小的间隔会产生更平滑的动画。
• 确保正确处理Mapbox API密钥和地图初始化。

完整示例代码

以下是完整的示例代码，演示如何使用flutter_mapbox_animarker插件：

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_mapbox_animarker/flutter_mapbox_animarker.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Mapbox Animarker Example')),
        body: MapboxExample(),
      ),
    );
  }
}

class MapboxExample extends StatefulWidget {
  [@override](/user/override)
  _MapboxExampleState createState() => _MapboxExampleState();
}

class _MapboxExampleState extends State<MapboxExample> {
  final MarkerAnimator markerAnimator = MarkerAnimator(MapboxMap());

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化时添加标记
    addMarkers();
  }

  void addMarkers() {
    // 添加第一个标记
    markerAnimator.addMarkerPoint(
      'markerId123',
      'assets/marker_icon.png',  // 标记图像路径
      [
        {'position': [116.4074, 39.9042], 'rotation': 0}, // 北京
        {'position': [121.4737, 31.2304], 'rotation': 30}, // 上海
      ],
      interval: 0.05,  // 可选：动画帧之间的间隔
      properties: {
        "icon-opacity": 0.9,
        "icon-size": 1.2,
      }
    );

    // 添加第二个标记
    Map<String, dynamic> customProperties = {
      "icon-opacity": 0.8,
      "icon-size": 1.5,
      "icon-anchor": "center",
      'icon-allow-overlap': true,
    };

    markerAnimator.addMarkerPoint(
      'markerId456',
      'assets/another_marker_icon.png',
      [
        {'position': [106.5915, 29.5629], 'rotation': 0}, // 重庆
        {'position': [108.9548, 34.2633], 'rotation': 30}, // 西安
      ],
      properties: customProperties,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(39.9042, 116.4074), // 初始中心点
        zoom: 4.0,
      ),
      layers: [
        TileLayerOptions(
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c'],
        ),
        MarkerLayerOptions(
          markers: [],
        ),
      ],
    );
  }
}