Google地图多边形会减慢浏览器速度 [英] Google Maps Polygons slowing down the browser

问题描述

我有一个将多边形绘制到Google Maps地图的应用程序。我使用angular作为前端和一个NodeJS api来为我的多边形数据服务。现在我加载大约300个多边形，每个大约有10000个纬线坐标，但是我有数据分页，所以我只能渲染多边形总数的十分之一。我使用名为的角模块，项目本身似乎有点死了，考虑到GitHub问题页面，但我认为它并不重要。

我已将可编辑标志设置为false，但是甚至在仅显示这些复杂多边形中的30个之后，浏览器似乎减慢了大量数据。当我没有绘制多边形时，并不会发生这种情况。

我发现KML或Fusion表格会得到很多推荐，但我希望不必转换我的数据，因为它的数量巨大。

有没有人有类似的问题？

解决方案

过去，我解决了类似的问题。首先，我想提一提的是，我没有使用任何Google Maps JS API封装器，如Angular Google Maps或NgMaps，因为我发现这些库不会封装API的很多有用功能，也可能无效。

我使用 google.maps.Data layer 来显示多边形。我发现这种方法比使用 google.maps.Polygon 具有更好的性能。所以这是我的第一个建议，给出数据层试试，而不是正多边形。它不需要剧烈的数据转换，因为数据层有 addGeoJson（geoJsonObject）方法，并且您的数据的格式为 lat 和 lngs 它应该很容易从它生成一个 GeoJSON Feature 对象，它会看起来像像这样：

  {
type：Feature，
properties：{。 ..}，
geometry：{
type：Polygon，
coordinates：[[lat1，lng1]，[lat2，lng2]，..（数据）] 
} 
} 
  

或者使用一些库来生成它您。 数据层的优点在于它提供了很多功能，例如定制样式，鼠标事件交互等。我建议你看看我的 BoundariesExample 利用 DataLayer 的例子 Github 或者回答这个。 （顺便说一句，您还可以像下面这样轻松添加一个多边形到数据层： map.data.add（{geometry：new google.maps .Data.Polygon（[coords]）}）但是我建议上面的方法，因为我会在后面提到GeoJSON格式的图书馆）



不过，我在地图上显示了30多万个多边形，其中很多都非常复杂。所以，如果您仍然遇到缓慢，我为您提供了一些更优化的建议：





1.在显示地图之前简化多边形。 ，如果您不介意从多边形中移除某些顶点以换取更好的性能。您可以将所有多边形添加到单个GeoJSON对象中，然后使用 mapshaper 实用工具将它们简化为< a href =https://github.com/mbloch/mapshaper/wiki/Command-Reference#-simplify =nofollow noreferrer>特殊算法（交互式示例 here ）。我不确定该实用程序是否可以作为库包含在 node.js 项目中，因为我是从PHP运行它作为外部实用程序的，但它可以非常快速地简化您的多边形。有300多个多边形，我怀疑你将能够在飞行中做到这一点，或者当然你可以缓存结果。如果可以的话，尽量使用简化，因为它具有所有方法对性能的最显着影响。

2.合并多边形。我找到了减少多边形的数量（例如折叠为一个）可以提高性能。如果您的多边形不必作为单独的实体存在（因此，如果它们都可以用相同的颜色着色，点击时显示相同的弹出窗口...），您可以合并它们。 mapshaper 的 dissolve 命令可以帮助您。

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

当然，您可以应用上述技术的组合。您还可以利用 FusionLayer ，但会带来一些限制（列在 docs ），使用 Data 图层可以更好地控制。

I have an application which draws polygons to a Google Maps map. I use angular for the front end and a NodeJS api to serve my polygon data.

Right now I load around 300 polygons with around 10 000 latlng coords each, but I have the data paginated so I'm only rendering one tenth of the total amount of polygons. I use an angular module on top called Angular Google Maps, the project itself seems a bit dead, considering the GitHub issues page, but I don't think it really matters.

I've set the editable flag to false, but even after only displaying 30 of these complex polygons the browser seems to slow down a significant amount. This does not happen when I don't draw the polygons at all.

I've found that KML or Fusion tables get recommended a lot, but I would like to hopefully not have to transform my data because of the sheer massive amount of it.

Has anyone had a similar issue?

解决方案

I tackled a similar issue in the past. First I want to mention that I didn't use any Google Maps JS API wrappers like Angular Google Maps or NgMaps, because I find these libraries don't wrap a lot of useful functionality of the API or do it so ineffectively.

I was using google.maps.Data layer to display polygons. I find this approach having better performance than using google.maps.Polygon. So that's my first advice you, give data layer a try instead of regular polygons. It doesn't require drastic data transformations, as the data layer has addGeoJson(geoJsonObject) method and since you have your data in form of lat and lngs it should be easy to generate a GeoJSON Feature object from it, it would look something like this:

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

Or use some library to generate it for you. The advantage of data layer is that is it provides a lot of features like custom styling, mouse events interaction, etc. I suggest you to take a look at my BoundariesExample example which is leveraging DataLayer available on Github or this answer on SO. (By the way, you can also add a polygon to Data Layer easily like this: map.data.add({geometry: new google.maps.Data.Polygon([coords])}) but I suggest the above approach since libraries I will mention later work with GeoJSON format)

I was though, displaying over 30K polygons on map, a lot of them were very complicated. So if you still experience slowness, I have some more optimalization advices for you:

1.Simplify polygons before displaying them on map. That is, if you don't mind removing some vertices from your polygons in exchange for better performance. You can add all your polygons into a single GeoJSON object, and then leverage mapshaper utility to simplify them using specialised algorithms (interactive example here). I am not sure if the utility can be included as library in node.js project, since I was running it as external utility from PHP, but it can simplify your polygons very fast. With 300 polygons, I suspect you will be able to do this on the fly, or of course you can cache the results. Use simplification if you can, since it has of all methods the most significant impact on performance.

2.Merge the polygons. I have found out that reducing number of polygons (collapsing them to one for example) improves performance. If your polygons doesn't have to exist as a separate entities (so if they can all be colored the same color, display the same popup on click...) you can merge them. mapshaper's dissolve command is here to help you.

3.Add multiple data layers and load only polygons (partially) visible on map. So for example on bigger zoom levels, where user cannot even see such detail as your data provide, you can simplify polygons using method 1, and when zoomed in, hide the upper level and display non-simplified polygons, and only those which fall (even partially) within your current map view. So you will calculate bounding rectangles for all your polygons, take bounding rectangle of current map view and load only those which overlap. After user moves the map, you can fetch the other. When they zoom out again, hide the lower level and display the upper level. It seems that when data layer features (feature is a polygon, line, point, or collection of those) are hidden they don't affect performance.

Of course you can apply combination of above techniques. Also you can leverage FusionLayer, but that comes with some limitations (listed in the docs), with Data layer you have more control.

这篇关于Google地图多边形会减慢浏览器速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！