我有一个应用程序可以将多边形绘制到Google地图上。我使用angular作为前端，使用NodeJS api来提供我的多边形数据。
现在我加载了大约300个多边形，每个大约有10 000个latlng coords，但是我将数据分页，所以我只渲染了多边形总数的十分之一。我在顶部使用一个名为Angular Google Maps的角度模块，考虑到GitHub问题页面，项目本身似乎有点死了，但我认为它并不重要。
我已将可编辑标志设置为false，但即使仅显示其中30个复杂多边形，浏览器似乎也会减慢很多。当我根本不绘制多边形时，这不会发生。
我发现KML或Fusion表格得到了很多推荐，但我希望不必转换我的数据，因为它的数量非常庞大。
有没有人有类似的问题？
答案 0 :(得分：8)
我过去曾处理过类似的问题。首先，我想提一下，我没有使用像Angular Google Maps或NgMaps这样的任何Google Maps JS API包装器，因为我发现这些库没有包含API的许多有用功能，或者做得如此无效。
我使用google.maps.Data layer来显示多边形。我发现这种方法比使用google.maps.Polygon具有更好的性能。这是我的第一个建议，试试data layer而不是常规多边形。它不需要大量的数据转换，因为数据层具有addGeoJson(geoJsonObject)方法，并且由于您的数据格式为lat和lngs，因此生成{{1}应该很容易来自它的对象，它看起来像这样：
GeoJSON Feature或者使用一些库为您生成它。 {
"type": "Feature",
"properties": { ... },
"geometry": {
"type": "Polygon",
"coordinates": [ [lat1, lng1], [lat2, lng2], .. (your data) ]
}
}
的优势在于它提供了许多功能，如自定义样式，鼠标事件交互等。我建议您查看我的data layer示例，该示例正在利用BoundariesExample可在Github或此answer on SO上找到。 （顺便说一下，您也可以像DataLayer一样轻松地向Data Layer添加多边形：map.data.add({geometry: new google.maps.Data.Polygon([coords])})但我建议使用上面的方法，因为我稍后会提到的库使用GeoJSON格式）
我曾经在地图上显示超过30K的多边形，其中很多都非常复杂。因此，如果您仍然经历缓慢，我会为您提供更多优化建议：
1.在地图上显示多边形之前简化多边形。也就是说，如果您不介意从多边形中移除一些顶点以换取更好的性能。您可以将所有多边形添加到单个GeoJSON对象中，然后使用mapshaper实用程序使用specialised algorithms（交互式示例here）来简化它们。我不确定该实用程序是否可以作为库包含在node.js项目中，因为我将它作为PHP的外部实用程序运行，但它可以非常快速地简化您的多边形。有300个多边形，我怀疑你可以动态地执行此操作，或者当然可以缓存结果。如果可以，请使用简化，因为它对所有方法都有最重要的影响。
2.Mage the polygons。我发现减少多边形的数量（例如将它们折叠为一个）可以提高性能。如果您的多边形不必作为单独的实体存在（因此如果它们都可以用相同的颜色着色，则在单击时显示相同的弹出窗口...）您可以合并它们。 mapshaper的{{1}}命令随时为您提供帮助。
3.添加多个数据图层并仅在地图上加载（部分）可见的多边形。因此，例如在较大的缩放级别上，用户甚至无法看到数据提供的详细信息，您可以简化使用方法1的多边形，并且在放大时，隐藏上层并显示非简化多边形，以及仅在当前地图视图中落下（甚至部分）的多边形。因此，您将计算所有多边形的边界矩形，获取当前地图视图的边界矩形并仅加载重叠的那些。用户移动地图后，您可以获取另一个。当它们再次缩小时，隐藏较低级别并显示较高级别。似乎当数据层dissolve（要素是多边形，线，点或它们的集合）被隐藏时，它们不会影响性能。
当然，您可以应用上述技术的组合。您也可以利用features，但这有一些限制（在docs中列出），FusionLayer图层可以让您拥有更多控制权。