Flutter地图展示插件simple_map的使用

Flutter 地图展示插件 simple_map 的使用

simple_map 是一个 Flutter 插件，可以显示一个简单的平面世界地图，并且支持带有动画效果的点。它可以用于实时展示在线用户、设备等。

开始使用

1. 在 pubspec.yaml 文件中添加依赖：

   dependencies:
     simple_map: ^1.0.0
   

2. 运行命令获取包：

   flutter packages get
   

3. 导入库文件：

   import 'package:simple_map/simple_map.dart';
   

特性

• 高性能，即使处理大量数据
• 渲染简单的自定义平面地图
• 渲染带动画效果的点
• 自定义每个点
• 创建带有 TTL（生存时间）的点
• 自定义点动画
• 支持标记
• 支持缩放和移动动画

使用方法

使用 SimpleMapOptions

final mapOptions = SimpleMapOptions(
    // 自定义地图图标和投影
    // mapIcon: IconData(0xe900, fontFamily: 'MapIcons'),
    // projection: ...
  
    mapColor: Colors.grey,
    bgColor: Colors.black,
    // 默认点颜色
    pointColor: Colors.blue,
    
    interactive: true,
    
    // 3D 效果
    withShadow: true,
    shadowOffset = const Offset(0.0, 0.5),
);

使用 SimpleMapController

final SimpleMapController mapController = SimpleMapController();

// 添加单个点。
mapController.addPoint(SimpleMapPoint());

// 添加点列表
mapController.points = [SimpleMapPoint()];

// 清除地图
mapController.clear();

SimpleMap(
  controller: mapController,
  options: mapOptions,
),

简单地图示例

SimpleMap(
  controller: SimpleMapController(points: [
    SimpleMapPoint(
      lat: 0.0,
      lng: 0.0,
      color: Colors.blue,
      ttl: Duration(seconds: 100),
    )
  ]),
  options: mapOptions,
),

完整示例

以下是一个完整的示例代码，展示了如何使用 simple_map 插件来创建一个具有实时数据更新功能的地图应用：

import 'dart:convert';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';
import 'package:simple_map/simple_map.dart';
import 'package:wakelock/wakelock.dart';

void main() {
  runApp(MyApp());
  Wakelock.enable();
}

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  static Random random = Random();

  SimpleMapOptions _mapOptions;
  SimpleMapController _mapController;

  Ticker _ticker;

  List<dynamic> _points = [];

  [@override](/user/override)
  void initState() {
    _mapOptions = SimpleMapOptions(
      pointColor: Colors.blue,
    );
    _mapController = SimpleMapController();
    initRealtimeTicker();

    loadPoints().then((points) {
      _points = points;
      generateRandomPoints(1000);
    });

    super.initState();
  }

  void initRealtimeTicker() {
    _ticker = createTicker((elapsed) {
      final sec = elapsed.inSeconds;
      if (sec > 3) {
        final randMod = random.nextInt(100);
        if (randMod == 0) return;
        if (sec % randMod == 0) {
          final points = generatePoints(
            random.nextInt(3),
            color: Colors.primaries[random.nextInt(Colors.primaries.length)],
          );
          if (points.length > 0) {
            debugPrint('Point {ttl: ${points.first.ttl}}');
            _mapController.points = points;
          }
        }
      }
    });
  }

  Future<List> loadPoints() async {
    String points = await rootBundle.loadString('assets/points.json');
    return json.decode(points);
  }

  [@override](/user/override)
  void dispose() {
    _ticker?.dispose();
    super.dispose();
  }

  void generateRandomPoints(int num) {
    assert(_mapController != null);
    final List<SimpleMapPoint> points = generatePoints(random.nextInt(num));

    _mapController.points = points;
  }

  List<SimpleMapPoint> generatePoints(
    int num, {
    int maxTTL = 120,
    Color color = Colors.blue,
  }) {
    if (num <= 0 || _points.length == 0) {
      return [];
    }
    return List.generate(num, (index) {
      var p = _points[random.nextInt(_points.length)];
      return SimpleMapPoint(
        lat: double.tryParse(p[0]),
        lng: double.tryParse(p[1]),
        color: color,
        ttl: Duration(seconds: random.nextInt(maxTTL) + 5),
        animator: random.nextInt(3) == 1 ? RayMapPointAnimator() : null,
      );
    });
  }

  bool liveEnabled = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Map Demo'),
      ),
      backgroundColor: Color(0xffff9f9f9),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: SimpleMap(
                controller: _mapController,
                options: _mapOptions,
              ),
            ),
          ],
        ),
      ),
      persistentFooterButtons: <Widget>[
        Text("实时数据"),
        Switch(
          value: liveEnabled,
          onChanged: (value) {
            if (value) {
              _ticker.start();
            } else {
              _ticker.stop();
            }
            setState(() {
              liveEnabled = value;
            });
          },
        ),
      ],
      floatingActionButton: Wrap(
        spacing: 10,
        children: [
          FloatingActionButton(
            onPressed: () {
              generateRandomPoints(random.nextInt(10) + 1);
            },
            tooltip: '添加随机点',
            child: Icon(Icons.add_circle),
          ),
          FloatingActionButton(
            onPressed: () {
              _mapController.flyTo(0, 0, zoom: 5.0);
            },
            tooltip: '放大',
            child: Icon(Icons.zoom_in),
          ),
          FloatingActionButton(
            onPressed: () {
              final point = generatePoints(1)[0];
              _mapController.addMarker(
                SimpleMapMarker(
                  lat: point.lat,
                  lng: point.lng,
                  color: Colors.primaries[random.nextInt(Colors.primaries.length)],
                  image: NetworkImage(
                    'https://avatars.githubusercontent.com/u/1963342?s=50',
                    // 'https://avatars.githubusercontent.com/u/14101776?s=50',
                  ),
                ),
              );
            },
            tooltip: '添加标记',
            child: Icon(Icons.add_card),
            backgroundColor: Colors.deepOrangeAccent,
          ),
        ],
      ),
    );
  }
}