OL3: How to get existing style properties (e.g. fill color, stroke color, etc.) of vector layer

Question

I have an application, based on openlayers 3, that provides a GUI allowing users to add vector layers to a map. When a new layer is added, a style function is called to provide a style based on the Geometry type of the features found in the layer. For style properties like fill color and stroke color, I use a function that returns a random hex color value.

Once the layer has been added to the map and rendered, how can I obtain those hex color values? In my map's layer list panel, I'd like to be able to provide a small graphic swatch that reflects the fill color/stroke color of the layer.

Here are some code excerpts for clarification:

Setting the intial style for a new layer:

URL = window.URL || window.webkitURL;
    var inputFile = $("#InputFile")[0].files[0];  
    var path = window.URL.createObjectURL(inputFile);



    var image = new ol.style.Circle({
      radius: 3,
      fill: new ol.style.Fill({
          color: randomColor()/*'rgba(255, 0, 0, 0.8)'*/
        }),
      stroke: new ol.style.Stroke({color: randomColor(), width: 1})
    });

    var styles = {
      'Point': [new ol.style.Style({
        image: image
      })],
      'LineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'green',*/
          width: 1
        })
      })],
      'MultiLineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'green',*/
          width: 1
        })
      })],
      'MultiPoint': [new ol.style.Style({
        image: image
      })],
      'MultiPolygon': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'blue',*/
          lineDash: [4],
          width: 3
        }),
        fill: new ol.style.Fill({
          color: randomColor()
        })
      })],
      'Polygon': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'blue',*/
          lineDash: [4],
          width: 3
        }),
        fill: new ol.style.Fill({
          color: randomColor(),/*'rgba(0, 0, 255, 0.1)'*/
        })
      })],
      'GeometryCollection': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'magenta',*/
          width: 2
        }),
        fill: new ol.style.Fill({
          color: randomColor()/*'magenta'*/
        }),
        image: new ol.style.Circle({
          radius: 10,
          fill: null,
          stroke: new ol.style.Stroke({
            color: randomColor()/*'magenta'*/
          })
        })
      })],
      'Circle': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'red',*/
          width: 2
        }),
        fill: new ol.style.Fill({
          color: randomColor()/*'rgba(255,0,0,0.2)'*/
        })
      })]
    };

    var styleFunction = function(feature, resolution) {
      return styles[feature.getGeometry().getType()];
    };



    newLayer = new ol.layer.Vector({
        //create a layer 'name' property with the user input
        name:  this.refs.layerName.getValue(),/*$('#layerName').val(),*/
        basemap: false,
        source: new ol.source.Vector({
            url: path,
            format: new ol.format.GeoJSON()
        }),
        style: styleFunction
    });

Now, after the layer is added to the map, how can I access existing style properties?

map.getLayers().forEach(function(lyr){
        if (lyr.get('name') == layerName) {
            var style = lyr.getStyle();         
                            console.log(style);
        }
    })

lyr.getStyle() returns the style function that was used to initially style the layer, but I'm not sure how to access the actual properties inside the style function.

Answer 1

It looks like you won't get much this way but ...

You are, at the end, styling features so maybe you check this with a different approach:

newLayer.getSource().once('addfeature', function(evt){
  var style = styles[evt.feature.getGeometry().getType()];
});