javascript - 操作 GeoJSON 数据 - 在 OpenLayers 中重新加载矢量图层

Question

我一直致力于创建一个函数来操作加载的 GeoJSON 数据并更新 OpenLayers map 。到目前为止，我拥有的是一个 map ，它可以处理从加载的 GeoJSON 文件中过滤出的数据。如何更改矢量图层以使用更新的数据？

这是我到目前为止的代码:

• 加载 GeoJSON fullGeoJSON:

  var fullGeoJSON = require("./data/data.json");
  

• 创建 varfilteredGeoJSON

  var filteredGeoJSON = {
      "type": "FeatureCollection",
      "features": []
  };
  

• 通过过滤 fullGeoJSON 来填充空的特征

  function filterGeoJSON(religion, gender) {
      fullGeoJSON.features.forEach(function (feature) {
          if (
              feature.properties.religion == religion &&
              feature.properties.gender == gender
          ) {
              filteredGeoJSON.features.push(feature);
          }
      });
  }
  

• 定义矢量源

  var filteredSource = new VectorSource({
      features: new GeoJSON().readFeatures(filteredGeoJSON, {
          featureProjection: "EPSG:3857"
      })
  });
  

• 使用源定义新的矢量图层

  var filteredLayer = new VectorLayer({
      source: filteredSource
  });
  

使用矢量源定义 map (mainMap)。 map 渲染良好，仅使用 显示过滤输入 JSON 后留下的特征

现在，我正在寻找一种通过单击按钮来更改 filteredGeoJSON 的方法，方法是使用不同的参数调用 filterGeoJSON() ，并使用此更改后的数据源刷新 filteredSource 以及 filteredLayer。到目前为止我所拥有的是:

onClick("gender", function () {
    // clear filteredGeoJSON
    (filteredGeoJSON = {
        type: "FeatureCollection",
        features: []
    });
    filterGeoJSON("protestantisch", "f"); // call filterGeoJSON again
    mainMap.refresh(); // <- Something like this?
});

如何强制 OpenLayers 使用 onClick 函数中更改后的 filteredGeoJSON 作为我的 mainMap 的数据源？

感谢您的帮助!

Answer 1

您必须更改图层源才能刷新 map 内容:

onClick("gender", function() {
   // clear filteredGeoJSON
   filteredGeoJSON = {
      type: "FeatureCollection",
      features: []
   };
   filteredSource = new VectorSource({
      features: filterGeoJSON("protestantisch", "f")
   })
  filteredLayer.setSource(filteredSource);
})

参见here.