Flutter地理JSON数据绘制插件geo_json_painter的使用

Flutter地理JSON数据绘制插件geo_json_painter的使用

库用于解析基于RFC 7946规范的GeoJson格式，并在画布上显示GeoJson。 所有在RFC 7946规范中描述的主要功能都已实现。

开始使用

该库提供了两个主要实体，可以执行GeoJson渲染和处理任务：

• GeoJson - 用于解析和配置绘图操作的类
• GeoJsonCustomPainter - 控制根据给定配置渲染GeoJson数据的类

此外，借助GeoJson类，如果需要，您可以覆盖每个单独的GeoJson特征的Paint类，甚至整个绘制方法：

// 覆盖绘制方法
void addDrawMethodOverriding(GeoJsonFeatureType type, DrawFunction fn);

// 覆盖Paint类
void addPainterOverriding(GeoJsonFeatureType type, Paint paint)

这在您希望用自定义实现替换默认实现时非常有用。例如，将Point特征绘制的点替换为svg图像。 要开始使用，可以查看以下代码片段：

GeoJson解析、Paint和绘制方法覆盖

final json = GeoJson()
      ..addPainterOverriding(
        GeoJsonFeatureType.Point,
        Paint()
          ..color = Colors.green
          ..strokeWidth = 10,
      )
      ..addDrawMethodOverriding(GeoJsonFeatureType.Point, (canvas, feature) {
        final point = feature.geometry as GeoJsonPoint;
        canvas.drawRect(
            Rect.fromCenter(
                center: Offset(point.coordinates[1], point.coordinates[0]),
                width: 10,
                height: 25),
            Paint()
              ..color = Colors.green
              ..strokeWidth = 10);
      })
      ..parseGeoJson({
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "id": "1",
            "properties": {
              "prop0": "val0",
            },
            "geometry": {
              "type": "Polygon",
              "coordinates": [
                [
                  [33.531650, 746.086982],
                  [467.606602, 746.086982],
                  [467.606602, 1160.930231],
                  [33.531650, 1160.930231],
                  [33.531650, 746.086982]
                ]
              ]
            }
          },
          {
            "type": "Feature",
            "id": "2",
            "properties": {
              "prop0": "val0",
            },
            "geometry": {
              "type": "Point",
              "coordinates":  [100.531650, 100.086982],
            }
          },
        ],
      });

使用Widget的示例

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: ColoredBox(
      color: Colors.white54,
      child: InteractiveViewer(
        child: CustomPaint(
          size: Size(
            MediaQuery.of(context).size.width,
            MediaQuery.of(context).size.height,
          ),
          painter: GeoJsonCustomPainter(
            geoJson: json, // GeoJson实例
          ),
        ),
      ),
    ),
  );
}

完整的示例代码如下：

import 'package:flutter/material.dart';
import 'package:geo_json_painter/geo_json_painter.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final json = GeoJson()
      // 只覆盖绘制示例
      ..addPainterOverriding(
        GeoJsonFeatureType.multiLineString,
        Paint()
          ..strokeWidth = 3.0
          ..color = Colors.red,
      )
      // 覆盖绘制方法示例
      ..addDrawMethodOverriding(GeoJsonFeatureType.point,
          (canvas, feature, paint) {
        // 将几何对象转换为具体类型以访问特征坐标对象
        final point = feature.geometry as GeoJsonPoint;

        // 如果你想对基本图形应用自定义着色器，必须在这里计算矩形
        final rect = Rect.fromCenter(
            center: Offset(point.coordinates[1], point.coordinates[0]),
            width: 25,
            height: 25);

        // 在画布上绘制特征
        canvas.drawRect(
          rect,
          Paint(),
        );
      })
      // 解析GeoJson文件
      ..parseGeoJson({
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "geometry": {
              "type": "MultiPoint",
              "coordinates": [
                [10.0, 10.0],
                [20.0, 20.0],
                [30.0, 30.0]
              ]
            },
            "properties": {"strokeWidth": 10.0, "color": "#EFCC3F"}
          },
          {
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [75.0, 75.0]
            },
            "properties": {"prop0": "value0"}
          },
          {
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [50.0, 100.0]
            },
            "properties": {"prop0": "value0"}
          },
          {
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [150.0, 50.0]
            },
            "properties": {"prop0": "value0"}
          },
          {
            "type": "Feature",
            "geometry": {
              "type": "MultiPoint",
              "coordinates": [
                [10.0, 100.0],
                [10.0, 150.0]
              ]
            },
            "properties": {"prop0": "value0"}
          },
          {
            "type": "Feature",
            "geometry": {
              "type": "LineString",
              "coordinates": [
                [500.0, 350.0],
                [500.0, 0.0]
              ]
            },
            "properties": {"prop0": "value0"}
          },
          {
            "type": "Feature",
            "geometry": {
              "type": "Polygon",
              "coordinates": [
                [
                  [10.0, 10.0],
                  [100.0, 10.0],
                  [100.0, 100.0],
                  [10.0, 100.0],
                  [10.0, 10.0]
                ],
                [
                  [10.0, 10.0],
                  [100.0, 10.0],
                  [100.0, 100.0],
                  [10.0, 100.0],
                  [10.0, 10.0]
                ]
              ]
            },
            "properties": {"prop0": "value0"}
          },
          {
            "type": "Feature",
            "geometry": {
              "type": "MultiLineString",
              "coordinates": [
                [
                  [100.0, 100.0],
                  [200.0, 200.0]
                ],
                [
                  [300.0, 100.0],
                  [400.0, 100.0],
                  [400.0, 300.0],
                ],
                [
                  [50.0, 300.0],
                  [10.0, 200.0]
                ],
              ]
            },
            "properties": {"strokeWidth": 15.0, "color": "#EFCC3F"}
          },
        ]
      });

    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: CustomPaint(
            size: Size(
              MediaQuery.of(context).size.width,
              MediaQuery.of(context).size.height,
            ),
            painter: GeoJsonCustomPainter(
              geoJson: json,
              internalPaintOverridingEnabled: true, // 默认为true
              beforeRender: (feature, rect) {
                if (feature.type == GeoJsonFeatureType.lineString) {
                  final line = feature as GeoJsonLineString;
                  line.paintProperties.strokeWidth = 25.0;
                  if (rect != null) {
                    line.paintProperties.shader = const LinearGradient(colors: [
                      Colors.red,
                      Colors.orange,
                      Colors.yellow,
                      Colors.green,
                      Colors.lightBlue,
                      Colors.blue,
                      Colors.purple,
                    ]).createShader(rect);
                  }
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}