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

【问题标题】：Manipulate GeoJSON Data - reload vector Layer in OpenLayers操作 GeoJSON 数据 - 在 OpenLayers 中重新加载矢量图层
【发布时间】：2018-11-16 20:53:59
【问题描述】：

我一直坚持创建一个函数来处理加载的 GeoJSON 数据并更新 OpenLayers 地图。到目前为止，我所拥有的是一张使用从加载的 GeoJSON 文件中过滤的数据的地图。如何更改矢量图层以使用更新的数据？

到目前为止，这是我的代码：

加载 GeoJSON fullGeoJSON:

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

创建 var filteredGeoJSON

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

通过过滤fullGeoJSON填充空的features

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

使用矢量源定义地图 (mainMap)。地图渲染得很好，只有过滤输入 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 的数据源？

感谢您的帮助！

【问题讨论】：

标签： javascript openlayers geojson

【解决方案1】：

您必须更改图层的来源才能刷新地图的内容：

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

见here.

【讨论】：

谢谢，没有很好的文档记录，但 setSource 有效！