Flutter地图展示插件 flutter_map_arcgis 的使用

flutter_map_arcgis 是一个用于在Flutter应用中集成ArcGIS地图服务的插件。它支持显示点、多边形和折线等要素图层，并且可以自定义渲染样式和交互事件。

当前支持的功能

• 要素图层（点、多边形、折线）
• 更多功能正在开发中

使用方法

1. 添加依赖

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

dependencies:
  flutter_map: any
  flutter_map_arcgis: any # 或者 Pub 上的最新版本
  dio: any # 或者 Pub 上的最新版本

2. 配置地图

接下来，你可以将 flutter_map_arcgis 插件添加到你的 FlutterMap 中，并通过 FeatureLayerOptions 进行配置。

示例代码

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ArcGIS Map Example')),
        body: Padding(
          padding: EdgeInsets.all(8.0),
          child: Column(
            children: [
              Flexible(
                child: FlutterMap(
                  options: MapOptions(
                    center: LatLng(35.611909, -82.440682), // 地图中心点
                    zoom: 14.0,
                  ),
                  children: [
                    // 基础瓦片图层
                    TileLayer(
                      urlTemplate: 'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
                      subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
                    ),
                    // 点要素图层
                    FeatureLayer(
                      FeatureLayerOptions(
                        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
                        "point",
                        render: (dynamic attributes) {
                          // 根据属性进行渲染
                          return PointOptions(
                            width: 30.0,
                            height: 30.0,
                            builder: const Icon(Icons.pin_drop, color: Colors.green),
                          );
                        },
                        onTap: (attributes, LatLng location) {
                          print('Attributes: $attributes');
                          print('Location: $location');
                        },
                      ),
                    ),
                    // 多边形要素图层（注释掉的部分）
                    // FeatureLayer(
                    //   FeatureLayerOptions(
                    //     "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Congressional_Districts/FeatureServer/0",
                    //     "polygon",
                    //     render: (dynamic attributes) {
                    //       return PolygonOptions(
                    //         borderColor: Colors.red,
                    //         color: Colors.black45,
                    //         borderStrokeWidth: 2,
                    //         isFilled: true,
                    //       );
                    //     },
                    //     onTap: (attributes, LatLng location) {
                    //       print(attributes);
                    //     },
                    //   ),
                    // ),
                    // 折线要素图层（注释掉的部分）
                    // FeatureLayer(
                    //   FeatureLayerOptions(
                    //     "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Denver_Streets_Centerline/FeatureServer/0",
                    //     "polyline",
                    //     render: (dynamic attributes) {
                    //       return PolygonLineOptions(
                    //         borderColor: Colors.red,
                    //         color: Colors.red,
                    //         borderStrokeWidth: 2,
                    //       );
                    //     },
                    //     onTap: (attributes, LatLng location) {
                    //       print(attributes);
                    //     },
                    //   ),
                    // ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}