Flutter地图高程展示插件map_elevation的使用

map_elevation 是一个用于在地图上显示路径（折线）高度信息的小部件。它允许您绘制高度图，并在悬停时发送通知。

特性

• 绘制高度图
• 悬停时发送包含悬停点的通知
• 可以添加颜色渐变以区分不同高度区间
• 可以在图表上方添加子组件

获取开始

以下是一个简单的示例，展示了如何使用 map_elevation 插件：

NotificationListener<ElevationHoverNotification>(
  onNotification: (ElevationHoverNotification notification) {
    setState(() {
      hoverPoint = notification.position;
    });

    return true;
  },
  child: Elevation(
    getElevationPoints(), // 获取高度点的函数
    color: Colors.grey, // 高度图的基本颜色
    elevationGradientColors: ElevationGradientColors(
      gt10: Colors.green, // 高于10米的颜色
      gt20: Colors.orangeAccent, // 高于20米的颜色
      gt30: Colors.redAccent, // 高于30米的颜色
    ),
  )
)

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 map_elevation 插件来显示高度图。

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

import 'data.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'map_elevation demo'),
    );
  }
}

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> {
  ElevationPoint hoverPoint;

  List<LatLng> getPoints() {
    // 返回一组测试点
    return [
      LatLng(45.10, 5.48),
      LatLng(45.11, 5.49),
      LatLng(45.12, 5.50),
      // 更多点...
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          FlutterMap(
            options: new MapOptions(
              center: LatLng(45.10, 5.48),
              zoom: 11.0,
            ),
            layers: [
              TileLayerOptions(
                urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c'],
              ),
              PolylineLayerOptions(
                polylines: [
                  Polyline(
                    points: getPoints(),
                    color: Colors.red,
                    strokeWidth: 3.0,
                  ),
                ],
              ),
              MarkerLayerOptions(markers: [
                if (hoverPoint is LatLng)
                  Marker(
                    point: hoverPoint,
                    width: 8,
                    height: 8,
                    builder: (BuildContext context) => Container(
                      decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                  )
              ]),
            ],
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: 120,
            child: Container(
              color: Colors.white.withOpacity(0.6),
              child: NotificationListener<ElevationHoverNotification>(
                onNotification: (ElevationHoverNotification notification) {
                  setState(() {
                    hoverPoint = notification.position;
                  });

                  return true;
                },
                child: Elevation(
                  getPoints(),
                  color: Colors.grey,
                  elevationGradientColors: ElevationGradientColors(
                    gt10: Colors.green,
                    gt20: Colors.orangeAccent,
                    gt30: Colors.redAccent,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}