google-maps - 如何在 Google map 上显示自定义矢量图 block

Question

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

此问题的最佳技术解决方案是使用自定义磁贴服务器(如有错误请更正)。

根据 Google Maps JS API，我发现了两种使用自定义图 block 服务器在 map 上绘制的方法:

使用 GeoJson/KML 数据 (https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson)

使用 PNG 图片 (https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)

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

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

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

Answer 1

我已获得 Google Maps Platform 支持，他们建议我使用 deck.gl .

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

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

我已经设法使用角度在谷歌地图上显示自定义矢量瓷砖，这里是示例 repo :
https://github.com/yterletskyi/deckgl-angular

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

升级版:

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

Hello Yura,

Unfortunately there is no way to render vector tiles with the mobile APIs. I also have no recommendations for services that allow you to do this with the Google Maps API.

My apologies,