Differentiate style used to render vertices of lines and polygons from style used to render plain point features?

Question

Context

I'm using OpenLayers 6 to let a user make some (multiple geometries) drawings (i.e. vector features) on map.

I build a function to render the different geometries.
I also wanted to display the vertices of lines and polygons.
For this latter point, I found this really useful, so I based my function on that, as follows:

setDrawingStyle = function() {
  var imageForPoints = new ol.style.Circle({
    radius: 5,
    fill: new ol.style.Fill({
      color: 'green',
    }),
    stroke: new ol.style.Stroke({
      color: 'green',
      width: 2
    })
  });
  // Insert here the new variable 'imageForVertices' defined hereunder
  return [
    new ol.style.Style({
        image: imageForPoints, // Insert here the new function defined hereunder
        geometry: function(feature) {
          var geomType = feature.getGeometry().getType();
          var geomCoords = feature.getGeometry().getCoordinates();
          // The if statement I'm not totally satisfied with:
          if (geomType == "MultiPoint") {
            var coordinates = geomCoords;
          } else if (geomType == "MultiLineString") {
            var coordinates = geomCoords[0];
          } else if (geomType == "MultiPolygon") {
            var coordinates = geomCoords[0][0];
          }
          return new ol.geom.MultiPoint(coordinates);
        }
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'red'
      })
    })
  ];
}

I'm not really happy with the "if" statement that checks for the different types of geometry here, but it's working (for simple geometries).
Notice, I had to write the very first part of this if statement which checks for Point geometry type, otherwise a TypeError: e is undefined is raised.

So now every point, whether it is a vertex or true point, is rendered identically.

But I would like to differentiate the image value for true points from the one used for vertices composing lines and polygons.

What I've tried so far

In order to achieve this, I build a new variable imageForVertices under the existing imageForPoints which is defined as follows:

var imageForVertices = new ol.style.Circle({
  radius: 2,
  fill: new ol.style.Fill({
    color: 'red',
  }),
  stroke: new ol.style.Stroke({
    color: 'red',
    width: 2
  })
});

And I replaced the line

image: imageForPoints,

by this:

image: function(feature) {
  var geomType = feature.getGeometry().getType();
  if (geomType == "MultiPoint") {
    return imageForPoints
  } else {
    return imageForVertices
  }
},

But it throws me an error and I'm going round in circles right now:

TypeError: s.getImageState is not a function

Question

And ideas on how to achieve this?

Answer 1

You could use an empty return from the geometry function if there is nothing or style, or create an array with just one style and push the second into the array only if needed.

  return [
    new ol.style.Style({
        image: imageForVertices, // Insert here the new function defined hereunder
        geometry: function(feature) {
          var geomType = feature.getGeometry().getType();
          var geomCoords = feature.getGeometry().getCoordinates();
          if (geomType == "MultiPoint") {
            return;
          } else if (geomType == "MultiLineString") {
            var coordinates = geomCoords[0];
          } else if (geomType == "MultiPolygon") {
            var coordinates = geomCoords[0][0];
          }
          return new ol.geom.MultiPoint(coordinates);
        }
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'red'
      }),
      image: imageForPoints
    })
  ];