Google Maps Polygons会降低浏览器的速度

Question

我有一个应用程序可以将多边形绘制到Google地图上.我使用angular作为前端,使用NodeJS api来提供我的多边形数据.

现在我加载了大约300个多边形,每个大约有10 000个latlng coords,但是我将数据分页,所以我只渲染了多边形总数的十分之一.我在顶部使用一个名为Angular Google Maps的角度模块,考虑到GitHub问题页面,项目本身似乎有点死了,但我认为它并不重要.

我将可编辑标志设置为false,但即使只显示了这些复杂多边形中的30个,浏览器也似乎放慢了很多.当我根本不绘制多边形时,这不会发生.

我发现KML或Fusion表得到了很多推荐,但我希望不必转换我的数据,因为它的数量非常庞大.

有没有人有类似的问题？

Answer 1

我过去曾处理过类似的问题.首先,我想指出,我没有使用任何谷歌地图JS API封装类,如角谷歌地图或NgMaps,因为我发现这些库不裹了很多API的有用的功能或做,所以不力.

我正在使用google.maps.Data 图层来显示多边形.我发现这种方法比使用方法具有更好的性能google.maps.Polygon.所以这是我的第一个建议,data layer试一试,而不是常规的多边形.它不需要大量的数据转换,因为数据层有addGeoJson(geoJsonObject)方法,因为你有自己的数据形式,lat并且lngs应该很容易GeoJSON Feature从它生成一个对象,它看起来像这样:

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

或者使用一些库为您生成它.它的优点data layer是它提供了许多功能,如自定义样式,鼠标事件交互等.我建议你看看我的BoundariesExample例子,这是利用Github 上的DataLayer可用或SO上的答案.(顺便说一句,你也可以添加一个多边形来容易这样:但我建议上面的方法,因为我稍后会提到的库使用GeoJSON格式)Data Layermap.data.add({geometry: new google.maps.Data.Polygon([coords])})

我曾经在地图上显示超过30K的多边形,其中很多都非常复杂.因此,如果您仍然经历缓慢,我会为您提供更多优化建议:

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

2.Mage多边形.我发现减少多边形的数量(例如将它们折叠成一个)可以提高性能.如果您的多边形不必作为单独的实体存在(因此如果它们都可以用相同的颜色着色,则在单击时显示相同的弹出窗口...)您可以合并它们.mapshaper的dissolve命令是为了帮助你.

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

当然,您可以应用上述技术的组合.您也可以利用FusionLayer,但这带来了一些限制(在文档中列出),使用Data图层可以获得更多控制权.