Leaflet 大 GeoJson 文件 Ajax 过滤器最佳性能

Question

我有四个 2MB 的 geoJson 文件，需要加载四个图层

LayerBoon = L.geoJSON.ajax(URL, {pointToLayer:returnBoonMarker, filter:filtertext}); 

带有过滤功能和此按钮点击功能

$("#btnFindText").click(function(){
    SeachTXT = $("#txtFind").val();
    LayerSt.refresh();
    LayerPr.refresh();
    LayerHL.refresh();
    LayerBoon.refresh();
})

每个图层都必须通过单击按钮重新过滤。

过滤时，是否可以不每次都重新加载文件，保留在缓存中，再过滤一次？

Answer 1

最简单的方法是使用 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);
  });

我添加了一个额外的参数，强制浏览器缓存文件cache: "force-cache"

第一次下载正常，下一次从磁盘缓存中获取，方便检查开发工具。

更新：

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);
  });
});