在flutter_map中展示GeoJSON数据的技术实现咨询

第三方GeoJSON解析库版本老旧不兼容时，手动解析是最稳妥的方案。以下是针对点（Point）和多边形（Polygon）类型的具体实现：

1. 依赖准备 #

确保pubspec.yaml里的依赖配置正确：

dependencies:
  flutter_map: ^4.0.0
  latlong2: ^0.9.0 # flutter_map 4.x 依赖的经纬度处理库

2. 手动解析GeoJSON并转换为flutter_map可用格式 #

假设你的GeoJSON字符串为geoJsonString，解析代码如下：

import 'dart:convert';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

// 解析GeoJSON，生成地图标记和多边形列表
void parseGeoJson(String geoJsonString) {
  final Map<String, dynamic> geoJson = jsonDecode(geoJsonString);
  final List<dynamic> features = geoJson['features'];

  List<Marker> markers = [];
  List<Polygon> polygons = [];

  for (var feature in features) {
    final geometry = feature['geometry'];
    final properties = feature['properties'];

    switch (geometry['type']) {
      case 'Point':
        // GeoJSON坐标顺序是[经度, 纬度]，flutter_map的LatLng是(纬度, 经度)，需反转
        final coords = geometry['coordinates'];
        final latLng = LatLng(coords[1], coords[0]);
        
        markers.add(Marker(
          point: latLng,
          width: 40,
          height: 40,
          child: Column(
            children: [
              const Icon(Icons.location_pin, color: Colors.red),
              Text(properties['name'] ?? '无名点位'),
            ],
          ),
        ));
        break;

      case 'Polygon':
        // Polygon的coordinates是[[外边界坐标], [内部洞坐标], ...]
        final List<List<dynamic>> polygonCoords = geometry['coordinates'];
        // 提取外边界
        final outerRing = polygonCoords[0].map((coord) => LatLng(coord[1], coord[0])).toList();
        // 提取内部洞（如果存在）
        final holes = polygonCoords.skip(1).map((hole) => hole.map((coord) => LatLng(coord[1], coord[0])).toList()).toList();
        
        polygons.add(Polygon(
          points: outerRing,
          holePointsList: holes.isNotEmpty ? holes : null,
          color: Colors.blue.withOpacity(0.3),
          borderColor: Colors.blue,
          borderStrokeWidth: 2,
        ));
        break;
    }
  }

  // 将markers和polygons传入flutter_map的对应图层即可使用
}

3. 在flutter_map中渲染 #

把生成的标记和多边形列表添加到地图组件：

FlutterMap(
  options: MapOptions(
    initialCenter: LatLng(30.0333, 31.2333), // 根据你的数据设置初始中心点
    initialZoom: 10,
  ),
  children: [
    TileLayer(
      urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      subdomains: const ['a', 'b', 'c'],
    ),
    MarkersLayer(markers: markers),
    PolygonsLayer(polygons: polygons),
  ],
)

关键注意事项 #

• 必须注意坐标顺序：GeoJSON是**[经度, 纬度]，flutter_map的LatLng是(纬度, 经度)**，反转后才能正确定位。
• 多边形可能包含内部洞，解析时需处理holePointsList参数。
• 如需支持LineString等其他GeoJSON类型，可参照上述模式扩展switch分支。

内容的提问来源于stack exchange，提问作者bil haj