OpenLayers 3 Select Interaction – Customizing Style Function

map-drawingopenlayersstyle

I have a style function for LineStrings which will place a circle at each vertex of a feature.

When I select the feature it reverts to using the default style even though I have replicated my style function with a minor (colour) change. The other minor bug is that the function has two params (start, end) but I would like to place the circle on every vertex. Is there a way to achieve this?

Specifically though, is there a reason why it might be unable to display a selected feature using a style function? I am replicating the code below:

var selectedStyle = function (feature, resolution) {
var geometry = feature.getGeometry();
var styles = [
  // linestring
  new ol.style.Style({
      stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 6
      })
  })
];

geometry.forEachSegment(function (start, end) {
    var dx = end[0] - start[0];
    var dy = end[1] - start[1];
    var rotation = Math.atan2(dy, dx);
    // circles
    styles.push(new ol.style.Style({
        geometry: new ol.geom.Point(end),
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'rgb(0, 0, 255)'
            }),
            stroke: new ol.style.Stroke({ color: 'blue', width: 2 })
        })
    }));
});

return styles;
};

Best Answer

I ll give an example I use for a layer use to draw polygons and lines. So you may get the idea and adjust to fit your needs. The geometry function is collecting all the vertices exist on the feature passed, and then it returns a multipoint out of these coords.

pseudoEditstyles = [
  /* We are using two different styles for the polygons/lines:
   *  - The first style is for the polygons/lines themselves.
   *  - The second style is to draw the vertices of the polygons.
   *    In a custom `geometry` function the vertices of a polygon are
   *    returned as `MultiPoint` geometry, which will be used to render
   *    the style.
   */
  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)'
    })
  }),
  new ol.style.Style({
    image: new ol.style.RegularShape({
      fill: new ol.style.Fill({
          color: 'rgba(255, 0, 0, 0.5)'
      }),
      stroke: new ol.style.Stroke({
          color: 'black', 
          width: 1
      }),
      points: 4,
      radius: 6,
      angle: Math.PI / 4
    }),
    geometry: function(feature) {

      var geometry  =  feature.getGeometry();
      var geomType = geometry.getType();

      if (geomType === 'Polygon'){
      var linerings = geometry.getLinearRings();
      var coordinates = linerings[0].getCoordinates();
        for (var i=1;i<linerings.length;i++){ 
            var coordsToAdd = linerings[i].getCoordinates();
            for (var f=0;f<coordsToAdd.length;f++){
             coordinates.push(coordsToAdd[f]);   
            }
        }
      return new ol.geom.MultiPoint(coordinates);
      }
      else if (geomType === 'LineString'){ 
      var coordinates = geometry.getCoordinates();
      return new ol.geom.MultiPoint(coordinates);    
      }
    }
  })
]
Related Question