Flutter Map加载显示.shp等Shapefile区域文件的实现方法咨询

核心实现路径说明 #

• 不需要必须先转为GeoJSON格式，有两种可选实现路径：1）预转换为GeoJSON后在前端解析渲染；2）直接在Flutter端解析Shapefile提取LatLng坐标
• 支持直接将Shapefile解析为LatLng格式坐标，无需经过GeoJSON中转

具体操作步骤 #

方案一：预转换为GeoJSON（适合静态Shapefile场景，前端渲染性能更高） #

• 第一步：本地转换Shapefile为GeoJSON
  可通过Python的pyshp库完成转换，操作代码如下：
  先安装依赖：pip install pyshp pyproj

  import shapefile
  import json
  # 读取Shapefile，注意encoding根据你文件的编码设置，常见为utf-8或gbk
  reader = shapefile.Reader("你的Shapefile路径.shp", encoding="utf-8")
  # 导出为GeoJSON格式
  geojson_data = reader.__geo_interface__
  with open("output.geojson", "w", encoding="utf-8") as f:
      json.dump(geojson_data, f, ensure_ascii=False)
  

  若原Shapefile为投影坐标系，需要额外通过pyproj将坐标转换为WGS84（EPSG:4326）坐标系，避免地图坐标偏移。
• 第二步：Flutter端加载渲染
  引入flutter_map_geojson插件直接解析GeoJSON文件，自动将坐标转换为LatLng对象，生成对应的Polygon、Polyline图层添加到Flutter Map的layers配置中即可。

方案二：Flutter端直接解析Shapefile（适合动态加载Shapefile场景） #

• 第一步：引入Dart解析依赖
  在pubspec.yaml中添加shapefile解析库：

  dependencies:
    shapefile: ^0.0.4
    latlong2: ^0.9.0
  

• 第二步：解析Shapefile生成LatLng坐标
  示例代码如下：

  import 'package:shapefile/shapefile.dart';
  import 'package:latlong2/latlong.dart';
  
  Future<List<Polygon>> parseShapeToMapLayers(String filePath) async {
    List<Polygon> mapPolygons = [];
    // 读取Shapefile，需确保.shp/.shx/.dbf三个配套文件都在同一路径下
    final shapefile = await Shapefile.fromPath(filePath);
    for (var record in shapefile.records) {
      // 以多边形要素为例，线要素、点要素同理判断对应类型即可
      if (record.shape is PolygonShape) {
        PolygonShape shape = record.shape as PolygonShape;
        for (var ring in shape.rings) {
          List<LatLng> ringPoints = ring.points.map((point) {
            // 若为投影坐标系，此处要先完成坐标到WGS84的转换
            return LatLng(point.y, point.x);
          }).toList();
          mapPolygons.add(Polygon(points: ringPoints, color: Color(0x33FF0000)));
        }
      }
    }
    return mapPolygons;
  }
  

• 第三步：将生成的图层列表添加到Flutter Map的layers配置中即可完成渲染。

注意事项 #

• Shapefile的配套文件(.shp、.shx、.dbf)必须同时存放在同一路径下才能正常解析，缺一不可
• 所有非WGS84坐标系的坐标必须完成坐标转换后再生成LatLng对象，否则会出现严重的坐标偏移

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