2

I am using the latest version of OpenLayers to draw some features within a map rendering data from GeoJSON-files. Within each of these files I have a FeatureCollection containing a couple of LineString-features.

So far the following style is applied, which works fine and draws each feature as a thin dark line:

return new Style({
  stroke: new Stroke({
    color: '#333333',
    width: 1
  })
});

I know, that I can not use Fill to style LineString-features (if I am right). However, I really want to style these lines with two colors using a inner line (1px;red) and a border/stroke around this inner line (1px;blue).

Is there any possibility to accomplish this?

A first solution would be to copy the features drawing the lower ones blue and 3px wide and the upper ones red and 1px wide - but this would also double the amount of features.

  • 1
    Use two styles for the features like you wrote. Draw 3 pixel wide blue line first and 1 pixel wide red over it.You do need to copy the features. – user30184 Sep 15 '18 at 18:31
2

As recommanded by @user30184, you should double the style like below. You may need to adapt width to your liking.

return [
  new Style({
    stroke: new Stroke({
      color: 'blue',
      width: 4
    })
  }),
  new Style({
    stroke: new Stroke({
      color: 'red',
      width: 2
    })
  })
]
  • Thank you. I didn't know that I could pass styles as an array. – pzaenger Sep 20 '18 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.