OpenLayers中如何仅绘制GeoJSON数据中的指定部分要素？

全量国家GeoJSON已经加载到VectorSource的前提下，无需重新发起数据请求，前端直接做要素过滤即可实现需求，以下是三种常用实现方案，可根据项目使用的OpenLayers版本和业务场景选择：

方案1：使用VectorLayer原生filter属性（推荐，OpenLayers 6+ 支持，性能最优） #

这是官方提供的图层级渲染过滤能力，只有符合过滤规则的要素才会进入渲染流程，不会修改原始源数据，切换选中国家时仅需更新过滤规则即可。
示例代码：

import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';

// 已加载全量国家数据的矢量源
const countrySource = new VectorSource({
  url: '你的全量国家GeoJSON访问地址',
  format: new GeoJSON()
});

const countryLayer = new VectorLayer({
  source: countrySource,
  style: new Style({
    stroke: new Stroke({ color: '#2563eb', width: 2 }),
    fill: new Fill({ color: 'rgba(37, 99, 235, 0.15)' })
  }),
  filter: null // 初始默认不渲染任何要素，也可设置初始过滤规则
});

// 切换显示指定国家的方法
// @param {string} nameField GeoJSON中存储国家名称的属性字段，比如'name'、'NAME_0'，以实际数据结构为准
// @param {string} targetName 需要显示的国家名称
function showTargetCountry(nameField, targetName) {
  countryLayer.setFilter((feature) => {
    return feature.get(nameField) === targetName;
  });
}

// 调用示例：选择美国时触发
showTargetCountry('name', 'United States of America');

// 需要恢复显示全量国家时，直接将filter置为null即可
// countryLayer.setFilter(null);

方案2：通过样式函数控制显隐（兼容所有OpenLayers版本） #

如果使用6.0以下的旧版本OpenLayers，没有原生filter能力，可以在样式函数中判断要素属性，非目标要素直接返回空样式实现隐藏效果。
示例代码：

// 全局存当前选中的国家名称
let activeCountry = null;
const nameField = 'name'; // 替换为实际数据的国家名称字段

const countryLayer = new VectorLayer({
  source: countrySource,
  style: (feature) => {
    // 非选中要素返回空样式，不渲染
    if (feature.get(nameField) !== activeCountry) {
      return null;
    }
    // 选中要素返回配置好的边界样式
    return new Style({
      stroke: new Stroke({ color: '#2563eb', width: 2 }),
      fill: new Fill({ color: 'rgba(37, 99, 235, 0.15)' })
    });
  }
});

// 切换国家时更新变量，触发图层重绘
function switchCountry(targetName) {
  activeCountry = targetName;
  countryLayer.changed();
}

// 调用示例
switchCountry('United States of America');

注意：该方案下所有要素都会参与渲染判断，十万级以上要素量时性能弱于方案1，常规全球国家GeoJSON（百级要素）完全可以流畅使用。

方案3：独立选中要素图层（适合需要单独交互的场景） #

如果后续需要给选中的国家绑定单独的高亮、编辑、弹窗等交互，可以单独新建一个选中要素专用图层，切换国家时从全量源中匹配对应要素，克隆后添加到选中图层即可，原全量图层可直接设为隐藏。
示例代码：

// 全量数据图层默认隐藏
const allCountryLayer = new VectorLayer({
  source: countrySource,
  visible: false
});
// 选中国家专用图层
const selectedLayer = new VectorLayer({
  source: new VectorSource(),
  style: new Style({
    stroke: new Stroke({ color: '#2563eb', width: 2 }),
    fill: new Fill({ color: 'rgba(37, 99, 235, 0.15)' })
  })
});

function showSelectedCountry(targetName) {
  const selectedSource = selectedLayer.getSource();
  // 清空上一次选中的要素
  selectedSource.clear();
  // 从全量源中匹配目标要素
  const target = countrySource.getFeatures().find(feature => feature.get(nameField) === targetName);
  if (target) {
    // 克隆要素后添加，避免修改原始要素影响全量数据
    selectedSource.addFeature(target.clone());
  }
}

注意：所有方案都不要直接调用VectorSource的removeFeature方法删除非目标要素，否则切换其他国家时需要重新加载全量数据，造成不必要的性能开销。

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