javascript - 动态 MySQL 查询以填充要在 MapBox GL-JS 中显示的 GeoJson 数据缓存

Question

我有一个 MySQL 数据库，其中包含大约 10,000 个地理点。

我还有一个在网页上运行的 Mapbox GL-JS map ，该 map 执行查询以获取数据，将其转换为 GeoJSON，然后绘制点。 Mapbox 可以轻松处理所有点。

但是，查询所有点很慢，所以我只好限制查询说500个点。我想出了如何使用 MBRContains 仅请求边界框内的点。

但现在，每次我通过拖动或缩放更改 map 的边界框时，我都必须请求整个边界框，即使部分数据可能已知。我相信一定有一种更聪明的方法可以做到这一点，即制作某种缓存并仅查询新数据。

我应该怎么做？请求所有数据的成本很高，所以我不能这样做，然后将其处理成 R 树。这就是为什么我还没有看到如何使用 Mapbox 中的这个解决方案的原因:geojson vt .但是，我知道所有的 map 应用程序，可能还有 Angular 色扮演游戏都需要一个算法。

那么，我该如何动态请求和加载我的数据呢？

Answer 1

动态矢量切片

理想情况下，您需要一种机制来生成和提供矢量图 block ，Mapbox-GL-JS 可以使用它。然后，所有关于只获取正确数据、缓存等的需求都会自动得到满足。

我不能推荐特定的工具，但看起来 TileStache 的“vector”提供程序可以连接到 MySQL。

静态矢量瓦片

如果您的数据不经常更改(例如，每小时或每天)，另一种方法是运行这样的批处理:

1. Dump data to GeoJSON
2. Use Tippecanoe to generate .mbtiles file
3. Serve .mbtiles file using something like Tessera.

合并 GeoJSON

使用您现有的堆栈，它似乎也不太复杂，可以简单地:

• 获取初始数据集，将其存储为点
• 本地图移动时，获取新数据集，将其合并为点
• 使用 map.getSource().setData() 显示合并后的数据集。

不完全是标准方法，但如果您能找到一种简单的方法来进行合并，则可以使用。