Как использовать один объект L.Shapefile / zip file, но изменить onEachFeature для каждого слоя?

Question

Текущая проблема, с которой я сталкиваюсь, состоит в том, что у меня есть несколько слоев листов, которые содержат файл формы. Каждый слой листов представляет отдельный набор данных на основе некоторой переменной и соответственно меняет цвета.

Я могу заставить это работать, если я создаю три отдельных объекта (L.shapefile ("", {}) ...) и помещаю каждый в соответствующий слой. Проблема в том, что мой шейп-файл довольно большой и составляет 12 МБ. Когда я делаю это таким образом, он загружает файл 3 раза.

Как мне go загрузить файл 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 readme :

использование:

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

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

Таким образом, можно указать любой URL-адрес для шейп-файл, или и ArrayBuffer с содержимым сжатого шейп-файла.

Итак, теперь возникает вопрос: как создать arrayBuffer внешнего файла ? Есть несколько подходов, но я неравнодушен к функциональности fetch API и 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);
});