我过去处理过类似的问题。首先我想提一下,我没有使用任何 Google Maps JS API 包装器,例如 Angular Google Maps 或 NgMaps,因为我发现这些库没有包装 API 的许多有用功能,或者做得效率低下。
我正在使用google.maps.Data
layer https://developers.google.com/maps/documentation/javascript/datalayer#sample_geojson显示多边形。我发现这种方法比使用方法具有更好的性能google.maps.Polygon
。所以这是我给你的第一个建议data layer
尝试代替正多边形。它不需要剧烈的数据转换,因为数据层已经addGeoJson(geoJsonObject)
方法,因为您的数据形式为lat
and lngs
应该很容易生成GeoJSON Feature
对象,它看起来像这样:
{
"type": "Feature",
"properties": { ... },
"geometry": {
"type": "Polygon",
"coordinates": [ [lng1, lat1], [lng2, lat2], .. (your data) ]
}
}
或者使用一些库为您生成它。优点data layer
就是它提供了很多功能,比如自定义样式、鼠标事件交互等。我建议你看看我的BoundariesExample
正在利用的示例DataLayer
可用于Github https://github.com/matej-pavla/Google-Maps-Examples或这个回答SO https://stackoverflow.com/questions/10888958/country-boundries-using-google-map-api-v3/37092260#37092260。 (顺便说一句,您还可以添加一个多边形Data Layer
很容易像这样:map.data.add({geometry: new google.maps.Data.Polygon([coords])})
但我建议采用上述方法,因为我稍后会提到使用 GeoJSON 格式的库)
我当时在地图上显示了超过 30K 的多边形,其中很多都非常复杂。因此,如果您仍然遇到缓慢的情况,我有一些更多的优化建议给您:
1.在地图上显示多边形之前先简化多边形。也就是说,如果您不介意从多边形中删除一些顶点以换取更好的性能。您可以将所有多边形添加到单个 GeoJSON 对象中,然后利用地图塑造者 https://github.com/mbloch/mapshaper使用实用程序来简化它们专门的算法 https://github.com/mbloch/mapshaper/wiki/Command-Reference#-simplify(互动示例here https://bost.ocks.org/mike/simplify/)。我不确定该实用程序是否可以作为库包含在node.js
项目,因为我将它作为 PHP 的外部实用程序运行,但它可以非常快速地简化您的多边形。对于 300 个多边形,我怀疑您将能够即时执行此操作,或者当然您可以缓存结果。如果可以的话,请使用简化,因为它是所有方法中对性能影响最大的。
2.合并多边形。我发现减少多边形数量(例如将它们压缩为一个)可以提高性能。如果您的多边形不必作为单独的实体存在(因此,如果它们都可以着色为相同的颜色,则单击时显示相同的弹出窗口...),您可以合并它们。mapshaper
's dissolve
命令可以帮助您。
3.添加多个数据层并仅加载地图上(部分)可见的多边形。因此,例如在更大的缩放级别上,用户甚至无法看到数据提供的详细信息,您可以使用方法 1 简化多边形,并在放大时隐藏上层并显示非简化的多边形,并且仅显示那些落在 (甚至部分)在您当前的地图视图中。因此,您将计算所有多边形的边界矩形,获取当前地图视图的边界矩形并仅加载重叠的边界矩形。用户移动地图后,您可以获取另一个地图。当它们再次缩小时,隐藏较低级别并显示较高级别。看来当数据层features
(特征是多边形、线、点或它们的集合)被隐藏,它们不会影响性能。
当然,您可以组合应用上述技术。您还可以利用FusionLayer
,但这有一些限制(列在docs https://developers.google.com/maps/documentation/javascript/fusiontableslayer#limits), with Data
层你有更多的控制权。