使用层组传单生成 10,000 个性能良好的标记

Question

你好，我需要帮助我有一个应用程序需要生成 10k 个标记，但在客户想要地图上的所有点后我无法使用集群，我什至使用了一个库：https://github.com/eJuke/Leaflet.Canvas- 但是，它是有限的，不能使用我需要的资源，也不会在请求时删除标记。我发现的另一个选择是将所有内容都放在他做得很好的图层组中，但性能很糟糕我想知道我是否可以按照下面的代码提高我的性能

  var cm = dtMuc[3][0];
var x = 10;
var layerGroup = L.layerGroup().addTo(map);
for (var i=0; i < dtMuc[0].length; i++){
  if(cm == dtMuc[3][i]){
    url = L.icon({
      iconUrl:iconSet2G+x+".png",
      iconSize: [20,20],
      iconAnchor: [13,5],
      popupAnchor: [13,5]
    });
  }else{
    x = x+10;
    if(x == 100){
      x = 10;
    }
    cm = dtMuc[3][i];
  }
  option = {icon:url, title:dtMuc[0][i], draggable: false};
  latlng = [dtMuc[1][i],dtMuc[2][i]];
    marker = L.marker(latlng, option, {
    renderer: myRenderer,
  });
  arMuc[i] = marker;
  var  mclick = function  (e){
    nMuc = this.options.title;
    alert(nMuc);
  }
    arMuc[i].on('click', mclick);
    layerGroup.addLayer(arMuc[i]);
}

var overlay = {'markers': layerGroup}; L.control.layers(null, overlay).addTo(地图);

Answer 1

我无法真正理解您的代码，但提高性能的步骤是：

使用命名函数而不是匿名函数，这样函数只定义一次，然后对每个元素重复使用 (mclick)。
批量生成web worker内的标记
我想并非所有 10k 标记都一次可见，因此首先开始生成可见（中心）标记，然后生成以下一次并实施隐藏 none 可见标记的策略。

Answer 2

无需过多了解您可以在其他地方找到的细节，我认为您需要计划做的是获取并填充仅“'nearby' 到现在 map-center。（也就是说，“在当前 visible 地图范围之内，以及一些舒适的距离之外。）

然后，如果用户重定位 map-center 或 visible-boundaries，使用某种 AJAX 调用来获取新的marker-list 并即时替换它。（设置一个“微调器”cursor-icon 以在您执行此操作时提示用户。）

当然，这与地图软件本身用来描绘“无限”地图的技术非常相似。

使用层组传单生成 10,000 个性能良好的标记

Generate 10,000 markers with good performance with layer group leaflet

javascript

php

jquery

openstreetmap

leaflet