Open Layers 3 feature fill with Canvas is not fixed to the feature

Question

I've been working with openlayers 3 and created a fill with canvasPattern. The fill works, the problem is that it doesn't work as expected.

I'd expect the fill to move with the geometry that it is filling, but as you will see in this example:

http://fiddle.jshell.net/luigibosca/Lwrbuxfd/14/

if you move the map around you'll notice that the fill is absolutely positioned, and not relative to the geometry it fills.

• Am I using the fill wrong?
• Does any one know how to get the fill to move with the geometry?

Thanks in advance for any help!

Breen

do you want the arrows in circle fixed ? – Rato

There are 2 problems, 1) pattern is created only once and 2) pattern is drawn based on canvas width and height instead of the bounds of geometry. You should create the pattern based on the geometry and pattern should be re-created whenever the geometry changes – Rato

It looks like this works in 3.19.1 (fiddle.jshell.net/2hym6fna/1) – Eiger

Answer 1

As far as I can see, there is no way to make the fill pattern origin follow the map or geometry as it is panned or moved when using it with vector layers. Openlayers just uses the pattern as the fill without translating it, so it will always be statically positioned relative to the the canvas.

However, PR #5854 introduces an example where it works. It's not live on the examples page yet, but can be viewed on http://jsfiddle.net/61b7szjn/.

The difference between this and your example is that it uses an ImageVector source (making it an Image layer). Doing that would make it work, such as in your example:

var imageVectorLayer = new ol.layer.Image({
    source: new ol.source.ImageVector({
      source: vectorSource,
    style: styleFunction
  }),
})

Using Image layers for vector data might not be suitable for all situations, so adding support for translating the fill pattern seems like great PR material.

Edit:

Upon further testing, it seems like the ImageVector solutions is not a guaranteed fix. The pattern generally follows along as I pan, but is sometimes moves to different offsets in unpredictable ways. I assume it's because of how the rendered source canvas is clipped:

Esdras