带有角度2的传单的表现

Question

我试图在传单地图上加载很多标记

使用这种方法：

L.marker([item.latitude, item.longitude]).addTo(this.map);

我至少循环了100个标记，之后地图变得非常滞后。

有没有办法优化我想要显示很多标记的地图？

Answer 1

我已成功将ngx-leaflet-markercluster与ngx-leaflet一起使用来显示4000个标记。该插件结合使用集群标记和常规标记，这些标记会在特定缩放级别动态显示。

插件还具有相同坐标的蜘蛛标记。

它与Angular 8一起很好地工作。

ngx-leaflet-markercluster使用leaflet.markercluster，看起来像这样：

Answer 2

在我看来，聚类标记是处理性能问题的最佳方法。由于在您的情况下没有解决方案，您可以先将所有标记放在一个图层中，然后将该单个图层添加到地图中，而不是将所有标记单独添加到地图中，从而提高性能。

您可以在此处比较效果：

添加分组到地图的示例：http://jsfiddle.net/HarolddP/g12vj3mt/2/

单独添加到地图的示例：http://jsfiddle.net/HarolddP/euz7f6o2/

建议的改进：

    var map = L.map('map').setView([51.5, -0.09], 3);    
    var markers = [];
    for (var i=0; i<500; i++){
      lat = ..; lng = ..;
      marker = new L.marker([lat, lng]);
      markers.push(marker);
     }
    markerGroup = L.layerGroup(markers);
    markerGroup.addTo(map);

另一个建议的解决方案是仅将地图上的标记添加到视图的边界。

您可以想象，性能还取决于您使用的是哪种标记。它们的尺寸大吗？正如您在示例中所看到的，500个标准的传单标记仍然表现得非常好（在我的机器上）。