Search code examples
javascriptopenlayers-3

How to stop polygon stroke style overlapping polygon fill

I have a vector polygon in ol3 that I am styling with a coloured fill and a white stroke for the outline of the polygon.

new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#ffffff',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(241, 135, 0, 0.7)'
        })
      })

At higher resolutions this style is fine and the stroke and fill are well defined:

enter image description here

But zooming out means the stroke encroaches the fill and eventually they overlap and hide the fill:

enter image description here

I think that this is due to the stroke being drawn in the middle of the line of the polygon and so half of it is outside and half is inside the polygon, therefore when zooming out the half that is inside fills the polygon hiding the fill.

I'd like the polygon to have the line only drawn on the outside of the polygon: more like shading. I've had a play with the options but haven't quite managed it.

Does anyone know a setting that can achieve this, without resorting to dynamically reducing the width of the stroke or hiding the stroke when zooming out on the map.

Solution

  • To overcome this issue instead of setting the polygon style as a single style with both a fill and stroke, I set the polygon style as an array of styles with the first as the stroke and the 2nd as the fill, so that drawing in this order means that the fill will also be on top of the stroke, and when zooming out means the fill is still visible and not overlapped.

     [new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#ffffff',
      width: 4
    })
  }), new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(241, 135, 0, 0.7)'
    })
  })]

    The 1 issue with this is that due to the fill being opaque it means that you can see the slight outline of the stroke beneath the fill. But if the fill was solid this wouldn't be an issue. Not perfect but I could move on.