Tengo cuatro archivos geoJson de 2 MB con cuatro capas para cargar como
LayerBoon = L.geoJSON.ajax(URL, {pointToLayer:returnBoonMarker, filter:filtertext});con una función de filtro y esta función de clic de botón
$("#btnFindText").click(function(){ SeachTXT = $("#txtFind").val(); LayerSt.refresh(); LayerPr.refresh(); LayerHL.refresh(); LayerBoon.refresh(); })cada capa tiene que volver a filtrar haciendo clic en el botón.
al filtrar, ¿es posible no recargar el archivo cada vez, guardarlo en caché y filtrarlo nuevamente?
La forma más fácil de hacer esto es usar fetch:
const api = 'json_boon.json'; async function fetchData(url) { try { const response = await fetch(url, { cache: "force-cache" }); const data = await response.json(); return data; } catch (err) { console.error(err); } }; fetchData(api) .then(data => { L.geoJson(data).addTo(map); });Agregué un parámetro adicional que obliga al navegador a almacenar en caché los archivos : "force-cache"
La primera descarga es normal y las siguientes se obtienen de la memoria caché del disco, una verificación conveniente de las herramientas de desarrollo.
Actualizar:
const geojsonOpts = { pointToLayer: function (feature, latlng) { return ... }, filter: function(feature, layer) { return ... } }; ["one", "two", "three", "four"].map((json) => { fetchData(`./${json}.json`).then((data) => { L.geoJSON(data, geojsonOpts).addTo(map); }); });