4

I'd like to recreate the same style that OSM use when editing polygons. I'm calling it an 'interior stroke' or 'interior buffer'.

OSM example:

enter image description here

I know that I can use an array of ol.style.Style, with one sending back geometry for the interior buffer. However it seems really resource intensive to create new geometries simply to represent the original geometry with a buffer. Is that the recommended way? Can I use ol.style.Stroke in some advanced manner?

An additional feature is that the screen pixel width of the 'interior stroke' is a constant amount, irrespective of zoom level. For example, here's that polygon zoomed out and in:

Zoomed out Zoomed in

craig
  • 285
  • 2
  • 10

1 Answers1

0

This is similar to what I have used in my project. I got this piece of code from http://openlayers.org/en/latest/apidoc/ol.style.html If you want a thicker border, you can increase the width in stroke.

var fill = new ol.style.Fill({
    color: 'rgba(255,255,255,0.4)'
});
var stroke = new ol.style.Stroke({
    color: '#3399CC',
    width: 1.25
});
var style = new ol.style.Style({
    fill: fill,
    stroke: stroke
});
sudhir shakya
  • 827
  • 1
  • 9
  • 21
  • Just using a stroke with a width places the stroke pixels directly in the center of the actual coordinates, not on the interior like I'm asking. I'm looking for a way to say: "draw the stroke *inside* the shape, not *on* the border" – craig Aug 05 '17 at 09:07
  • 1
    If you want to draw inside the shape, then I guess you will have to use 2 polygons. I looked at the API. Did not find anything that could solve your problem with a single polygon. – sudhir shakya Aug 06 '17 at 01:28