hyperknot
hyperknot

Reputation: 13986

High performance line-gradient in OpenLayers

I'd like to make an IGC player for analysing paragliding competitions, where there'd be up to 150 lines (one for each pilot), each with up to 20k segments.

What is the best performing way to only draw a line partially, up till a point, like this?

example

I'm both interested in hiding/showing with a clear cut (like on the screenshot), as well as controlling the line opacity with a gradient. Mapbox GL JS has line-gradient and line-opacity for this.

How could I achieve this in OpenLayers with 30 FPS?

I've looked at Flight Animation example, which achieves the clear cut version, but how would I do a smooth gradient?

Upvotes: 0

Views: 378

Answers (1)

Viglino Jean-Marc
Viglino Jean-Marc

Reputation: 1421

ol-ext has a FlowLine style that let's you draw such feature but not sure it is very efficient for animation...
See examples: https://viglino.github.io/ol-ext/?q=Flow

Upvotes: 1

Related Questions