使用java，我们可以使用tile overlay将WMS tile放在Google Base Map的顶部。在flutter中，我发现google_maps_flutter在其构造函数上具有tileOverlays属性，但很难找到一个工作示例。有人成功地在谷歌地图上覆盖了WMS瓷砖吗?
我成功了。
上下文如下:
我必须显示从无人机图像创建的自定义瓷砖。我们的目标是在缩放级别14到22之间的图像上获得更好的分辨率。
我必须使用的API没有整个地图的图像，这是有意义的，因为我们只对某些区域的细节感兴趣。
然而，我可以在API上获取KML层文件，这让我提前知道我可以获取哪些图像。
这些KML文件定义了我可以从API下载的磁贴的坐标。
的决议1)
第一步是获取这些KML文件并解析它们，以便找到哪些区域被无人机图像覆盖。(这里不是重点，但如果你愿意，我可以展示给你看)
2)
然后我做了一个自定义的TileProvider。你基本上需要重写一个叫做getTile的方法。
这个方法必须返回一个Tile。在Flutter中，瓷砖基本上是一个包含宽度、高度和数据的对象，如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();
}
}
这些数据可以很容易地在画布上绘制，就像官方示例中建议的那样。
@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坐标。
我找到了一种方法来加载网络图像并将它们转换为正确的格式。
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) {}
然而，由于我没有整个地图的图像，当没有图像可用时，我必须返回一些东西。我做了一个透明的瓷砖，并在需要的时候返回。为了提高性能，我在创建提供程序时创建透明Tile，然后总是返回相同的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世界中的Tile坐标(x,y和zoom)。KML Layers中定义的位置在Degrees中定义。
<LatLonAltBox>
<north>47.054785</north>
<south>47.053557</south>
<east>6.780674</east>
<west>6.774709</west>
</LatLonAltBox>
(那些是假的坐标，我不能给你看真实的:))
我真的，真的，真的建议您阅读本文，以便了解所有这些坐标类型之间的差异。
然后我必须找到一种方法将瓷砖的坐标转换为度数。
因为我在Flutter中找不到检索投影对象(在javascript API中有一种方法来检索它)。我必须自己转换这些坐标
首先，我必须理解它们是如何从角度转换为贴图坐标的(这使用了墨卡托投影和一些数学)。
希望我能在project方法中找到一个JS实现。
"only"我所要做的就是把它倒过来，这样我就可以从贴图坐标中获得度数了。
我首先重写了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);
}
我现在能够检查从提供商请求的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;
}
和完整的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)
使用此提供程序!
带有地图示例的完整小部件:
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,
),
);
}
}