如何在 Google 地图上显示自定义矢量图块

Question

目标是在谷歌地图上显示大量数据。大量我的意思是存储在 PostgreSQL 数据库中的大约 1000 万个段。线段代表道路的一些特征，因此线段应该覆盖在底图中的道路上。段属性可能会随着时间而改变。

这个问题最好的技术解决方案是使用自定义的tile server（如有错误请指正）。

根据 Google Maps JS API，我发现了两种使用自定义图块服务器绘制地图的方法：

• 使用 GeoJson/KML 数据 ( https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson )
• 使用 PNG 图像（https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes）

我都试过了。第一个不符合我的需求，因为 GeoJson 显得太大，导致性能问题。从用户体验的角度来看，第二个是不好的，因为它使用的是光栅图块，而现在我们应该使用矢量图块。我还查看了 OpenLayers / Leaflet，但没有找到使用 Google 地图的官方方法（请参阅https://github.com/mapbox/mapbox-gl-js/issues/1791）。

这里的关键是使用矢量切片，但是我无法在 Google 地图上渲染矢量切片 (MVT)。

有什么方法可以在 Google Maps Platform 上渲染矢量切片？

Answer 1

我已经联系了 Google Maps Platform 支持，他们建议我使用Deck.gl。

它是一种在地图上显示大量数据集的技术，包括谷歌地图。它使用官方的 Google Maps API进行渲染，尤其是OverlayView.

这里有一篇关于谷歌地图和deck.gl 的好博文：https ://cloud.google.com/blog/products/maps-platform/high-performance-data-visualizations-google-maps-platform-and-deckgl

我已经设法使用 angular 在 Google 地图上显示自定义矢量切片，这里是示例存储库：https : //github.com/yterletskyi/deckgl-angular

顺便说一句，感谢 LuisTavares 关于https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer库的解决方案，它也依赖于此OverlayView。我还没有尝试过，但方法与deck.gl 中的方法相同，因此应该没有任何问题。

更新：

在玩过dec​​k.gl 之后，问题转向在移动iOS 和Android 平台上实现它。经过一番研究，我联系了 Google 支持，但不幸的是似乎没有解决方案。谷歌支持报价：

你好尤拉，

不幸的是，无法使用移动 API 渲染矢量切片。对于允许您使用 Google Maps API 执行此操作的服务，我也没有任何建议。

我很抱歉，