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 ?
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