How to indicate polygon vertices with small circle

Question

I am using OpenLayers 3 and have more or less implemented everything in my requirements list, except one thing: I am asked to somehow make the polygon rendering indicate the polygon vertices with small circles.

In plain words, the desired polygon outline is not just a line - it is a line "adorned" with small circles in all the places where there is a vertex.

How can I do that in OL3? I searched in the ol.style.Style docs (that is, the style I pass via setStyle to the ol.layer.Vector containing my polygons), but didn't find anything relevant.

Answer 1

The kind OL3 devs have provided the answer on the GitHub issue list. You basically use a style's geometry function, that transforms the geometry before projecting it - and in that function, you add your vertices to a MultiPoint geometry. @tsauerwein went as far as creating a working fiddle - many thanks to him for his work.

var styleFunction = function() {
  var image = new ol.style.Circle({
    radius: 5,
    fill: null,
    stroke: new ol.style.Stroke({color: 'orange', width: 2})
  });
  return [
      new ol.style.Style({
          image: image,
          geometry: function(feature) {
              var coordinates = feature.getGeometry().getCoordinates()[0];
              return new ol.geom.MultiPoint(coordinates);
          }
      }),
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'blue',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(0, 0, 255, 0.1)'
        })
      })
  ];
};

Answer 2

For reference, there is now an example showing how to display the vertices of a polygon with a custom style geometry: http://openlayers.org/en/master/examples/polygon-styles.html

var styles = [
  // style for the polygon
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 3
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
    })
  }),
  // style for the vertices
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: 'orange'
      })
    }),
    geometry: function(feature) {
      // return the coordinates of the first ring of the polygon
      var coordinates = feature.getGeometry().getCoordinates()[0];
      return new ol.geom.MultiPoint(coordinates);
    }
  })
];