Browser 覆盖瓷砖层过多的传单

我正在做一个传单地图，需要有太多的其他地图覆盖（超过200！！）。以与以下类似的方式添加：

var myBasemap = L.tileLayer(basemap_url/{z}/{x}/{y}.png, {minZoom: 0, maxZoom: 10});
map = L.map('mymap', {
    layers: [myBasemap ],
}).setView([0, 0], 2);

var myLayer_1 = L.tileLayer(url/{z}/{x}/{y}.png, {})
map.addLayer(myLayer_1)

var overlayMaps = {
    "map_id1": myLayer_1,
    "map_id2": myLayer_2,
    "map_id3": myLayer_3,
    .....
    .....
    .....
}

L.control.layers({}, overlayMaps , {collapsed: false}).addTo(map);

事实上，叠加的地图实际上是透明的PNG，可以向底图添加不同的内容。此外，每个叠加不是一个单独的图像，而是一个金字塔或多个图像

打开的图层越多，网页的速度就越慢。同时在地图上显示所有200层会使网页的缩放/平移速度太慢。事实上，当您开始在地图上激活超过10或15层时，性能会下降。我猜这是因为浏览器试图同时下载传单所需的所有覆盖的所有小JPG或PNG

我完全控制着底图和所有的覆盖图。我生成图像金字塔

请问有人做过类似的事情吗？有解决办法吗

在自己的域名上（可能在aws、谷歌云或类似的网站上）托管每一个覆盖软件听起来合理吗

在所附的片段中，我尝试演示浏览器在一个过于简化的情况下变得多么沉重，在这种情况下，我创建了一个以基本平铺层为背景的地图，然后我使用相同的平铺层创建了100个叠加，这些叠加作为叠加添加到地图上

如前所述，在现实生活场景中，我的覆盖图彼此不同（与底图也不同），它们是透明的PNG，为网页添加了不同的功能/内容

html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
字体系列：无衬线；
}
#我的地图{
宽度：100%；
身高：100%；
}
var minZoom=0，
maxZoom=8；
var background_map=L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，{minZoom:minZoom，maxZoom:maxZoom}）；
map=L.map（'mymap'{
图层：[背景地图]，
属性控制：false，
}).setView（[0,0]，2）；
//创建一个字符串数组
var特征=[]；
var N=100；
对于（变量i=0；i{
Layers_dict[name]=L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
minZoom:minZoom，
maxZoom:maxZoom
});
});
//现在将每个平铺层添加到地图
features.forEach（d=>{
map.addLayer（图层名称[d]）
})

一个可能的选项是使用“单一瓷砖层”<像这样的

另一个选项是在tileUrl中使用子域，但这更适合在服务器上进行优化

此外，如果您有权访问服务器上的互动程序。您可以使用nodejs+express、python+flask或其他方式加入png。 例如，在客户端，您有一个

L.tileLayer('http://YOUR_DOMAIN?z={z}&x={x}&y={y}&layers=1,2,3,4,5,6...')

其中“层=1,2,3,4,5,6”是某个层标识符。然后服务器处理请求。按ID顺序连接图像，并仅返回一个平铺。 或者，如果服务器上没有磁贴，也可以有一层。在服务器端，您可以请求平铺服务，下载并加入PNG，就像我之前写的那个样