Leaflet.js與矢量圖層非常緩慢

我玩過leaflet.js，發現它很慢，包含大約200個圓圈的簡單矢量圖層。第一次加載頁面需要幾秒鐘的時間，這或多或少不可能縮放或滾動地圖，頁面的反應非常慢。正如我看過更復雜的單張示例，我敢肯定我做錯了什麼。這裏我的測試頁的代碼：Leaflet.js與矢量圖層非常緩慢

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <link 
     rel="stylesheet" 
     href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" 
     /> 
    </head> 
    <body> 
    <div id="map" style="width: 1100px; height: 550px"></div> 
    <script 
     src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> 
    </script> 
    <script> 

var points = [ 
[ 48.538385 , 11.166186 ], 
... 
]; 
     var map = L.map('map').setView([51.0, 10.20], 6); 
     mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'; 
     L.tileLayer(
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     attribution: 'Map data &copy; ' + mapLink, 
     maxZoom: 16, 
     }).addTo(map); 

    for (var i = 0; i < points.length; i++) { 
    var c = L.circle([points[i][0], points[i][1]], 20); 
    c.addTo(map); 
     } 
    </script> 
    </body> 
</html>

任何想法是什麼可能導致問題？

來源

2014-05-19 Thomas W.

你的代碼看起來不錯。您可以嘗試使用全局覆蓋開關之一強制繪製畫布（L_PREFER_CANVAS）。這就是參考頁上記載的「用例」似乎解決您的具體問題：

來源：http://leafletjs.com/reference.html#global

L_PREFER_CANVAS
部隊單張使用畫布後端（如果可用）代替SVG的矢量圖層。這可以在某些情況下顯着提高性能（例如，在地圖）上的例如數千個圓圈標記。

來源

2014-05-20 07:39:13 psousa

感謝您的提示！這解決了這個問題。 –

哇！這確實使事情變得更快！ – Richard

請注意，此開關現在是地圖的一部分，而不是全局「開關」。 – trysis

Leaflet.js與矢量圖層非常緩慢

回答

相關問題