我有一个将多边形绘制到谷歌地图地图的应用程序。我使用 angular 作为前端，使用 NodeJS api 来提供我的多边形数据。
现在我加载了大约 300 个多边形，每个多边形大约有 10 000 个纬度坐标，但是我对数据进行了分页，所以我只渲染了多边形总数的十分之一。我在顶部使用了一个名为 Angular Google Maps 的 Angular 模块，考虑到 GitHub 问题页面，该项目本身似乎有点死，但我认为这并不重要。
我已将可编辑标志设置为 false，但即使在仅显示 30 个这些复杂多边形之后，浏览器似乎也会显着减慢速度。当我根本不绘制多边形时，不会发生这种情况。
我发现 KML 或 Fusion 表得到了很多推荐，但我希望不必转换我的数据，因为它数量庞大。
有人遇到过类似的问题吗？
【问题讨论】：
标签： javascript angularjs node.js google-maps google-maps-api-3
我过去曾解决过类似的问题。首先我想提一下，我没有使用任何 Google Maps JS API 包装器，例如 Angular Google Maps 或 NgMaps，因为我发现这些库没有包装 API 的很多有用功能，或者这样做效率低下。
我使用google.maps.Data layer 来显示多边形。我发现这种方法比使用google.maps.Polygon 具有更好的性能。所以这是我的第一个建议，试试data layer 而不是正多边形。它不需要剧烈的数据转换，因为数据层具有addGeoJson(geoJsonObject) 方法，并且由于您的数据形式为lat 和lngs，因此应该很容易从中生成GeoJSON Feature 对象，它会看起来像这样：
{
"type": "Feature",
"properties": { ... },
"geometry": {
"type": "Polygon",
"coordinates": [ [lng1, lat1], [lng2, lat2], .. (your data) ]
}
}
或者使用一些库为您生成它。 data layer 的优势在于它提供了许多功能，例如自定义样式、鼠标事件交互等。我建议您看一下我的 BoundariesExample 示例，该示例利用 DataLayer 提供的 Github 或这个answer on SO。 （顺便说一句，您也可以像这样轻松地将多边形添加到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.合并多边形。我发现减少多边形的数量（例如将它们合并为一个）可以提高性能。如果您的多边形不必作为单独的实体存在（因此，如果它们都可以用相同的颜色着色，则在单击时显示相同的弹出窗口......）您可以合并它们。 mapshaper 的dissolve 命令在这里为您提供帮助。
3.添加多个数据层并仅加载地图上可见的多边形（部分）。因此，例如在更大的缩放级别上，用户甚至无法看到您的数据提供的详细信息，您可以简化使用方法 1 的多边形，并在放大时隐藏上层并显示非简化多边形，并且仅显示那些（甚至部分）落在当前地图视图中的多边形。因此，您将为所有多边形计算边界矩形，获取当前地图视图的边界矩形并仅加载那些重叠的矩形。用户移动地图后，您可以获取其他地图。当他们再次缩小时，隐藏下层并显示上层。似乎当数据层features（特征是多边形、线、点或它们的集合）被隐藏时，它们不会影响性能。
当然，您可以应用上述技术的组合。您也可以利用FusionLayer，但这有一些限制（在docs 中列出），使用Data 层您有更多控制权。
【讨论】：