Leaflet 使用传单显示大量图像覆盖时Chrome Bug的解决方法

在Chrome/Chrome的最新版本中，当显示大量重叠图像覆盖时，存在一个错误。（见：）

不幸的是，我们的应用程序当前显示图像覆盖的方式显示了这个问题。虽然我们希望它最终能在Chrome上得到修复，但与此同时，我们一直在努力寻找解决这个问题的方法

我们已经尝试设置L_DISABLE_3D=false，这修复了当前的问题，但随后导致地图上的弹出窗口出现其他问题，并将其放大到较低的级别，这两个问题我们都无法纠正

我们已尝试调整限制，但这似乎也没有影响问题

我们已经考虑过制作更小的覆盖，但这只会将问题转移到略高的缩放级别，并对我们的应用程序产生很大影响

我们也考虑过限制缩放级别，但这可能是我们的客户无法接受的，但我们将继续调查

查看传单文档的其余部分，似乎没有提供任何其他会影响这一点的设置。我们错过什么了吗

导致问题的代码示例如下：（摘自Chrome bug报告：）

var mymap=L.map（'simplemap'{
动物控制：错误，
中间：[0,0]，
缩放：2，
最大缩放：8，
minZoom:2，
属性控制：false，
最大界限：[
[-90, -180],
[90, 180]
]
});
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
maxZoom:18，
id:“地图盒/街道-v11”
}).addTo（mymap）；
var pane=mymap.createPane（'red'）；
var imageOverlays=L.layerGroup（）；
for（设i=0；i<200；i++）{
L.imageOverlay（“http://www.clker.com/cliparts/X/9/P/m/2/g/transparent-red-circle.svg，新L.LatLng边界（新L.LatLng（0,0），
新L.LatLng（50150））{
窗格：“红色”
}).addTo（图像覆盖）；
}
添加图层（imageOverlays）；

var mymap = L.map('simplemap', {

  zoomControl: false,
  center: [0, 0],
  zoom: 2,
  maxZoom: 8,
  minZoom: 2,
  attributionControl: false,
  maxBounds: [
   [-90, -180],
   [90, 180]
  ]
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  id: 'mapbox/streets-v11'
}).addTo(mymap); 


var pane = mymap.createPane('red');
var imageOverlays = L.layerGroup();

for (let i = 0; i < 200; i++) {

   L.imageOverlay("http://www.clker.com/cliparts/X/9/P/m/2/g/transparent-red-circle.svg", new L.LatLngBounds(new L.LatLng(0, 0),
    new L.LatLng(50, 150)), {
    pane: 'red'
  }).addTo(imageOverlays);

}

mymap.addLayer(imageOverlays);