地图中浏览器的最大 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屋！