如何在Flutter'Web'中显示OSM映射？

Question

我正在尝试使用Flutter Web创建自定义地图，该地图将能够显示COVID-19位置的自定义统计信息。

首先，我们将有一个界面，显示整个星球的统计信息： https://google.com/covid19-map/?hl=en（就像htisw）

然后，用户可以单击任何国家/地区进行放大（可能需要进行轻松过渡），以查看该国家/地区中每个州或省的案件数。假设我能够获取该国震中的确切坐标，那么我想加深那些部分的阴影，以使它在我们移向病例数较少的区域时会变浅。

在Flutter Web中可以吗？

我遇到了这个插件（感谢SO Openstreetmap in Flutter?上的该线程）

https://pub.dev/packages/flutter_map

，但没有明确表示它支持Flutter Web。

我尝试从OSM（开放式街道地图）中获取切片，并借助上述网站https://pub.dev/packages/flutter_map#open-street-map-provider中给出的示例在Flutter Web上显示这些地图

但是它并没有真正显示任何内容，可能是因为某个小部件或功能无法按预期工作。

根据您的经验，实现我所寻找的最佳方法是什么？

如果可能，请以一种答案的方式描述您，就像您是我自己并尝试做我正在做的事情。

Answer 1

Flutter_map不支持Flutter Web。

Answer 2

您可以查看下面的 Flutter Maps 小部件，它支持包括 Web 在内的所有平台。

https://pub.dev/packages/syncfusion_flutter_maps

关于您提到的要求，您可以尝试以下操作。

1. 通过根据点击位置动态改变焦点和缩放级别，可以实现缓动效果。

https://help.syncfusion.com/flutter/maps/zoom-pan#update-the-zoom-level-programmatically

2. 通过在平铺层顶部动态添加形状子层和该形状子层的颜色映射相结合，您可以实现这一点。

https://help.syncfusion.com/flutter/maps/shape-sublayer#shape-sublayer-on-tile-layer https://help.syncfusion.com/flutter/maps/shape#range-color-mapping