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

【问题标题】：Generate 10,000 markers with good performance with layer group leaflet使用图层组传单生成 10,000 个性能良好的标记
【发布时间】：2020-12-14 09:55:43
【问题描述】：

您好，我需要帮助是有限的，不能使用我需要的资源，也不会在请求时删除标记。我发现的另一个选择是将所有内容放在他做得很好但性能很糟糕的图层组中我想知道我是否可以按照下面的代码提高我的性能

  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(map);

【问题讨论】：

标签： javascript php jquery leaflet openstreetmap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

没有过多了解其他地方可以找到的细节，我认为您需要计划做的是获取和填充仅“当前地图‘附近’的标记-center。（也就是说，“在当前可见地图范围之内，以及一些舒适的距离之外。）

然后，如果用户显着重新定位地图中心或可见边界，请使用某种 AJAX 调用来获取新的标记列表并即时替换它。（在您执行此操作时，放置一个“微调器”光标图标以提示用户。）

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

【讨论】：