[GIS] How to indicate polygon vertices with small circles using OpenLayers

openlayerssymbology

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.

Best Answer

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)'
        })
      })
  ];
};
Related Question