問題描述

我正在使用傳單和 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 元素數的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！