Flutter地理坐标网格绘制插件lat_lon_grid_plugin的使用

lat_lon_grid_plugin

lat_lon_grid_plugin 是一个为 flutter_map 添加经纬度网格的插件。

支持的 flutter_map 版本：

• 支持 flutter_map 版本 3.0.0（2022年10月测试）。
• 支持 flutter_map 版本 3.1.0 和 4.0.0（2023年5月测试）。
• 支持 flutter_map 版本 5.0.0（2023年6月测试）。

开始使用

示例应用位于 /example/ 目录下：

使用方法

首先，在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter_map: any
  lat_lon_grid_plugin: any

然后在你的代码中使用 FlutterMap 并添加 LatLonGridLayer 插件：

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

void main() => runApp(MyApp());

/// 示例应用程序
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lat lon grid example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

/// 显示插件使用的主页
class HomePage extends StatefulWidget {
  /// 主页构造函数
  HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  MapController? _mapController;
  String _sLatLonZoom = '';

  void _resetRotation() {
    _mapController!.rotate(0);
    setState(_updateLabel);
  }

  void _updateLabel() {
    if (_mapController != null) {
      String lat = _mapController!.center.latitude.toStringAsFixed(3);
      String lon = _mapController!.center.longitude.toStringAsFixed(3);
      String zoom = _mapController!.zoom.toStringAsFixed(2);
      String rotation = _mapController!.rotation.toStringAsFixed(2);

      // 在构建时不要触发重建
      if (_sLatLonZoom == '') {
        _sLatLonZoom = 'lat: $lat lon: $lon\nzoom: $zoom rotation: $rotation';
      } else {
        setState(() {
          _sLatLonZoom = 'lat: $lat lon: $lon\nzoom: $zoom rotation: $rotation';
        });
      }
    }
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    _mapController = MapController();
    // 解决方案来自：https://stackoverflow.com/questions/49466556/flutter-run-method-on-widget-build-complete
    WidgetsBinding.instance.addPostFrameCallback((_) => _updateLabel());
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
        actions: <Widget>[
          SizedBox(
            height: 50.0,
            width: 250.0,
            child: Container(
              height: 80.0,
              color: Colors.blue,
              child: Column(
                children: <Widget>[
                  Text(
                    _sLatLonZoom,
                    style: TextStyle(color: Colors.white, fontSize: 17.0),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
      body: Stack(
        children: <Widget>[
          FlutterMap(
            mapController: _mapController,
            options: MapOptions(
              center: LatLng(51.814, -2.170),
              zoom: 6.15,
              rotation: 0.0,
              onPositionChanged: (position, hasGesture) => _updateLabel(),
            ),
            children: [
              TileLayer(
                urlTemplate:
                    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c'],
              ),
              LatLonGridLayer(
                options: LatLonGridLayerOptions(
                  lineWidth: 0.5,
                  // 应用透明度到网格线
                  lineColor: Color.fromARGB(100, 0, 0, 0),
                  labelStyle: TextStyle(
                    color: Colors.white,
                    backgroundColor: Colors.black,
                    fontSize: 12.0,
                  ),
                  showCardinalDirections: true,
                  showCardinalDirectionsAsPrefix: false,
                  showLabels: true,
                  rotateLonLabels: true,
                  placeLabelsOnLines: true,
                  offsetLonLabelsBottom: 20.0,
                  offsetLatLabelsLeft: 20.0,
                ),
              ),
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 5.0, right: 5.0),
            child: Align(
              alignment: Alignment.topRight,
              child: SizedBox(
                height: 50.0,
                width: 200.0,
                child: Container(
                  color: Colors.white,
                  child: TextButton(
                    child: Text(
                      '重置旋转',
                      style: TextStyle(fontSize: 20.0),
                    ),
                    onPressed: _resetRotation,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}