解决OpenLayers中不同GeoJSON图层旧点被新样式覆盖问题

我使用OpenLayers加载不同GeoJSON文件，要求每个文件对应各自样式渲染。首次渲染点图层表现正常，但再次渲染时，旧点会被新样式重新渲染。我希望每次仅显示新的点图层，并应用对应的新样式，该如何解决？

现有代码 #

switch (con) {
  case "tf":
    backTextColor = "#FF7000";
    frontTextColor = "#fff";
    iconText = "T";
    break;
  case "fuse":
    backTextColor = "red";
    frontTextColor = "#fff";
    iconText = "C";
    break;

  case "sec":
    backTextColor = "blue";
    frontTextColor = "#fff";
    iconText = "S";
    break ;

  case "des":
    backTextColor = "green";
    frontTextColor = "#fff";
    iconText = "D";
    break ;

  case "rec":
    backTextColor = "yellow";
    frontTextColor = "#000";
    iconText = "R";
    break ;

}

// *********** TextStyle
const labelText = new Style({
  text: new Text({
    font: '14px Calibri,sans-serif',
    overflow: true,
    fill: new Fill({
      color: frontTextColor
    }),
    stroke: new Stroke({
      color: backTextColor,
      width: 3
    })
  })
});

const TextPoint = new Style({
  image: new Circle({
    radius: 6,
    stroke: new Stroke({
      color: frontTextColor
    }),
    fill: new Fill({
      color: backTextColor
    })
  })
});

labelText.getText().setText(iconText);

const TextStyle = [
  TextPoint,
  labelText
];
// *********** TextStyle

function styleFunc(feature) {
  const style = feature.getGeometry().getType();
  console.log(style);

  if (style === 'LineString') {
    return defaultStyle;
  } else if (style === 'Point') {
    return TextStyle;
  }
}

CreateGeojson("myjson.json")

function CreateGeojson(url) {
  console.log(`url : ${url}`);
  const myGeoJson = new VectorLayer({
    source: new VectorSource({
      format: new GeoJSON(),
      url: url
    }),
    style: styleFunc,
  });
  map.addLayer(myGeoJson);
}

问题根源 #

1. 全局样式变量污染：TextStyle、labelText等都是全局变量，每次切换con重新生成样式时，会直接修改这些全局对象的属性，导致所有已加载的旧图层自动套用新样式。
2. 旧图层未清理：每次调用CreateGeojson都会新增一个矢量图层到地图上，旧图层仍保留在地图中，所以会出现旧点被新样式渲染的混淆效果。

解决代码及说明 #

优化后的完整代码 #

// 全局变量存储当前GeoJSON图层，用于后续移除操作
let currentGeoJsonLayer = null;

function CreateGeojson(url) {
  console.log(`url : ${url}`);
  // 先移除旧图层，确保地图上只有当前需要的图层
  if (currentGeoJsonLayer) {
    map.removeLayer(currentGeoJsonLayer);
  }

  // 基于当前con生成专属样式参数
  let backTextColor, frontTextColor, iconText;
  switch (con) {
    case "tf":
      backTextColor = "#FF7000";
      frontTextColor = "#fff";
      iconText = "T";
      break;
    case "fuse":
      backTextColor = "red";
      frontTextColor = "#fff";
      iconText = "C";
      break;
    case "sec":
      backTextColor = "blue";
      frontTextColor = "#fff";
      iconText = "S";
      break ;
    case "des":
      backTextColor = "green";
      frontTextColor = "#fff";
      iconText = "D";
      break ;
    case "rec":
      backTextColor = "yellow";
      frontTextColor = "#000";
      iconText = "R";
      break ;
  }

  // 生成当前图层专属的样式对象（避免全局污染）
  const labelText = new Style({
    text: new Text({
      font: '14px Calibri,sans-serif',
      overflow: true,
      fill: new Fill({ color: frontTextColor }),
      stroke: new Stroke({ color: backTextColor, width: 3 })
    })
  });
  const TextPoint = new Style({
    image: new Circle({
      radius: 6,
      stroke: new Stroke({ color: frontTextColor }),
      fill: new Fill({ color: backTextColor })
    })
  });
  labelText.getText().setText(iconText);
  const TextStyle = [TextPoint, labelText];

  // 定义当前图层专属的样式函数
  function currentStyleFunc(feature) {
    const geomType = feature.getGeometry().getType();
    if (geomType === 'LineString') {
      return defaultStyle;
    } else if (geomType === 'Point') {
      return TextStyle;
    }
  }

  // 创建并添加新图层
  const myGeoJson = new VectorLayer({
    source: new VectorSource({
      format: new GeoJSON(),
      url: url
    }),
    style: currentStyleFunc,
  });
  map.addLayer(myGeoJson);
  // 更新当前图层变量，用于下次移除
  currentGeoJsonLayer = myGeoJson;
}

核心优化点 #

• 图层生命周期管理：通过currentGeoJsonLayer变量跟踪当前活跃的GeoJSON图层，每次加载新图层前先移除旧图层，确保地图上仅显示最新的点图层。
• 样式隔离：将样式生成逻辑移到CreateGeojson函数内部，每次加载新图层时生成独立的样式对象和样式函数，彻底避免全局变量导致的样式污染问题。

内容的提问来源于stack exchange，提问作者Raul-As8596