openLayers styling points and line of GeoJSON file

Question

I have a GeoJson file and I want to have different labeled circle points in my map. i want to do this to all point (Feature:'point'), but it sadly apply to my Line's Coordinates too (Feature:'LineString'), how can i solve this problem?

my Code:

const labelText = new Style({
  text : new Text({
    font: '12px Calibri,sans-serif',
    overflow: true,
    fill: new Fill({
      color: 'green'
    }),
    stroke : new Stroke({
      color :' #000',
      width : 3
    })
  })
});
labelText.getText().setText("R");


const RecStyle = [
  new Style({
    fill : new Fill({
      color:"green"
    }),
    stroke : new Stroke({
      color : 'blue',
      width : 2
    })
  }),
  labelText
];


//for drawing


CreateGeojson("myjson.json")

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

I expected to not see the line's Coordinates as labeled 'R', I want to see only my points in this style

Answer 1

Create a styles object indexed by geometry type similar to the editing styles in https://openlayers.org/en/latest/apidoc/module-ol_style_Style-Style.html

Then use a style function to select the appropriate style and any dynamic properties such a labels:

style: function(feature) {
  const style = styles[feature.getGeometry().getType()];
  const textStyle = style.getText();
  if (textStyle)
    textStyle.setText(feature.get('name'));
  }
  return style;
}