Styling different shapes in layers - Openlayers-3

Question

To add styling to Openlayers there seems to be different rules for different shapes.

I am trying to understand when to use what, but it is rather confusing and I am only able to do it with the help of examples.

For example, I have a few points generated on my map. I generated these points with GeoJSON data with the following format:

"type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [{
        "type": "Feature",
        "properties": {
            "property_a": 4,
            "property_b": 4234,
            "property_c": asdf,
            "property_d": 342342,
        },
        "geometry": {
            "type": "Point",
            "coordinates": [5.53204822887795, 51.609252234043296, 0.0]
        }
    }, etc...

I am trying to create points, polygon's and lines. What I don't understand is to why every geometry needs it's own style contructors?

I created styling for a filled point with an example:

var _myStroke = new ol.style.Stroke({
  color : 'rgba(255,0,0,1.0)',
  width : 1,
});

var _myFill = new ol.style.Fill({
   color: 'rgba(255,255,255,1)'
});

var circle = new ol.style.Circle({
    radius: 5,
    fill: _myFill,
    stroke: _myStroke
}); 
var puntObjectenStyle = new ol.style.Style ({
   image:circle
});

var puntObjectenSource= new ol.source.Vector ({
  url: 'puntobjecten.json',
  format: new ol.format.GeoJSON()
});
var puntObjecten = new ol.layer.Vector ({
  source: puntObjectenSource,
  style: puntObjectenStyle
});

The documentation on the Openlayers website doesnt even talk about the contructors ol.style.Circle, ol.style.Fill or ol.style.Stroke?

I have the following style-up for a polygon: (I don't even know if all these settings can be applied!)

 weight: '1.04',
 fillColor: '#da2122',
 color: '#000000',
 dashArray: '',
 opacity: '1.0',
 fillOpacity: '1.0',

How to create the correct functions to format a polygon? And above all: how can I know?

Answer 1

You're not looking at the right place. OpenLayers 3 (latest version) API docs are at http://openlayers.org/en/v3.9.0/apidoc/. It is, by the way, an excellent documentation.

You will use text field (top-left) to search for everything available in the library.

A ol.geom.Polygon can't be styled. You will apply a style to the feature that holds polygon.

Look at ol.style.Style. There are 4 possibilities:

• ol.style.Fill;
• ol.style.Image;
• ol.style.Stroke;
• ol.style.Text;

So you can style a polygon like:

var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#b30734',
        width: 3
    }),
    fill: new ol.style.Fill({
        color: [51, 51, 51, .7]
    })
});

var feature = new ol.Feature(
    new ol.geom.Polygon([[[-2e6, -1e6], [-1e6, 1e6],
            [0, -1e6], [-2e6, -1e6]]])
);
feature.setStyle(style);

A demo.