Search code examples
html-listsopenlayers

Stroke containing alternating dashes and dots in OL

I'm trying to draw a line around a geometry, my wish is to alternate between dashes and dots as you see in the picture, the issue here is to have them in different colors. The dot is black while the dash/square is gray

Any suggestions on how to go about solving this?

Solution

  • You would need a style array with two styles, both should have the same lineDash with one having an offset of half that interval, for example

     [
   new Style({
    stroke: new Stroke({
      width: 6,
      color: 'black',
      lineDash: [0, 30],
      lineDashOffset: 15,
      lineCap: 'round',
    }),
  }),
  new Style({
    stroke: new Stroke({
      width: 6,
      color: 'gray',
      lineDash: [0, 30],
      lineDashOffset: 0,
      lineCap: 'square',
    }),
  }),
];