Flutter热力图展示插件 flutter_map_heatmap 的使用

flutter_map_heatmap 是一个用于在Flutter应用中显示热力图的简单插件，它基于 flutter_map 包构建。本文将介绍如何使用该插件，并提供完整的示例代码。

示例截图

使用步骤

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 flutter_map 和 flutter_map_heatmap 依赖：

dependencies:
  flutter_map: ^6.0.0
  flutter_map_heatmap: any # 或者最新的版本
  latlong2: ^0.9.0

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

2. 导入必要的包

在你的 Dart 文件中导入以下包：

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_heatmap/flutter_map_heatmap.dart';
import 'package:latlong2/latlong.dart';

3. 创建地图并添加热力图层

下面是一个完整的示例，展示了如何在地图上添加热力图层：

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_heatmap/flutter_map_heatmap.dart';
import 'package:latlong2/latlong.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Heatmap Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'flutter_map heat_map demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  StreamController<void> _rebuildStream = StreamController.broadcast();
  List<WeightedLatLng> data = [];
  List<Map<double, MaterialColor>> gradients = [
    HeatMapOptions.defaultGradient,
    {0.25: Colors.blue, 0.55: Colors.red, 0.85: Colors.pink, 1.0: Colors.purple}
  ];

  var index = 0;

  @override
  void initState() {
    _loadData();
    super.initState();
  }

  @override
  void dispose() {
    _rebuildStream.close();
    super.dispose();
  }

  Future<void> _loadData() async {
    String str = await rootBundle.loadString('assets/initial_data.json');
    List<dynamic> result = jsonDecode(str);

    setState(() {
      data = result
          .map((e) => e as List<dynamic>)
          .map((e) => WeightedLatLng(LatLng(e[0], e[1]), 1))
          .toList();
    });
  }

  void _incrementCounter() {
    setState(() {
      index = index == 0 ? 1 : 0;
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        _rebuildStream.add(null);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _rebuildStream.add(null);
    });

    final map = FlutterMap(
      options: MapOptions(
        backgroundColor: Colors.transparent,
        initialCenter: LatLng(57.8827, -6.0400),
        initialZoom: 8.0,
      ),
      children: [
        TileLayer(urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png"),
        if (data.isNotEmpty)
          HeatMapLayer(
            heatMapDataSource: InMemoryHeatMapDataSource(data: data),
            heatMapOptions: HeatMapOptions(
                gradient: this.gradients[this.index],
                minOpacity: 0.1),
            reset: _rebuildStream.stream,
          )
      ],
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      backgroundColor: Colors.pink,
      body: Center(
        child: Container(child: map),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Switch Gradient',
        child: Icon(Icons.add),
      ),
    );
  }
}

4. 数据加载

在这个示例中，我们从 assets/initial_data.json 文件中加载数据。确保你已经将该文件放在项目的 assets 目录下，并在 pubspec.yaml 中正确配置了资源路径：

flutter:
  assets:
    - assets/initial_data.json

initial_data.json 文件的内容示例如下：

[
  [57.8827, -6.0400],
  [57.8830, -6.0410],
  [57.8835, -6.0420]
]