Flutter地图展示插件maplibre的使用

MapLibre for Flutter

此包提供了MapLibre SDKs的非官方Flutter绑定。

• maplibre-gl-js 用于Web
• maplibre-native（以前名为maplibre-gl）用于Android，并且未来将支持iOS、Windows、macOS和Linux

MapLibre是一个许可的开源解决方案，遵循MVT（Mapbox Vector Tile）标准。通过绑定到原生SDK，该包实现了高性能渲染并支持许多复杂功能。

功能展示

功能	描述
View the planet as a globe
Use custom vector styles
Pitch or rotate the map
Use raster tiles
Add 3D building outlines
Add heatmaps
Add polygons
Render elevation
Add lines
Add circles
Add markers

资源

示例应用

• Hosted Demo App
• Code of the Example App

入门与文档

访问Get Started学习如何在项目中使用maplibre。

如果你想了解更多关于包的类和属性，可以查看API docs。

开发与贡献

所有形式的贡献都是受欢迎的。如果你考虑以任何方式贡献，非常感谢！你可以通过以下方式帮助开发：

• 在你的项目中使用该包并分享反馈。
• 如果你发现任何问题，请提交bug报告。
• 如果你需要特定的功能，请提出功能请求或发布你的想法作为讨论。
• 增强包的文档。
• 赞助这个项目。

示例代码

以下是example/lib/main.dart文件的内容，展示了如何创建一个包含多个页面的应用程序，每个页面演示了不同的MapLibre功能：

import 'package:flutter/material.dart';
import 'package:maplibre_example/animation_page.dart';
import 'package:maplibre_example/controller_page.dart';
import 'package:maplibre_example/events_page.dart';
import 'package:maplibre_example/gestures_page.dart';
import 'package:maplibre_example/kiosk_page.dart';
import 'package:maplibre_example/layers_circle_page.dart';
import 'package:maplibre_example/layers_marker_page.dart';
import 'package:maplibre_example/layers_mixed_page.dart';
import 'package:maplibre_example/layers_polygon_page.dart';
import 'package:maplibre_example/layers_polyline_page.dart';
import 'package:maplibre_example/menu_page.dart';
import 'package:maplibre_example/offline_page.dart';
import 'package:maplibre_example/parameters_page.dart';
import 'package:maplibre_example/permissions_page.dart';
import 'package:maplibre_example/style_layers_circle_page.dart';
import 'package:maplibre_example/style_layers_fill_extrusion_page.dart';
import 'package:maplibre_example/style_layers_fill_page.dart';
import 'package:maplibre_example/style_layers_heatmap_page.dart';
import 'package:maplibre_example/style_layers_hillshade_page.dart';
import 'package:maplibre_example/style_layers_line_page.dart';
import 'package:maplibre_example/style_layers_raster_page.dart';
import 'package:maplibre_example/style_layers_symbol_page.dart';
import 'package:maplibre_example/styled_map_page.dart';
import 'package:maplibre_example/two_maps_page.dart';
import 'package:maplibre_example/user_interface_page.dart';
import 'package:maplibre_example/user_location_page.dart';
import 'package:maplibre_example/widget_layer_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MapLibre Demo',
      initialRoute: MenuPage.location,
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.blue,
      ),
      routes: {
        MenuPage.location: (context) => const MenuPage(),
        KioskPage.location: (context) => const KioskPage(),
        AnimationPage.location: (context) => const AnimationPage(),
        GesturesPage.location: (context) => const GesturesPage(),
        EventsPage.location: (context) => const EventsPage(),
        StyledMapPage.location: (context) => const StyledMapPage(),
        UserLocationPage.location: (context) => const UserLocationPage(),
        UserInterfacePage.location: (context) => const UserInterfacePage(),
        WidgetLayerPage.location: (context) => const WidgetLayerPage(),
        OfflinePage.location: (context) => const OfflinePage(),
        PermissionsPage.location: (context) => const PermissionsPage(),
        StyleLayersSymbolPage.location: (context) =>
            const StyleLayersSymbolPage(),
        StyleLayersCirclePage.location: (context) =>
            const StyleLayersCirclePage(),
        StyleLayersHeatmapPage.location: (context) =>
            const StyleLayersHeatmapPage(),
        StyleLayersHillshadePage.location: (context) =>
            const StyleLayersHillshadePage(),
        StyleLayersFillPage.location: (context) => const StyleLayersFillPage(),
        StyleLayersFillExtrusionPage.location: (context) =>
            const StyleLayersFillExtrusionPage(),
        StyleLayersRasterPage.location: (context) =>
            const StyleLayersRasterPage(),
        StyleLayersLinePage.location: (context) => const StyleLayersLinePage(),
        LayersMixedPage.location: (context) => const LayersMixedPage(),
        LayersCirclePage.location: (context) => const LayersCirclePage(),
        LayersMarkerPage.location: (context) => const LayersMarkerPage(),
        LayersPolylinePage.location: (context) => const LayersPolylinePage(),
        LayersPolygonPage.location: (context) => const LayersPolygonPage(),
        ParametersPage.location: (context) => const ParametersPage(),
        ControllerPage.location: (context) => const ControllerPage(),
        TwoMapsPage.location: (context) => const TwoMapsPage(),
      },
    );
  }
}

以上内容涵盖了MapLibre for Flutter的基本介绍、资源链接以及一个完整的示例应用程序代码，希望对你有所帮助。