The TrajectoryPainter discussed in this article was designed to visualize the trajectories of vessels and aircrafts.

The Property-based styling and filtering of lines article describes a more general ParameterizedLinePainter which also allows for property-based filtering and styling on the GPU.

LuciadRIA hardware-accelerated maps support fast GPU-based visualization, styling and filtering of lines, including:

  • Property filtering: efficiently filter on feature properties.

  • Property styling: efficiently choose and switch colors based on feature properties.

  • Time filtering: filter parts of a line based on a time range.

  • Density: overlapping trajectories are automatically painted with more intense color.

  • Trajectory head and trail highlighting: the part of the line close to the current time range end is emphasized, and the tail is faded out.

trajectories
Figure 1. Trajectories with two colors, time filtering and head highlighting.

At runtime, you can efficiently change two things:

  • Styling expressions: instead of overriding paintBody, you must configure a set of expressions that apply to all features, based on their properties. These expressions are automatically evaluated for each feature.

  • Time range: you can configure a time window, as well as a function to provide a time value for each point along your lines. Only the parts of your lines that correspond to the time window are painted.

Program: Using a TrajectoryPainter
//Create a painter which uses
//* the airline and destination property for styling
//* a time provider to enable time filtering
const painter = new TrajectoryPainter({
  properties: ["airline", "destination"],
  timeProvider: function(feature, shape, pointIndex): number {
    return (feature.properties as any).timestamps[pointIndex];
  }
});

// At runtime, change expressions:
//   Brussels -> red
//   London   -> blue
//   Others   -> hide
painter.propertyColorExpressions = [{
  property: "destination",
  value: "Brussels",
  color: "rgb(255, 0, 0)"
}, {
  property: "destination",
  value: "London",
  color: "rgb(0, 255, 0)"
}];
painter.defaultColor = null;

//Configure a time window on the painter
//Only the trajectories in this window will be visualized
painter.timeWindow = [startTime, endTime];

Refer to the API documentation of TrajectoryPainter for more details and examples, and see the Trajectories sample for an example.