地图中浏览器的最大svg元素数 [英] maximum number of svg elements for the browser in a map

问题描述

我正在创建一张带有传单和d3的地图。很多圈子将被绘制在地图上。在浏览器兼容性方面，浏览器可以呈现的svg元素数量有预期限制。然而，在用户体验方面，我更喜欢用户可以在地图上看到尽可能多的元素（否则用户可能需要不断放大和缩小，并需要等待ajax返回数据）。将有一些优化，我需要考虑（用户等待时间用户与服务器查询负载与浏览器可以处理的）。

I am creating a map with leaflet and d3. A lot of circles will be plotted on a map. In terms of browser compatibility, there is an expected limit of how many svg elements the browser can render. In terms of user experience however, I would prefer that the user can see as many elements on the map as possible (otherwise the user might need to zoom in and out constantly and would need to wait for the ajax to return data). There will be some optimisation that I need to consider (user waiting time user vs. server query load vs. what the browser can handle).

查看绘图，现在服务器返回的点数有一个限制，因此只填充了一部分地图。

See plot, there is a limit right now on the number of points that the server returns and thus only a portion of the map is filled.

>

浏览器无法处理完全填充的地图，用户也需要等待太长的服务器响应。

The browser cannot handle a fully filled map here and the user would need to wait too long for the server response as well.

我想我需要解决的问题需要解决两个问题：

I suppose the problem that I am faced with needs to be solved by answering two questions:

• 在平均浏览器能够处理的地图上的简单svg形状（圆形）数量方面是否有标准？


• 在地图上显示尽可能多的形状的最佳方法是什么？

我正在考虑以下几点，但我不确定是否会有帮助;

I'm considering the following points but I am unsure if it will help;

• 使用方形代替圆形


• 使用传单API代替D3

推荐答案

一般来说，你考虑的任何一点都不会有帮助。在这两种情况下，浏览器显示的处理量和信息大致相同。

Speaking in general terms, neither of the points you're considering will help. In both cases, the amount of processing to be done / information to display by the browser will be approximately the same.

关于第一个问题，不是我知道的。浏览器和平台之间存在巨大差异（尤其是如果您考虑使用移动设备），平均值几乎没有意义。此外，这是不断变化。我发现，大约1000个简单的形状通常不是一个问题。

Regarding your first question, not that I'm aware of. There are huge variations between browsers and platforms (especially if you consider mobile devices as well) and an average would be almost meaningless. Furthermore, this is changing constantly. I've found that up to about 1000 simple shapes are usually not a problem.

为了在地图上显示尽可能多的形状，我会将它们预渲染位图图块，然后使用单据API或类似d3.geo.tile（示例此处）以将其覆盖在实际地图上。这样，您可以轻松扩展到数百万分。

To show as many shapes as possible on the map, I would pre-render them into bitmap tiles and then use either the leaflet API or something like d3.geo.tile (example here) to overlay it on the actual map. This way you can easily scale to millions of points.

这篇关于地图中浏览器的最大svg元素数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！