Google地图多边形会减慢浏览器速度

我有一个应用程序,绘制多边形的谷歌地图地图。 我使用angular的前端和一个NodeJS api服务我的多边形数据。

现在我每个加载约300个多边形,每个约有10000个纬线,但是我有数据分页,所以我只能渲染多边形总数的十分之一。 我在顶部使用了一个叫做Angular Google Maps的angular度模块,考虑到GitHub问题页面,项目本身似乎有点死了,但我不认为它真的很重要。

我已经将可编辑标志设置为false,但是即使仅显示了这些复杂的多边形之中的30个,浏览器似乎也放慢了很大一部分。 当我没有绘制多边形时,这不会发生。

我发现KML或Fusion表得到了很多推荐,但是我希望不需要改变我的数据,因为它的数量巨大。

有没有人有类似的问题?

我过去也遇到类似的问题。 首先,我想提一下,我没有使用任何Google Maps JS API封装器,如Angular Google Maps或NgMaps,因为我发现这些库不包含API的很多有用的function,或者做得不够有效。

我使用google.maps.Data 图层来显示多边形。 我发现这种方法有更好的性能,然后使用google.maps.Polygon 。 所以这是我的第一个build议,给data layer一个尝试,而不是正则多边形。 它不需要剧烈的数据转换,因为数据层具有addGeoJson(geoJsonObject)方法,并且由于您以latlngsforms存储数据,所以应该很容易从中生成GeoJSON Feature对象,它看起来像这样:

 { "type": "Feature", "properties": { ... }, "geometry": { "type": "Polygon", "coordinates": [ [lat1, lng1], [lat2, lng2], .. (your data) ] } } 

或者使用一些库来为你生成它。 data layer的优点是它提供了很多像自定义样式,鼠标事件交互等function。我build议你看看我的BoundariesExample例子,它利用Github 上提供的DataLayer或SO上的这个答案 。 (顺便说一下,你也可以像下面这样轻松地添加一个多边形到Data Layermap.data.add({geometry: new google.maps.Data.Polygon([coords])})但是我build议上面的方法,因为库我将在后面提及GeoJSON格式的工作)

不过,我在地图上显示了30多万个多边形,其中很多是非常复杂的。 所以,如果你仍然经历缓慢,我有一些更优化的build议给你:

1.在地图上显示之前,简化多边形。 也就是说,如果您不介意从多边形中移除某些顶点以换取更好的性能。 您可以将所有多边形添加到单个GeoJSON对象中,然后利用mapshaper实用程序使用专用algorithm ( 此处为交互式示例)简化它们。 我不确定该实用程序是否可以作为库包含在node.js项目中,因为我将它作为PHP的外部实用程序运行,但它可以非常快速地简化多边形。 300多边形,我怀疑你可以在飞行中做到这一点,或者当然你可以caching结果。 如果可以,请使用简化,因为它具有所有方法对性能最重要的影响。

2.合并多边形。 我发现减less多边形的数量(例如折叠成一个)可以提高性能。 如果你的多边形不必作为一个单独的实体存在(所以如果它们都可以被着色为相同的颜色,点击时显示相同的popup…),你可以合并它们。 mapshaperdissolve命令在这里帮助你。

3.添加多个数据图层并只加载(部分)在地图上可见的多边形。 因此,例如在更大的缩放级别(用户甚至不能看到数据提供的细节)时,可以使用方法1简化多边形,放大时隐藏上一级,并显示非简化的多边形,甚至部分)在您当前的地图视图中。 所以你将计算所有多边形的边界矩形,取当前地图视图的边界矩形,只加载那些重叠的矩形。 用户移动地图后,您可以获取其他地图。 当他们再次缩小时,隐藏较低的水平并显示较高的水平。 看起来,当数据层features (function是多边形,线条,点或这些的集合)被隐藏时,它们不会影响性能。

当然,你可以应用上述技术的组合。 你也可以利用FusionLayer ,但有一些限制(在文档中列出), Data层有更多的控制。