CODEWITHSUNDEEP
openlayersopenlayers-3
JSager
JSager

Reputation: 1430

Add a gradient to a line in OpenLayers3

thanks for taking the time to read.

I have been tasked with drawing a LineString as a series of differently styled segments, ideally represented as various gradients.

Not running into any problem getting them to show up, just getting them to render as a gradient. For the layer's style function, I create a new style array and return it with the style I'd like in it.

If I just use a style with a stroke, everything renders great. When I add a fill (even a simple fill with a single color) the fill doesn't show up.

I have a lot of latitude and freedom here, so if using a LineString is the wrong approach, I am happy to go a different direction.

Again, any help is appreciated.

Upvotes: 0

Views: 2074

Answers (1)

pavlos
pavlos

Reputation: 3081

Instead of adding a fill, asign an array of stroke styles to your lines. One for the inner (fill) and one for the outer (stroke). Like this:

  var styles = [
                new ol.style.Style({
                    stroke: new ol.style.Stroke({

                        color: "#000000",
                        width: 10
                    })

                }),
                new ol.style.Style({
                    stroke: new ol.style.Stroke({

                        color: "#ff0000",
                        width: 6
                    })
                })
  ];

Here is a fiddle to see the effect ( just draw a line on your map)

Upvotes: 0

Related Questions