How can I fill polygon with strokes in openlayers 3?

Question

I want to create a polygon and have it filled with strokes as in the image :

Currently my style function looks like this :

var tempObjectsStyleFunction = function(feature, resolution) {
return [
    new ol.style.Style({
        fill: new ol.style.Fill({
            color: feature.get('color')
        }),
        stroke: new ol.style.Stroke({
            color: feature.get('color'),
            width: 5
        }),
        image: new ol.style.Circle({
            radius: 20,
            fill: new ol.style.Fill({
                color: feature.get('color')
            })
        })
    })
];

};

What do I need to modify in order to support strokes in the fill ?

Answer 1

There is an example on the Openlayers examples website: https://openlayers.org/en/latest/examples/canvas-gradient-pattern.html

Basically, you have to create a CanvasPattern in a HTMLCanvasElement to fill with an OpenLayers 3 ol.style.Fill style. Checkout the issue for more info. Also, checkout this fiddle with an example that's a lot more like your image

Answer 2

The ol.style.Fill accepts a color property of the type of CanvasRenderingContext2D.fillStyle. This can be used to style your polygons with an image pattern (e.g. like in QGIS / ArcGIS). Currently I don't know a way to programmatically create these strokes so you need to provide an image with them.

After that you can use the following code:

  var layer = new ol.layer.Vector({
    source: source
  });

  var cnv = document.createElement('canvas');
  var ctx = cnv.getContext('2d');
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; // your image here
  img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');

    layer.setStyle(new ol.style.Style({
       fill: new ol.style.Fill({
         color: pattern
       })
    }));
  }

See this example of a fully working version: jsfiddle