stop openLayers styling from rendering all (old and new) points by new styling

Question

I have a openLayers map and I have different GeoJSON files that I want to be rendered in different Style. the first I render points it's ok but the second time openLayers re render the old points by new style but I don't want that I want to see only new point whit new Style

how can I solve that ??

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

the first I render points it's ok but the second time openLayers re render the old points by new style but I don't want that I want to see only new point whit new Style

Answer 1

You got two options

• set the style dynamically inside the style function
• render the points on different layers, so they have separate style functions

Here's how to set style dynamically inside style function

You can add info on the feature properties to distinguish between them when setting the style inside the style function.

oldFeature.set("propName", "oldFeature")
newFeature.set("propName", "newFeature")

You can access this custom prop inside the style function

function styleFunc(feature) {
  const propName = feature.get("propName");
  
  if (propName === "oldFeature") {
    // return "old" style
  }
  
  if (propName === "newFeature") {
    // return "new" style
  }
  
  // return some default style?
}