如何使用一个L.Shapefile/zip文件对象，但更改每个图层的onEach功能?

Question

我当前遇到的问题是我有多个包含形状文件的图块图层。每个切片图层表示基于某个变量的不同数据集，并相应地更改颜色。

如果我创建三个单独的对象(L.shapefile("， {}(...(，我可以让它工作。并将每个放入其相应的图层中。问题是我的形状文件相当大，只有 12MB。当我这样做时，它会下载文件 3 次。

我将如何下载一次zip文件，然后从该下载中创建3个实例？

shpfile = new L.Shapefile('/mydata/shpfile.zip', {
onEachFeature: function (feature, layer) {
console.log(feature, layer)
if (feature.properties) {
var data_name = feature.properties.Name;
val = -1
if (data)
val = data[days+'DAY']
if (val==-1)
val="No Data";
var tooltip_Html = data_name + "<hr>" + days + " " + val;
layer.bindPopup(tooltip_Html, {
maxHeight: 200
});
layer.prop = {data_name , days};
layer.setStyle({fillColor : getColor(val), 
color: "black",
weight: 1,
opacity: 1,
fillOpacity: 0.3
});
layer.on("click", layerClick);
if (vw>768) {
layer.on("mouseover", function () {
info.update(layer.prop);
layer.bindTooltip('<b>'+layer.prop.loc + '</b> Name<br>' + layer.prop.val);
});
layer.on("mouseout", function () {
info.update();
});
}
}
}});
shpfile.once("data:loaded", function() {
console.log("Shape File Downloaded! "+ days + ' days');
/* Tried this method of creating oneachfeature dynamically 
shpfile.onEachFeature(function(feature, layer) {
var layerName;
});
*/
});
L.tileLayer(mapboxUrl, {id: 'mapbox.streets', attribution: mbAttr}).addTo(shpfile)```

Answer 1

让我引用 Leaflet.shapefile 自述文件：

用法：

new L.Shapefile(arrayBuffer or url[,options][,importUrl]);
L.shapefile(arrayBuffer or url[,options][,importUrl]);

因此，可以提供形状文件的 URL，也可以提供包含压缩形状文件内容的ArrayBuffer。

所以现在的问题是：如何创建外部文件的arrayBuffer？有几种方法，但我偏爱fetchAPI 和Response.arrayBuffer()功能，例如

fetch(url)
.then(function(response){
return response.arrayBuffer();
}).then(function(buf){
L.shapefile(buf, options1).addTo(map);
L.shapefile(buf, options2).addTo(map);
L.shapefile(buf, options3).addTo(map);
});