[GIS] How to fill polygon with strokes in openlayers 3

openlayers

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

enter image description here

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 ?

Best Answer

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

Related Question