flutter - 如何在 google_maps_flutter 包上使用 tileOverlays？

Question

使用 java，我们可以通过使用瓦片覆盖将 WMS 瓦片放在 Google Base Map 的顶部。在 flutter 中，我发现 google_maps_flutter 在其构造函数上有 tileOverlays 属性，但很难找到一个工作示例。这里有人成功地将 WMS 瓦片覆盖在谷歌地图之上吗？

Answer 1

我设法让它工作。

上下文如下:

我必须展示根据无人机图像创建的自定义图 block 。目标是在缩放级别 14 和 22 之间获得更好的图像分辨率。

我必须使用的 API 没有整个 map 的图像，这是有道理的，因为我们只对某些区域的详细信息感兴趣。

但是，我可以通过 API KML layers files 获取这让我可以提前知道我可以获取哪些图像。

那些 KML 文件定义了我可以从 API 下载的图 block 的坐标。

分辨率

1)

第一步是获取这些 KML 文件并对其进行解析，以找出无人机图像覆盖的区域。 (这里不是重点，但如果你愿意，我可以告诉你)

2)

然后我做了一个自定义TileProvider .您基本上必须使用一个名为 getTile 的方法。 .

此方法必须返回 Tile .Flutter 中的 tile 基本上是一个包含宽度、高度和数据的对象，如 Uint8List。

import 'package:google_maps_flutter/google_maps_flutter.dart';

class TestTileProvider implements TileProvider{
  @override
  Future<Tile> getTile(int x, int y, int zoom) {
    // TODO: implement getTile
    throw UnimplementedError();
  }

}

按照 official example 中的建议，可以通过在 Canvas 上绘制来轻松创建这些数据。 .

  @override
  Future<Tile> getTile(int x, int y, int? zoom) async {
    final ui.PictureRecorder recorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(recorder);
    final TextSpan textSpan = TextSpan(
      text: '$x,$y',
      style: textStyle,
    );
    final TextPainter textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );
    textPainter.layout(
      minWidth: 0.0,
      maxWidth: width.toDouble(),
    );
    final Offset offset = const Offset(0, 0);
    textPainter.paint(canvas, offset);
    canvas.drawRect(
        Rect.fromLTRB(0, 0, width.toDouble(), width.toDouble()), boxPaint);
    final ui.Picture picture = recorder.endRecording();
    final Uint8List byteData = await picture
        .toImage(width, height)
        .then((ui.Image image) =>
            image.toByteData(format: ui.ImageByteFormat.png))
        .then((ByteData? byteData) => byteData!.buffer.asUint8List());
    return Tile(width, height, byteData);
  }

问题是它不符合我的需求，因为我必须显示真实图片，而不是在 Tiles 上绘制边框和 Tiles 坐标。

我找到了一种方法来加载网络图像并将它们转换为正确的 Tile 格式。

final uri = Uri.https(AppUrl.BASE, imageUri);
try {
  final ByteData imageData = await NetworkAssetBundle(uri).load("");
  final Uint8List bytes = imageData.buffer.asUint8List();
  return Tile(TILE_SIZE, TILE_SIZE, bytes);
} catch (e) {}

但是，由于我没有整张 map 的图片，所以当没有可用的图片时，我不得不返回一些东西。我做了一个透明的瓷砖，在需要的时候还回去了。为了提高性能，我在创建提供者时创建了透明的 Tile，然后总是返回相同的。

class TestTileProvider implements TileProvider {
  static const int TILE_SIZE = 256;
  static final Paint boxPaint = Paint();
  Tile transparentTile;
...
  TestTileProvider() {
    boxPaint.isAntiAlias = true;
    boxPaint.color = Colors.transparent;
    boxPaint.style = PaintingStyle.fill;
    initTransparentTile();
  }
...

  void initTransparentTile() async {
    final ui.PictureRecorder recorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(recorder);
    canvas.drawRect(
        Rect.fromLTRB(0, 0, TILE_SIZE.toDouble(), TILE_SIZE.toDouble()),
        boxPaint);
    final ui.Picture picture = recorder.endRecording();
    final Uint8List byteData = await picture
        .toImage(TILE_SIZE, TILE_SIZE)
        .then((ui.Image image) =>
            image.toByteData(format: ui.ImageByteFormat.png))
        .then((ByteData byteData) => byteData.buffer.asUint8List());
    transparentTile = Tile(TILE_SIZE, TILE_SIZE, byteData);
  }
...

}

我遇到的下一个问题是这个getTile方法只给你Tile坐标(x、y和zoom 瓷砖世界中的)。 KML 图层中定义的位置以度数定义。

<LatLonAltBox>
    <north>47.054785</north>
    <south>47.053557</south>
    <east>6.780674</east>
    <west>6.774709</west>
</LatLonAltBox>

(那些是假坐标，我不能给你看真实坐标:))

我真的，真的，真的建议你to read this以便了解所有这些坐标类型之间的差异。

然后我必须找到一种方法将图 block 坐标转换为度数。

因为我无论如何都无法在 Flutter 中找到检索 projection object (在 javascript API 中有一种检索它的方法)。我必须自己转换这些坐标。

首先我必须了解它们是如何从度数转换为图 block 坐标的(这使用 Mercator projection 和一些数学运算)。

希望我能找到一个 JS 实现 here in the project method .

我必须做的“唯一”事情是将其反转，我将能够从图 block 坐标中获得度数。

我先重写了project方法，然后倒过来:

// The mapping between latitude, longitude and pixels is defined by the web
  // mercator projection.
  // Source: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?csw=1
  math.Point project(LatLng latLng) {
    double siny = math.sin((latLng.latitude * math.pi) / 180);

    // Truncating to 0.9999 effectively limits latitude to 89.189. This is
    // about a third of a tile past the edge of the world tile.
    siny = math.min(math.max(siny, -0.9999), 0.9999);

    return new math.Point(
      TILE_SIZE * (0.5 + latLng.longitude / 360),
      TILE_SIZE * (0.5 - math.log((1 + siny) / (1 - siny)) / (4 * math.pi)),
    );
  }

  LatLng reverseMercatorFromTileCoordinates(int x, int y, int zoom) {
    // Reverse mercator projection.
    // Reverse of above function (kept for readibility)
    //
    // 1) Compute longitude
    //
    // TILE_SIZE * (0.5 + latLng.longitude / 360) = x
    //0.5 + latLng.longitude / 360 = x / TILE_SIZE
    // latLng.longitude / 360 = x / TILE_SIZE - 0.5
    // latLng.longitude = (x / TILE_SIZE - 0.5) *360

    int pixelCoordinateX = x * TILE_SIZE;
    int pixelCoordinateY = y * TILE_SIZE;

    double worldCoordinateX = pixelCoordinateX / math.pow(2, zoom);
    double worldCoordinateY = pixelCoordinateY / math.pow(2, zoom);

    double long = (worldCoordinateX / TILE_SIZE - 0.5) * 360;

    //
    // 2) compute sin(y)
    //
    // TILE_SIZE * (0.5 - math.log((1 + siny) / (1 - siny)) / (4 * math.pi)) = y
    // 0.5 - math.log((1 + siny) / (1 - siny)) / (4 * math.pi) = y / TILE_SIZE
    // math.log((1 + siny) / (1 - siny)) / (4 * math.pi) = -(y / TILE_SIZE) + 0.5
    // math.log((1 + siny) / (1 - siny)) = (-(y / TILE_SIZE) + 0.5)(4 * math.pi)
    // (1 + siny) / (1 - siny) = math.pow(math.e, (-(y / TILE_SIZE) + 0.5)(4 * math.pi))
    // siny = (math.pow(math.e, (-(y / TILE_SIZE) + 0.5)(4 * math.pi)) - 1) / (1+math.pow(math.e, (-(y / TILE_SIZE) + 0.5)(4 * math.pi)));
    double part = math.pow(
        math.e, ((-(worldCoordinateY / TILE_SIZE) + 0.5) * (4 * math.pi)));
    double siny = (part - 1) / (1 + part);
    //
    // 3) Compute latitude
    //
    // siny = math.sin((latLng.latitude * math.pi) / 180)
    // math.asin(siny) = (latLng.latitude * math.pi) / 180
    // math.asin(siny) * 180 = (latLng.latitude * math.pi)
    // (math.asin(siny) * 180) / math.pi = latLng.latitude
    double lat = (math.asin(siny) * 180) / math.pi;
    return LatLng(lat, long);
  }

我现在可以检查从 Provider 请求的 Tile 是否在无人机图像所覆盖的区域内!

这是完整的 getTile 实现:

  @override
  Future<Tile> getTile(int x, int y, int zoom) async {

    // Reverse tile coordinates to degreees
    LatLng tileNorthWestCornerCoordinates =
        reverseMercatorFromTileCoordinates(x, y, zoom);

    // `domain` is an object in which are stored the kml datas fetched before
    KMLLayer kmlLayer =
        domain.getKMLLayerforPoint(tileNorthWestCornerCoordinates);

    
    if (kmlLayer != null &&
        zoom >= kmlLayer.minZoom &&
        zoom <= kmlLayer.maxZoom) {
      final String imageUri = domain.getImageUri(kmlLayer, x, y, zoom);

      final uri = Uri.https(AppUrl.BASE, imageUri);
      try {
        final ByteData imageData = await NetworkAssetBundle(uri).load("");
        final Uint8List bytes = imageData.buffer.asUint8List();
        return Tile(TILE_SIZE, TILE_SIZE, bytes);
      } catch (e) {}
    }
    // return transparent tile
    return transparentTile;
  }

Anddddddddd 完整的 TileProvider 示例:

import 'dart:math' as math;
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:app_digivitis/core/constants/app_url.dart';
import 'package:app_digivitis/core/models/domain.dart';
import 'package:app_digivitis/core/models/kml_layer.dart';
import 'package:app_digivitis/core/viewmodels/screens/user_view_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:provider/provider.dart';

class TestTileProvider implements TileProvider {
  static const int TILE_SIZE = 256;
  static final Paint boxPaint = Paint();
  BuildContext context;
  Tile transparentTile;
  Domain domain;

  TestTileProvider() {
    boxPaint.isAntiAlias = true;
    boxPaint.color = Colors.transparent;
    boxPaint.style = PaintingStyle.fill;
    initTransparentTile();
  }

  @override
  Future<Tile> getTile(int x, int y, int zoom) async {
    // Reverse tile coordinates to degreees
    LatLng tileNorthWestCornerCoordinates =
        reverseMercatorFromTileCoordinates(x, y, zoom);

    // `domain` is an object in which are stored the kml datas fetched before
    KMLLayer kmlLayer =
        domain.getKMLLayerforPoint(tileNorthWestCornerCoordinates);

    if (kmlLayer != null &&
        zoom >= kmlLayer.minZoom &&
        zoom <= kmlLayer.maxZoom) {
      final String imageUri = domain.getImageUri(kmlLayer, x, y, zoom);

      final uri = Uri.https(AppUrl.BASE, imageUri);
      try {
        final ByteData imageData = await NetworkAssetBundle(uri).load("");
        final Uint8List bytes = imageData.buffer.asUint8List();
        return Tile(TILE_SIZE, TILE_SIZE, bytes);
      } catch (e) {}
    }
    // return transparent tile
    return transparentTile;
  }

  void initContext(BuildContext context) {
    context = context;
    final userViewModel = Provider.of<UserViewModel>(context, listen: false);
    domain = userViewModel.domain;
  }

  void initTransparentTile() async {
    final ui.PictureRecorder recorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(recorder);
    canvas.drawRect(
        Rect.fromLTRB(0, 0, TILE_SIZE.toDouble(), TILE_SIZE.toDouble()),
        boxPaint);
    final ui.Picture picture = recorder.endRecording();
    final Uint8List byteData = await picture
        .toImage(TILE_SIZE, TILE_SIZE)
        .then((ui.Image image) =>
            image.toByteData(format: ui.ImageByteFormat.png))
        .then((ByteData byteData) => byteData.buffer.asUint8List());
    transparentTile = Tile(TILE_SIZE, TILE_SIZE, byteData);
  }

  // The mapping between latitude, longitude and pixels is defined by the web
  // mercator projection.
  // Source: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?csw=1
  math.Point project(LatLng latLng) {
    double siny = math.sin((latLng.latitude * math.pi) / 180);

    // Truncating to 0.9999 effectively limits latitude to 89.189. This is
    // about a third of a tile past the edge of the world tile.
    siny = math.min(math.max(siny, -0.9999), 0.9999);

    return new math.Point(
      TILE_SIZE * (0.5 + latLng.longitude / 360),
      TILE_SIZE * (0.5 - math.log((1 + siny) / (1 - siny)) / (4 * math.pi)),
    );
  }

  LatLng reverseMercatorFromTileCoordinates(int x, int y, int zoom) {
    // Reverse mercator projection.
    // Reverse of above function (kept for readibility)
    //
    // 1) Compute longitude
    //
    // TILE_SIZE * (0.5 + latLng.longitude / 360) = x
    //0.5 + latLng.longitude / 360 = x / TILE_SIZE
    // latLng.longitude / 360 = x / TILE_SIZE - 0.5
    // latLng.longitude = (x / TILE_SIZE - 0.5) *360

    int pixelCoordinateX = x * TILE_SIZE;
    int pixelCoordinateY = y * TILE_SIZE;

    double worldCoordinateX = pixelCoordinateX / math.pow(2, zoom);
    double worldCoordinateY = pixelCoordinateY / math.pow(2, zoom);

    double long = (worldCoordinateX / TILE_SIZE - 0.5) * 360;

    //
    // 2) compute sin(y)
    //
    // TILE_SIZE * (0.5 - math.log((1 + siny) / (1 - siny)) / (4 * math.pi)) = y
    // 0.5 - math.log((1 + siny) / (1 - siny)) / (4 * math.pi) = y / TILE_SIZE
    // math.log((1 + siny) / (1 - siny)) / (4 * math.pi) = -(y / TILE_SIZE) + 0.5
    // math.log((1 + siny) / (1 - siny)) = (-(y / TILE_SIZE) + 0.5)(4 * math.pi)
    // (1 + siny) / (1 - siny) = math.pow(math.e, (-(y / TILE_SIZE) + 0.5)(4 * math.pi))
    // siny = (math.pow(math.e, (-(y / TILE_SIZE) + 0.5)(4 * math.pi)) - 1) / (1+math.pow(math.e, (-(y / TILE_SIZE) + 0.5)(4 * math.pi)));
    double part = math.pow(
        math.e, ((-(worldCoordinateY / TILE_SIZE) + 0.5) * (4 * math.pi)));
    double siny = (part - 1) / (1 + part);
    //
    // 3) Compute latitude
    //
    // siny = math.sin((latLng.latitude * math.pi) / 180)
    // math.asin(siny) = (latLng.latitude * math.pi) / 180
    // math.asin(siny) * 180 = (latLng.latitude * math.pi)
    // (math.asin(siny) * 180) / math.pi = latLng.latitude
    double lat = (math.asin(siny) * 180) / math.pi;
    return LatLng(lat, long);
  }
}

不要太在意上下文，因为我需要它来使用提供程序来检索我的 domain 实例。

3)

使用此提供程序!

带有 map 示例的完整小部件:

import 'package:app_digivitis/core/providers/test_provider.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';

class MarksMapTest extends StatefulWidget {
  @override
  _MarksMapTestState createState() => _MarksMapTestState();
}

class _MarksMapTestState extends State<MarksMapTest>
    with SingleTickerProviderStateMixin {
  GoogleMapController mapController;
  Location _location = Location();
  LocationData _center =
      LocationData.fromMap({'latitude': 51.512153, 'longitude': -0.111019});
  TileOverlay _tileOverlay;
  TestTileProvider testTileProvider = TestTileProvider();

  @override
  void initState() {
    super.initState();
    createTileOverlay();
    _location.getLocation().then((value) {
      _center = value;
    });
  }

  void createTileOverlay() {
    if (_tileOverlay == null) {
      final TileOverlay tileOverlay = TileOverlay(
        tileOverlayId: TileOverlayId('tile_overlay_1'),
        tileProvider: testTileProvider,
      );
      _tileOverlay = tileOverlay;
    }
  }

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    centerMap(location: _center);
  }

  void centerMap({LocationData location}) async {
    if (location == null) location = await _location.getLocation();
    mapController.animateCamera(
      CameraUpdate.newCameraPosition(CameraPosition(
          target: LatLng(location.latitude, location.longitude), zoom: 14)),
    );
  }

  @override
  Widget build(BuildContext context) {
    testTileProvider.initContext(context);
    Set<TileOverlay> overlays = <TileOverlay>{
      if (_tileOverlay != null) _tileOverlay,
    };
    return Scaffold(
      body: GoogleMap(
        onMapCreated: (controller) => _onMapCreated(controller),
        initialCameraPosition: CameraPosition(
          target: LatLng(_center.latitude, _center.longitude),
          zoom: 14.0,
        ),
        tileOverlays: overlays,
        mapType: MapType.hybrid,
        myLocationButtonEnabled: false,
        myLocationEnabled: true,
        zoomControlsEnabled: false,
        mapToolbarEnabled: false,
      ),
    );
  }
}