Flutter地图数据渲染插件topojson的使用

Flutter 地图数据渲染插件 topojson 的使用

介绍

Topojson 是一个用于解析 Topojson 数据的库。Topojson 文件是一种高效存储地理空间数据的格式。在本文中，我们将展示如何在 Flutter 应用程序中使用 topojson 插件来渲染地图。

示例代码

以下是一个完整的示例代码，展示了如何从网络获取 Topojson 数据并将其渲染到 Flutter 应用程序中。

import 'dart:convert';
import 'dart:ui';

import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';

import 'package:topojson/topojson.dart';

void main() async {
  // 获取 Topojson 数据
  final resp = await http.get(Uri.parse(
      'https://geoshape.ex.nii.ac.jp/jma/resource/AreaInformationCity_landslide/20210518/4220201.topojson'));
  final json = jsonDecode(utf8.decode(resp.bodyBytes));
  final tj = TopoJson.fromJson(json);

  // 运行应用程序
  runApp(MyApp(
    topojson: tj,
  ));
}

class MyApp extends StatelessWidget {
  final TopoJson topojson;
  const MyApp({Key? key, required this.topojson}) : super(key: key);

  // 构建应用程序界面
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取边界框信息
    final bbox = topojson.bbox.map((n) => n.toDouble()).toList();
    final rect = Rect.fromLTRB(bbox[0], bbox[1], bbox[2], bbox[3]);

    // 返回应用程序界面
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: LayoutBuilder(builder: (context, constraints) {
          return Container(
            width: constraints.maxWidth,
            height: constraints.maxHeight,
            //color: Colors.blue,
            child: CustomPaint(
              size: Size(constraints.maxWidth, constraints.maxHeight),
              painter: TopoJsonPainter(topojson, rect),
            ),
          );
        }),
      ),
    );
  }
}

class TopoJsonPainter extends CustomPainter {
  final TopoJson topojson;
  final Rect rect;
  const TopoJsonPainter(this.topojson, this.rect);

  /// 注意：此示例直接绘制几何数据，未进行任何坐标转换/修正；仅用于测试目的。
  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    // 遍历所有对象
    for (final object in topojson.visitAllObjects()) {
      // 如果对象类型为多边形
      if (object.type == TopoJsonObjectType.polygon) {
        final paint = Paint()
          ..color = Colors.redAccent
          ..style = PaintingStyle.stroke
          ..strokeWidth = 0.5;

        // 绘制每个环
        for (final ring in (object as TopoJsonPolygon).rings) {
          canvas.drawPoints(
              PointMode.polygon,
              ring.points
                  .map((p) => Offset(
                        (p[0].toDouble() - rect.left) / rect.width * size.width,
                        (p[1].toDouble() - rect.top) /
                            rect.height *
                            size.height,
                      ))
                  .toList(),
              paint);
        }
      }
    }
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

解释

1. 获取 Topojson 数据:

   final resp = await http.get(Uri.parse(
       'https://geoshape.ex.nii.ac.jp/jma/resource/AreaInformationCity_landslide/20210518/4220201.topojson'));
   final json = jsonDecode(utf8.decode(resp.bodyBytes));
   final tj = TopoJson.fromJson(json);
   

   该部分代码通过 HTTP 请求从指定 URL 获取 Topojson 数据，并将其解码为 JSON 对象，然后将其转换为 TopoJson 实例。

2. 构建应用程序界面:

   return MaterialApp(
     title: 'Flutter Demo',
     home: Scaffold(
       body: LayoutBuilder(builder: (context, constraints) {
         return Container(
           width: constraints.maxWidth,
           height: constraints.maxHeight,
           child: CustomPaint(
             size: Size(constraints.maxWidth, constraints.maxHeight),
             painter: TopoJsonPainter(topojson, rect),
           ),
         );
       }),
     ),
   );
   

   该部分代码创建了一个包含自定义绘图逻辑的 CustomPaint 小部件。CustomPaint 小部件负责将 Topojson 数据绘制到屏幕上。

3. 绘制地图数据:

   [@override](/user/override)
   void paint(Canvas canvas, Size size) {
     for (final object in topojson.visitAllObjects()) {
       if (object.type == TopoJsonObjectType.polygon) {
         final paint = Paint()
           ..color = Colors.redAccent
           ..style = PaintingStyle.stroke
           ..strokeWidth = 0.5;
         for (final ring in (object as TopoJsonPolygon).rings) {
           canvas.drawPoints(
               PointMode.polygon,
               ring.points
                   .map((p) => Offset(
                         (p[0].toDouble() - rect.left) / rect.width * size.width,
                         (p[1].toDouble() - rect.top) /
                             rect.height *
                             size.height,
                       ))
                   .toList(),
               paint);
         }
       }
     }
   }