操縱GeoJSON數據-在OpenLayers中重新加載矢量層

Question

我一直堅持創建一個函數來處理已加載的GeoJSON數據並更新OpenLayers Map。 到目前為止，我所擁有的地圖可以處理從加載的GeoJSON文件中過濾出的數據。 如何更改矢量層以使用更新的數據？

到目前為止，這是我的代碼：

• 加載GeoJSON fullGeoJSON ：

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

• 創建varfilteredGeoJSON

   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之后剩下的顯示的功能，Map才能很好地呈現

現在，我正在尋找一種方法，通過單擊帶有不同參數的filterGeoJSON（）來單擊按鈕來更改filteredGeoJSON ，並使用更改后的數據源來刷新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

您必須更改圖層的來源才能刷新地圖的內容：

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

看這里