Edit

Applying a filter along lines rendered with WebGL

draw16 vector82 webgl18 line2 line-metric1 measure3 layout1

Current time shown:

Example showing how filtering a line using the M parameter is represented with the WebGL renderer

This example showcases how the ['line-metric'] operator can be used to style and partially filter lines which contain an M ("measure") parameter in their coordinates. For each trajectory the timestamp is stored in the M parameter using an XYM layout. This let us show the progression on a specific time for each trajectory on the map.

main.js
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import IGC from 'ol/format/IGC.js';
import TileLayer from 'ol/layer/Tile.js';
import WebGLVectorLayer from 'ol/layer/WebGLVector.js';
import OSM from 'ol/source/OSM.js';
import VectorSource from 'ol/source/Vector.js';

const igcUrls = [
  'data/igc/Clement-Latour.igc',
  'data/igc/Damien-de-Baenst.igc',
  'data/igc/Sylvain-Dhonneur.igc',
  'data/igc/Tom-Payne.igc',
  'data/igc/Ulrich-Prinz.igc',
];

const source = new VectorSource({
  features: [],
});

const format = new IGC();
for (let i = 0; i < igcUrls.length; ++i) {
  fetch(igcUrls[i])
    .then((resp) => resp.text())
    .then((data) => {
      const features = format.readFeatures(data, {
        featureProjection: 'EPSG:3857',
      });
      source.addFeatures(features);
    });
}

let timestamp = 1303240000;
const vectorLayer = new WebGLVectorLayer({
  source,
  style: [
    {
      style: {
        'stroke-width': 4,
        'stroke-color': [
          'interpolate',
          ['linear'],
          ['line-metric'],
          1303200000,
          'hsl(312,100%,39%)',
          1303240000,
          'hsl(36,100%,45%)',
        ],
      },
      filter: ['<=', ['line-metric'], ['var', 'timestamp']],
    },
  ],
  variables: {
    timestamp,
  },
});

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    vectorLayer,
  ],
  target: 'map',
  view: new View({
    center: [703365.7089403362, 5714629.865071137],
    zoom: 9,
  }),
});

function showTime() {
  const dateTime = new Date(timestamp * 1000);
  document.getElementById('time-value').textContent = dateTime.toUTCString();
}
document.getElementById('time-input').addEventListener('input', (event) => {
  timestamp = parseFloat(event.target.value);
  vectorLayer.updateStyleVariables({timestamp});
  showTime();
  map.render();
});
showTime();
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Applying a filter along lines rendered with WebGL</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <form>
      Current time shown:<br>
      <input style="width: 50%" type="range" class="uniform" id="time-input" name="maxT" min="1303200000" max="1303240000" value="1303240000">
      <span id="time-value"></span>
    </form>

    <script type="module" src="main.js"></script>
  </body>
</html>
package.json
{
  "name": "filter-webgl-line",
  "dependencies": {
    "ol": "10.5.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}