Flutter：地图上有图像叠加层

Question

我实际上是在一个Web项目中，其中显示了一个Map（传单），其中的图像叠加了。在Web应用程序上，用户可以移动图像以使其与传单地图上建筑物的指纹完全匹配。放置图像后，由于图像3个角的3个GPS坐标，我们能够存储图像的确切位置。

现在，我想通过使用移动应用程序中地图上的3个角坐标来添加此图像。我对Flutter感兴趣，但在进一步介绍之前，我想知道使用Flutter能否实现此实现。

以下是放置在网络应用中的图片的示例：

以下是与图像相关联的3个角坐标的示例：

"corner1": {
       "type": "Point",
       "coordinates": [48.44125015626304, -4.412910623650533]
},
"corner2": {
       "type": "Point",
       "coordinates": [48.44194275959914, -4.412734794896097]
},
"corner3": {
        "type": "Point",
        "coordinates": [48.441223035155275, -4.412648068391719]
}

因此，在全球范围内，我希望在移动应用程序的这些确切位置上以重叠方式显示图像，并尽可能使用Flutter。

Answer 1

Flutter google_maps_plugin中的地图插件似乎现在支持多边形，如该提交polygon overlays中所示。那将帮助您实现图像叠加。 希望对您有帮助！

检查以下示例：polygons

Answer 2

Flutter有一个WebView，您可以在其中显示Leaflet贴图。我想通过Cordova在移动设备上使用Leaflet，而在WebView中使用Leaflet，是您可以选择使用Leaflet而不是使用Google Maps。

我不知道WebView抖动的速度有多快，但希望它获得与使用Cordova相似的性能，对于您的应用程序来说，您看起来将获得足够的性能。

如果您要在移动设备上渲染大量矢量数据，可能会引起麻烦。然后，您需要在Leaflet地图使用的切片服务器中进行渲染。

Answer 3

您可以使用flutter_google_maps或map_view，还可以添加自定义标记，这很好。

这是扑朔迷离的Google地图的示例：Flutter Google Map