CODEWITHSUNDEEP
javascripthtml5-canvasopenlayers-3
Luigi Bosca
Luigi Bosca

Reputation: 101

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

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.

Thanks in advance for any help!

Upvotes: 10

Views: 674

Answers (1)

Alvin Lindstam
Alvin Lindstam

Reputation: 3142

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:

enter image description here enter image description here

Upvotes: 1

Related Questions