Flutter地图展示与交互插件syncfusion_flutter_maps的使用

Flutter Maps library

Syncfusion Flutter Maps package 是一个数据可视化库，用于从shape文件或WMTS服务创建美观、交互性强且可定制的地图，以可视化地理区域。

Disclaimer: 这是一个商业包。要使用此包，您需要拥有 Syncfusion® 商业许可证或 Free Syncfusion® Community许可证。更多详情，请查看LICENSE文件。

功能概述

Shape Layer 特性

• Bubbles - 为形状添加信息，如人口密度和用户数量。
• Markers - 使用内置符号或自定义小部件在特定经纬度上标记位置。
• Marker alignment - 标记可以基于其坐标点对齐到各种位置。
• Shape selection - 选择形状以突出显示地图上的某个区域。
• Legend - 提供关于地图上绘制数据的清晰信息。
• Colors - 根据底层值自定义形状颜色。
• Tooltip - 使用可自定义的工具提示显示有关形状、气泡和标记的附加信息。
• Shape sublayer - 添加带有GeoJSON数据的形状子层以显示有关特定区域的更多详细信息。
• Vector layer - 在形状层中添加多边形、线、圆等矢量图形。
• Zooming and panning - 支持缩放和平移操作来查看特定区域。
• Inverted circle 和 Inverted polygon - 支持倒置圆形和多边形的颜色填充。

Tile Layer 特性

• Markers - 显示特定纬度和经度的标记。
• Shape sublayer - 添加带有GeoJSON数据的形状子层。
• Vector layer - 添加多边形、线、圆等矢量图形。
• Zooming and panning - 支持缩放和平移操作来查看特定区域。
• Custom bounds - 指定可视范围以查看特定区域。

安装

从 pub.dev 安装最新版本。

import 'package:syncfusion_flutter_maps/maps.dart';

示例代码

创建地图

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

void main() {
  return runApp(const MapsApp());
}

/// This widget will be the root of application.
class MapsApp extends StatelessWidget {
  const MapsApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Maps Demo',
      home: MyHomePage(),
    );
  }
}

/// This widget is the home page of the application.
class MyHomePage extends StatefulWidget {
  /// Initialize the instance of the [MyHomePage] class.
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<Model> _data;
  late MapShapeSource _mapSource;

  @override
  void initState() {
    _data = const <Model>[
      Model('New South Wales', Color.fromRGBO(255, 215, 0, 1.0), '       New\nSouth Wales'),
      Model('Queensland', Color.fromRGBO(72, 209, 204, 1.0), 'Queensland'),
      Model('Northern Territory', Color.fromRGBO(255, 78, 66, 1.0), 'Northern\nTerritory'),
      Model('Victoria', Color.fromRGBO(171, 56, 224, 0.75), 'Victoria'),
      Model('South Australia', Color.fromRGBO(126, 247, 74, 0.75), 'South Australia'),
      Model('Western Australia', Color.fromRGBO(79, 60, 201, 0.7), 'Western Australia'),
      Model('Tasmania', Color.fromRGBO(99, 164, 230, 1), 'Tasmania'),
      Model('Australian Capital Territory', Colors.teal, 'ACT')
    ];

    _mapSource = MapShapeSource.asset(
      'assets/australia.json',
      shapeDataField: 'STATE_NAME',
      dataCount: _data.length,
      primaryValueMapper: (int index) => _data[index].state,
      dataLabelMapper: (int index) => _data[index].stateCode,
      shapeColorValueMapper: (int index) => _data[index].color,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: 520,
        child: Center(
          child: SfMaps(
            layers: <MapShapeLayer>[
              MapShapeLayer(
                source: _mapSource,
                showDataLabels: true,
                legend: const MapLegend(MapElement.shape),
                tooltipSettings: MapTooltipSettings(
                    color: Colors.grey[700],
                    strokeColor: Colors.white,
                    strokeWidth: 2),
                strokeColor: Colors.white,
                strokeWidth: 0.5,
                shapeTooltipBuilder: (BuildContext context, int index) {
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      _data[index].stateCode,
                      style: const TextStyle(color: Colors.white),
                    ),
                  );
                },
                dataLabelSettings: MapDataLabelSettings(
                  textStyle: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: Theme.of(context).textTheme.bodySmall!.fontSize),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

/// Collection of Australia state code data.
class Model {
  const Model(this.state, this.color, this.stateCode);

  final String state;
  final Color color;
  final String stateCode;
}

关于 Syncfusion®

Syncfusion 成立于2001年，总部位于北卡罗来纳州的研究三角园区。我们有超过20,000个客户和超过1百万用户，包括大型金融机构、财富500强公司和全球IT咨询公司。今天，我们提供1000多个控件和框架，适用于Web、移动和桌面开发，并提供企业级软件解决方案。