Openlayers 6 如何在点矢量图层聚类前按属性过滤要素？

• 调用方法错误：pointLocations本身就是ol.source.Vector实例，不需要再调用getSource()，额外调用会导致方法不存在报错
• 聚类源属性理解错误：ol.source.Cluster返回的要素仅携带features属性存储聚合的原始点集合，不存在values属性，所以第二个日志语句无法拿到值
• 异步加载问题：通过url加载GeoJSON的过程是异步的，在资源未加载完成时调用getFeatures()会返回空数组，无法获取要素

核心思路是单独存储全量原始要素，过滤后直接更新聚类绑定的矢量源，OpenLayers会自动触发聚类重计算，同步更新聚类数量。

完整修正代码 #

// 存储全量原始点要素
let allPointFeatures = [];
// 供聚类绑定的矢量源
const pointLocations = new ol.source.Vector({
  url: 'data/samplingLocations.json',
  format: new ol.format.GeoJSON()
});
// 监听源加载完成事件，存储全量要素
pointLocations.on('featuresloadend', (e) => {
  allPointFeatures = e.features;
  // 这里可以正常访问要素属性
  console.log(allPointFeatures[0].getProperties());
});

// 聚类源
const pointCluster = new ol.source.Cluster({
  distance: 50,
  source: pointLocations
});

// 样式函数（和原有逻辑一致即可）
const getStyle = function(feature) {
  const length = feature.get('features').length;
  if (length > 1) {
    return new ol.style.Style({
      image: new ol.style.Circle({
        radius: 20,
        fill: new ol.style.Fill({ color: "red" }),
      })
    })
  } else {
    return new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({ color: "black" }),
      })
    })
  }
};

// 矢量图层
const vectorLayer = new ol.layer.Vector({
  id: "points",
  source: pointCluster,
  style: getStyle
});

// 地图实例
const map = new ol.Map({
  layers: [vectorLayer],
  target: 'map',
  view: new ol.View({
    center: [895571,5911157],
    zoom: 8,
  })
});

过滤功能实现 #

// 过滤函数示例，传入条件即可更新聚类
function filterPoints(labDataVal, minYear) {
  // 从全量要素中筛选符合条件的要素
  const filteredFeatures = allPointFeatures.filter(feature => {
    const props = feature.getProperties();
    return props.lab_data === labDataVal && props.sampling_year > minYear;
  });
  // 清空原源后写入筛选后的要素，自动触发聚类重计算
  pointLocations.clear();
  pointLocations.addFeatures(filteredFeatures);
}

// 调用示例：筛选lab_data='yes'且sampling_year>1990的点
filterPoints('yes', 1990);

提示：如果页面初始化就要执行过滤，建议把过滤调用放在featuresloadend事件回调内，避免全量要素还没加载完成导致筛选结果为空。

调用filterPoints后，聚类源会基于筛选后的要素重新计算聚合，聚类点的数量、位置都会同步更新，完全符合需求。如果需要恢复全量数据，直接把allPointFeatures全部写入pointLocations即可。

内容的提问来源于stack exchange，提问作者Nocci