Indicating polygon vertices with small circles

[ttsiodras]

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's vertices with small circles.

This helps the users avoid creating accidental overlaps (or slivers) in the polygons they draw, when a neighboring polygon's edge appears to be a straight line, but in fact it's almost a straight line, and has a vertex right along its middle. Here's an example - look at the right edge of Polygon A below:

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.

[tsauerwein]

You could this by setting a geometry function returning a MultiPoint geometry with all vertices on the style. See also this example: http://openlayers.org/en/master/examples/earthquake-clusters.html

But please ask questions on the mailing list or StackOverflow.

[elemoine]

@tsauerwein do you know how to display both the polygon and its vertices?

[tsauerwein]

@elemoine You have two styles, one for the polygon and one for the points. And the style for the points has a custom geometry function:

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

http://jsfiddle.net/gnegwsgx/1/

[tonio]

Neat, wouldn’t this deserve an example?

[elemoine]

@tsauerwein, I see. Thanks for the answer.

[bartvde]

agree with @tonio that this would make a nice example

[ttsiodras]

Thank you for posting the answer to this - I tested the geometry function and it works perfectly.

As for asking on StackOverflow first, I did - and I just added your response there.

EDIT:

Apparently you did too, at the same time - one minute after me :-) I removed my own response, and accepted yours - thanks again.

[karthikbht91]

Great work, I think this is part of examples section in OpenLayers page. Could someone help me select these created circles. I need to allow certain functionality only to these circles on the corners of a Polygon..

[mohong]

@elemoine You have two styles, one for the polygon and one for the points. And the style for the points has a custom geometry function:

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

http://jsfiddle.net/gnegwsgx/1/

If I want to change the current click vertice`s style, like change it`s color, how can I do?

Because I want to remove this vertice by modify.removePoint(). (For better user experience).