带矢量图层的Leaflet.js非常慢

Question

带矢量图层的Leaflet.js非常慢

Tho*_* W. 13 javascript performance leaflet

我玩了leaflet.js,发现它很慢,只有一个包含大约200个圆圈的简单矢量图层.第一页加载需要几秒钟,并且或多或少无法缩放或滚动地图,页面的反应速度令人难以置信.正如我已经看到更复杂的传单示例,我很确定我做错了什么.这是我的测试页面的代码:

<!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>

Run Code Online (Sandbox Code Playgroud)

知道什么可能导致问题吗？

Answer 1

pso*_*usa 19

你的代码似乎很好.您可以尝试使用其中一个全局覆盖开关来强制使用画布绘制(L_PREFER_CANVAS).参考页面上记录的"用例"似乎解决了您的确切问题:

来自:http://leafletjs.com/reference.html#global

L_PREFER_CANVAS
强制Leaflet将Canvas后端(如果可用)用于矢量图层而不是SVG.在某些情况下,这可以显着提高性能(例如,地图上有数千个圆形标记).

谢谢你的暗示!这解决了这个问题. (2认同)
请注意，此开关现在是地图的一部分，而不是全局“开关”。 (2认同)

归档时间：	11 年，3 月前
查看次数：	8273 次
最近记录：	11 年，3 月前