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"

第一次下载正常，后面的都是从磁盘缓存中获取，方便检查devtools。

更新：

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

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

Leaflet big GeoJson file Ajax filter best performance

javascript

ajax

filter

geojson

leaflet