Question

我玩了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>

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

Answer 1

您的代码似乎很好。您可以尝试使用其中一个全局覆盖开关来强制使用画布绘制（L_PREFER_CANVAS）。参考页面上记录的“用例”似乎解决了您的确切问题：

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

<强> L_PREFER_CANVAS
强制Leaflet使用Canvas后端（如果可用于矢量图层而不是SVG。这可以增加在某些情况下表现相当显着（ 例如数千个圆圈地图上的标记 ）。

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

1 个答案: