mobility-toolbox-js 3.0.0-beta.8 → 3.0.0

package/ol/layers/VectorLayer.d.ts

@@ -0,0 +1,17 @@
+import { Coordinate } from 'ol/coordinate';
+import { LayerGetFeatureInfoResponse } from '../../types';
+import Layer, { MobilityLayerOptions } from './Layer';
+/**
+ * @deprecated
+ */
+declare class VectorLayer extends Layer {
+    /**
+     * @deprecated
+     */
+    clone(newOptions: MobilityLayerOptions): VectorLayer;
+    /**
+     * @deprecated
+     */
+    getFeatureInfoAtCoordinate(coordinate: Coordinate): Promise<LayerGetFeatureInfoResponse>;
+}
+export default VectorLayer;

package/ol/layers/VectorLayer.js

@@ -0,0 +1,33 @@
+import Layer from './Layer';
+/**
+ * @deprecated
+ */
+class VectorLayer extends Layer {
+    /**
+     * @deprecated
+     */
+    clone(newOptions) {
+        return new VectorLayer(Object.assign(Object.assign({}, this.get('options')), newOptions));
+    }
+    /**
+     * @deprecated
+     */
+    getFeatureInfoAtCoordinate(coordinate) {
+        let features = [];
+        const mapInternal = this.getMapInternal();
+        if (mapInternal) {
+            const pixel = mapInternal.getPixelFromCoordinate(coordinate);
+            features =
+                mapInternal.getFeaturesAtPixel(pixel, {
+                    hitTolerance: this.get('hitTolerance') || 5,
+                    layerFilter: (l) => l === this,
+                }) || [];
+        }
+        return Promise.resolve({
+            coordinate,
+            features,
+            layer: this,
+        });
+    }
+}
+export default VectorLayer;

package/ol/layers/index.d.ts

@@ -0,0 +1,5 @@
+export { default as MaplibreLayer } from "./MaplibreLayer";
+export { default as MaplibreStyleLayer } from "./MaplibreStyleLayer";
+export { default as RealtimeLayer } from "./RealtimeLayer";
+export { default as Layer } from "./Layer";
+export { default as VectorLayer } from "./VectorLayer";

package/ol/layers/index.js

@@ -1,3 +1,6 @@
 export { default as MaplibreLayer } from './MaplibreLayer';
 export { default as MaplibreStyleLayer } from './MaplibreStyleLayer';
 export { default as RealtimeLayer } from './RealtimeLayer';
+// Deprecated export
+export { default as Layer } from './Layer';
+export { default as VectorLayer } from './VectorLayer';

package/ol/renderers/MaplibreLayerRenderer.js

@@ -1,114 +1,142 @@
-import { toDegrees } from 'ol/math';
-import { toLonLat } from 'ol/proj';
-import LayerRenderer from 'ol/renderer/Layer';
-import GeoJSON from 'ol/format/GeoJSON';
-import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
-/**
- * @private
- */
-const formats = {
-    'EPSG:3857': new GeoJSON({
-        featureProjection: 'EPSG:3857',
-    }),
-};
-/**
- * This class is a renderer for Maplibre Layer to be able to use the native ol
- * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
- * @private
- */
-// @ts-ignore
-export default class MaplibreLayerRenderer extends LayerRenderer {
-    getFeaturesAtCoordinate(coordinate, hitTolerance = 5) {
-        var _a, _b;
-        if (!coordinate) {
-            return [];
-        }
-        const layer = this.getLayer();
-        const map = layer.getMapInternal();
-        const { mbMap } = layer;
-        const projection = ((_b = (_a = map === null || map === void 0 ? void 0 : map.getView()) === null || _a === void 0 ? void 0 : _a.getProjection()) === null || _b === void 0 ? void 0 : _b.getCode()) || 'EPSG:3857';
-        let features = [];
-        if (!formats[projection]) {
-            formats[projection] = new GeoJSON({
-                featureProjection: projection,
-            });
-        }
-        if (mbMap === null || mbMap === void 0 ? void 0 : mbMap.isStyleLoaded()) {
-            const pixel = coordinate && mbMap.project(toLonLat(coordinate));
-            if ((pixel === null || pixel === void 0 ? void 0 : pixel.x) && (pixel === null || pixel === void 0 ? void 0 : pixel.y)) {
-                let pixels = [
-                    pixel.x,
-                    pixel.y,
-                ];
-                if (hitTolerance) {
-                    const [x, y] = pixels;
-                    pixels = [
-                        [x - hitTolerance, y - hitTolerance],
-                        [x + hitTolerance, y + hitTolerance],
-                    ];
-                }
-                // At this point we get GeoJSON Maplibre feature, we transform it to an OpenLayers
-                // feature to be consistent with other layers.
-                features = mbMap
-                    .queryRenderedFeatures(pixels, layer.queryRenderedFeaturesOptions || {})
-                    .map((feature) => {
-                    const olFeature = formats[projection].readFeature(feature);
-                    if (olFeature) {
-                        // We save the original Maplibre feature to avoid losing informations
-                        // potentially needed for other functionnality like highlighting
-                        // (id, layer id, source, sourceLayer ...)
-                        // @ts-ignore
-                        olFeature.set(VECTOR_TILE_FEATURE_PROPERTY, feature);
-                    }
-                    return olFeature;
-                });
-            }
-        }
-        return features;
-    }
-    // eslint-disable-next-line class-methods-use-this
-    prepareFrame() {
-        return true;
-    }
-    renderFrame(frameState) {
-        const layer = this.getLayer();
-        const { map, mbMap } = layer;
-        if (!layer || !map || !mbMap) {
-            return null;
-        }
-        const canvas = mbMap.getCanvas();
-        const { viewState } = frameState;
-        const opacity = layer.getOpacity() || 1;
-        canvas.style.opacity = `${opacity}`;
-        // adjust view parameters in Maplibre
-        mbMap.jumpTo({
-            center: toLonLat(viewState.center),
-            zoom: viewState.zoom - 1,
-            bearing: toDegrees(-viewState.rotation),
-        });
-        if (!canvas.isConnected) {
-            // The canvas is not connected to the DOM, request a map rendering at the next animation frame
-            // to set the canvas size.
-            map.render();
-        }
-        else if (canvas.width !== frameState.size[0] ||
-            canvas.height !== frameState.size[1]) {
-            mbMap.resize();
-        }
-        mbMap.redraw();
-        return mbMap.getContainer();
-    }
-    getFeatures(pixel) {
-        var _a, _b;
-        const coordinate = (_b = (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.getMapInternal()) === null || _b === void 0 ? void 0 : _b.getCoordinateFromPixel(pixel);
-        return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
-    }
-    forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
-        const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
-        features.forEach((feature) => {
-            // @ts-ignore
-            callback(feature, this.layer_, feature.getGeometry());
-        });
-        return features === null || features === void 0 ? void 0 : features[0];
-    }
-}
+"use strict";
+// /* eslint-disable no-underscore-dangle */
+// import { FrameState } from 'ol/Map';
+// import { toDegrees } from 'ol/math';
+// import { toLonLat } from 'ol/proj';
+// import LayerRenderer from 'ol/renderer/Layer';
+// import GeoJSON from 'ol/format/GeoJSON';
+// import { Coordinate } from 'ol/coordinate';
+// import { FeatureCallback } from 'ol/renderer/vector';
+// import { Feature } from 'ol';
+// import { Geometry } from 'ol/geom';
+// import { Pixel } from 'ol/pixel';
+// import { Map } from 'maplibre-gl';
+// import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
+// import type MaplibreLayer from '../layers/MaplibreLayer';
+// /**
+//  * @private
+//  */
+// const formats: {
+//   [key: string]: GeoJSON;
+// } = {
+//   'EPSG:3857': new GeoJSON({
+//     featureProjection: 'EPSG:3857',
+//   }),
+// };
+// /**
+//  * This class is a renderer for Maplibre Layer to be able to use the native ol
+//  * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
+//  * @private
+//  */
+// // @ts-expect-error
+// export default class MaplibreLayerRenderer extends LayerRenderer<MaplibreLayer> {
+//   getFeaturesAtCoordinate(
+//     coordinate: Coordinate | undefined,
+//     hitTolerance: number = 5,
+//   ): Feature<Geometry>[] {
+//     if (!coordinate) {
+//       return [];
+//     }
+//     const layer = this.getLayer();
+//     const map = layer.getMapInternal();
+//     const { mbMap } = layer;
+//     const projection =
+//       map?.getView()?.getProjection()?.getCode() || 'EPSG:3857';
+//     let features: Feature[] = [];
+//     if (!formats[projection]) {
+//       formats[projection] = new GeoJSON({
+//         featureProjection: projection,
+//       });
+//     }
+//     if (mbMap?.isStyleLoaded()) {
+//       const pixel =
+//         coordinate && mbMap.project(toLonLat(coordinate) as [number, number]);
+//       if (pixel?.x && pixel?.y) {
+//         let pixels: [[number, number], [number, number]] | [number, number] = [
+//           pixel.x,
+//           pixel.y,
+//         ];
+//         if (hitTolerance) {
+//           const [x, y] = pixels as [number, number];
+//           pixels = [
+//             [x - hitTolerance, y - hitTolerance],
+//             [x + hitTolerance, y + hitTolerance],
+//           ];
+//         }
+//         // At this point we get GeoJSON Maplibre feature, we transform it to an OpenLayers
+//         // feature to be consistent with other layers.
+//         features = (mbMap as Map)
+//           .queryRenderedFeatures(
+//             pixels,
+//             layer.queryRenderedFeaturesOptions || {},
+//           )
+//           .map((feature) => {
+//             const olFeature = formats[projection].readFeature(
+//               feature,
+//             ) as Feature;
+//             if (olFeature) {
+//               // We save the original Maplibre feature to avoid losing informations
+//               // potentially needed for other functionnality like highlighting
+//               // (id, layer id, source, sourceLayer ...)
+//               // @ts-expect-error
+//               olFeature.set(VECTOR_TILE_FEATURE_PROPERTY, feature);
+//             }
+//             return olFeature;
+//           });
+//       }
+//     }
+//     return features;
+//   }
+//   // eslint-disable-next-line class-methods-use-this
+//   override prepareFrame() {
+//     return true;
+//   }
+//   override renderFrame(frameState: FrameState) {
+//     const layer = this.getLayer();
+//     const { map, mbMap } = layer;
+//     if (!layer || !map || !mbMap) {
+//       return null;
+//     }
+//     const canvas = mbMap.getCanvas();
+//     const { viewState } = frameState;
+//     const opacity = layer.getOpacity() || 1;
+//     canvas.style.opacity = `${opacity}`;
+//     // adjust view parameters in Maplibre
+//     mbMap.jumpTo({
+//       center: toLonLat(viewState.center) as [number, number],
+//       zoom: viewState.zoom - 1,
+//       bearing: toDegrees(-viewState.rotation),
+//     });
+//     if (!canvas.isConnected) {
+//       // The canvas is not connected to the DOM, request a map rendering at the next animation frame
+//       // to set the canvas size.
+//       map.render();
+//     } else if (
+//       canvas.width !== frameState.size[0] ||
+//       canvas.height !== frameState.size[1]
+//     ) {
+//       mbMap.resize();
+//     }
+//     mbMap.redraw();
+//     return mbMap.getContainer();
+//   }
+//   override getFeatures(pixel: Pixel) {
+//     const coordinate = this.getLayer()
+//       ?.getMapInternal()
+//       ?.getCoordinateFromPixel(pixel);
+//     return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
+//   }
+//   override forEachFeatureAtCoordinate<Feature>(
+//     coordinate: Coordinate,
+//     frameState: FrameState,
+//     hitTolerance: number,
+//     callback: FeatureCallback<Feature>,
+//   ): Feature | undefined {
+//     const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
+//     features.forEach((feature) => {
+//       // @ts-expect-error
+//       callback(feature, this.layer_, feature.getGeometry());
+//     });
+//     return features?.[0] as Feature;
+//   }
+// }

package/ol/renderers/MaplibreStyleLayerRenderer.d.ts

@@ -0,0 +1,20 @@
+import { Feature } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import { Geometry } from 'ol/geom';
+import { FrameState } from 'ol/Map';
+import { Pixel } from 'ol/pixel';
+import LayerRenderer from 'ol/renderer/Layer';
+import { FeatureCallback } from 'ol/renderer/vector';
+import type { MaplibreStyleLayer } from '../layers';
+/**
+ * This class is a renderer for Maplibre Layer to be able to use the native ol
+ * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
+ * @private
+ */
+export default class MaplibreStyleLayerRenderer extends LayerRenderer<MaplibreStyleLayer> {
+    forEachFeatureAtCoordinate<Feature>(coordinate: Coordinate, frameState: FrameState, hitTolerance: number, callback: FeatureCallback<Feature>): Feature | undefined;
+    getFeatures(pixel: Pixel): Promise<Feature<Geometry>[]>;
+    getFeaturesAtCoordinate(coordinate: Coordinate | undefined, hitTolerance?: number): Feature<Geometry>[];
+    prepareFrame(): boolean;
+    renderFrame(): null;
+}

package/ol/renderers/MaplibreStyleLayerRenderer.js

@@ -1,6 +1,6 @@
+import GeoJSON from 'ol/format/GeoJSON';
 import { toLonLat } from 'ol/proj';
 import LayerRenderer from 'ol/renderer/Layer';
-import GeoJSON from 'ol/format/GeoJSON';
 import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
 /**
  * @private
@@ -15,8 +15,20 @@ const formats = {
  * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
  * @private
  */
-// @ts-ignore
 export default class MaplibreStyleLayerRenderer extends LayerRenderer {
+    forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
+        const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
+        features.forEach((feature) => {
+            // @ts-expect-error improve ts types
+            callback(feature, this.layer_, feature.getGeometry());
+        });
+        return features === null || features === void 0 ? void 0 : features[0];
+    }
+    getFeatures(pixel) {
+        var _a, _b;
+        const coordinate = (_b = (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.getMapInternal()) === null || _b === void 0 ? void 0 : _b.getCoordinateFromPixel(pixel);
+        return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
+    }
     getFeaturesAtCoordinate(coordinate, hitTolerance = 5) {
         var _a, _b;
         if (!coordinate) {
@@ -24,7 +36,7 @@ export default class MaplibreStyleLayerRenderer extends LayerRenderer {
         }
         const layer = this.getLayer();
         const map = layer.getMapInternal();
-        const { maplibreMap } = layer.maplibreLayer;
+        const mapLibreMap = layer.maplibreLayer.mapLibreMap;
         const projection = ((_b = (_a = map === null || map === void 0 ? void 0 : map.getView()) === null || _a === void 0 ? void 0 : _a.getProjection()) === null || _b === void 0 ? void 0 : _b.getCode()) || 'EPSG:3857';
         let features = [];
         if (!formats[projection]) {
@@ -32,9 +44,9 @@ export default class MaplibreStyleLayerRenderer extends LayerRenderer {
                 featureProjection: projection,
             });
         }
-        if (maplibreMap === null || maplibreMap === void 0 ? void 0 : maplibreMap.isStyleLoaded()) {
+        if (mapLibreMap === null || mapLibreMap === void 0 ? void 0 : mapLibreMap.isStyleLoaded()) {
             const pixel = coordinate &&
-                maplibreMap.project(toLonLat(coordinate));
+                mapLibreMap.project(toLonLat(coordinate));
             if ((pixel === null || pixel === void 0 ? void 0 : pixel.x) && (pixel === null || pixel === void 0 ? void 0 : pixel.y)) {
                 let pixels = [
                     pixel.x,
@@ -50,18 +62,17 @@ export default class MaplibreStyleLayerRenderer extends LayerRenderer {
                 // We query features only on style layers used by this layer.
                 let layers = layer.layers || [];
                 if (layer.layersFilter) {
-                    layers = maplibreMap.getStyle().layers.filter(layer.layersFilter);
+                    layers = mapLibreMap.getStyle().layers.filter(layer.layersFilter);
                 }
                 if (layer.queryRenderedLayersFilter) {
-                    // @ts-ignore
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    layers = maplibreMap
+                    layers = mapLibreMap
                         .getStyle()
                         .layers.filter(layer.queryRenderedLayersFilter);
                 }
                 // At this point we get GeoJSON Maplibre feature, we transform it to an OpenLayers
                 // feature to be consistent with other layers.
-                features = maplibreMap
+                features = mapLibreMap
                     .queryRenderedFeatures(pixels, {
                     layers: layers.map((l) => l.id),
                     validate: false,
@@ -73,7 +84,6 @@ export default class MaplibreStyleLayerRenderer extends LayerRenderer {
                         // We save the original Maplibre feature to avoid losing informations
                         // potentially needed for other functionnality like highlighting
                         // (id, layer id, source, sourceLayer ...)
-                        // @ts-ignore
                         olFeature.set(VECTOR_TILE_FEATURE_PROPERTY, feature);
                     }
                     return olFeature;
@@ -90,17 +100,4 @@ export default class MaplibreStyleLayerRenderer extends LayerRenderer {
     renderFrame() {
         return null;
     }
-    getFeatures(pixel) {
-        var _a, _b;
-        const coordinate = (_b = (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.getMapInternal()) === null || _b === void 0 ? void 0 : _b.getCoordinateFromPixel(pixel);
-        return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
-    }
-    forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
-        const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
-        features.forEach((feature) => {
-            // @ts-ignore
-            callback(feature, this.layer_, feature.getGeometry());
-        });
-        return features === null || features === void 0 ? void 0 : features[0];
-    }
 }

package/ol/renderers/RealtimeLayerRenderer.d.ts

@@ -0,0 +1,22 @@
+import { Feature } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import { Geometry } from 'ol/geom';
+import { FrameState } from 'ol/Map';
+import { Pixel } from 'ol/pixel';
+import CanvasLayerRenderer from 'ol/renderer/canvas/Layer';
+import { FeatureCallback } from 'ol/renderer/vector';
+import type RealtimeLayer from '../layers/RealtimeLayer';
+/**
+ * This class is a renderer for Maplibre Layer to be able to use the native ol
+ * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
+ * @private
+ */
+export default class RealtimeLayerRenderer extends CanvasLayerRenderer<RealtimeLayer> {
+    private canvas;
+    forEachFeatureAtCoordinate<Feature>(coordinate: Coordinate, frameState: FrameState, hitTolerance: number, callback: FeatureCallback<Feature>): Feature | undefined;
+    getData(pixel: Pixel): Uint8ClampedArray<ArrayBufferLike> | null;
+    getFeatures(pixel: Pixel): Promise<Feature<Geometry>[]>;
+    getFeaturesAtCoordinate(coordinate: Coordinate | undefined, hitTolerance?: number): Feature<Geometry>[];
+    prepareFrame(): boolean;
+    renderFrame(frameState: FrameState): HTMLElement;
+}

package/ol/renderers/RealtimeLayerRenderer.js

@@ -1,55 +1,20 @@
 import GeoJSON from 'ol/format/GeoJSON';
-import { composeCssTransform } from 'ol/transform';
-import { buffer, containsCoordinate } from 'ol/extent';
 import CanvasLayerRenderer from 'ol/renderer/canvas/Layer';
-/** @private */
+import { composeCssTransform } from 'ol/transform';
 const format = new GeoJSON();
 /**
  * This class is a renderer for Maplibre Layer to be able to use the native ol
  * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
  * @private
  */
-// @ts-ignore
 export default class RealtimeLayerRenderer extends CanvasLayerRenderer {
-    // eslint-disable-next-line class-methods-use-this
-    prepareFrame() {
-        return true;
-    }
-    renderFrame(frameState) {
-        var _a;
-        const { canvas, renderedViewState } = this.getLayer();
-        if (!this.container) {
-            this.container = document.createElement('div');
-            this.container.className = this.getLayer().getClassName();
-            this.container.style.position = 'absolute';
-            this.container.style.width = '100%';
-            this.container.style.height = '100%';
-            if (canvas) {
-                canvas.style.position = 'absolute';
-                canvas.style.top = '0';
-                canvas.style.left = '0';
-                canvas.style.transformOrigin = 'top left';
-                this.container.appendChild(canvas);
-            }
-        }
-        if (renderedViewState) {
-            const { center, resolution, rotation } = frameState.viewState;
-            const { center: renderedCenter, resolution: renderedResolution, rotation: renderedRotation, } = renderedViewState;
-            if (renderedResolution / resolution >= 3) {
-                // Avoid having really big points when zooming fast.
-                const context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
-                context === null || context === void 0 ? void 0 : context.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
-            }
-            else {
-                const pixelCenterRendered = (_a = this.getLayer()
-                    .getMapInternal()) === null || _a === void 0 ? void 0 : _a.getPixelFromCoordinate(renderedCenter);
-                const pixelCenter = this.getLayer()
-                    .getMapInternal()
-                    .getPixelFromCoordinate(center);
-                this.container.style.transform = composeCssTransform(pixelCenterRendered[0] - pixelCenter[0], pixelCenterRendered[1] - pixelCenter[1], renderedResolution / resolution, renderedResolution / resolution, rotation - renderedRotation, 0, 0);
-            }
-        }
-        return this.container;
+    forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
+        const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
+        features.forEach((feature) => {
+            // @ts-expect-error defintion to fix
+            callback(feature, this.layer_, feature.getGeometry());
+        });
+        return features === null || features === void 0 ? void 0 : features[0];
     }
     getData(pixel) {
         var _a;
@@ -74,41 +39,56 @@ export default class RealtimeLayerRenderer extends CanvasLayerRenderer {
         const coordinate = (_b = (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.getMapInternal()) === null || _b === void 0 ? void 0 : _b.getCoordinateFromPixel(pixel);
         return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
     }
-    forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
-        const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
-        features.forEach((feature) => {
-            // @ts-ignore
-            callback(feature, this.layer_, feature.getGeometry());
-        });
-        return features === null || features === void 0 ? void 0 : features[0];
-    }
     getFeaturesAtCoordinate(coordinate, hitTolerance = 5) {
         if (!coordinate) {
             return [];
         }
         const layer = this.getLayer();
-        const map = layer.getMapInternal();
-        const resolution = map.getView().getResolution();
-        const nb = 10;
-        const ext = buffer([...coordinate, ...coordinate], hitTolerance * resolution);
-        let features = [];
-        let trajectories = Object.values(layer.trajectories || {});
-        if (layer.sort) {
-            // @ts-ignore
-            trajectories = trajectories.sort(this.sort);
+        const featureCollection = layer.engine.getVehiclesAtCoordinate(coordinate, {
+            hitTolerance,
+            nb: layer.maxNbFeaturesRequested,
+        });
+        return format.readFeatures(featureCollection);
+    }
+    // eslint-disable-next-line class-methods-use-this
+    prepareFrame() {
+        return true;
+    }
+    renderFrame(frameState) {
+        const { canvas, renderedViewState } = this.getLayer();
+        if (!this.container) {
+            this.container = document.createElement('div');
+            this.container.className = this.getLayer().getClassName();
+            this.container.style.position = 'absolute';
+            this.container.style.width = '100%';
+            this.container.style.height = '100%';
+            if (canvas instanceof HTMLCanvasElement) {
+                canvas.style.position = 'absolute';
+                canvas.style.top = '0';
+                canvas.style.left = '0';
+                canvas.style.transformOrigin = 'top left';
+                this.container.appendChild(canvas);
+            }
         }
-        const vehicles = [];
-        for (let i = 0; i < trajectories.length; i += 1) {
-            const trajectory = trajectories[i];
-            if (trajectory.properties.coordinate &&
-                containsCoordinate(ext, trajectory.properties.coordinate)) {
-                vehicles.push(trajectories[i]);
+        if (renderedViewState) {
+            const { center, resolution, rotation } = frameState.viewState;
+            const { center: renderedCenter, resolution: renderedResolution, rotation: renderedRotation, } = renderedViewState;
+            if (renderedResolution / resolution >= 3) {
+                // Avoid having really big points when zooming fast.
+                const context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
+                if ((canvas === null || canvas === void 0 ? void 0 : canvas.width) && (canvas === null || canvas === void 0 ? void 0 : canvas.height)) {
+                    context === null || context === void 0 ? void 0 : context.clearRect(0, 0, canvas.width, canvas.height);
+                }
             }
-            if (vehicles.length === nb) {
-                break;
+            else {
+                const map = this.getLayer().getMapInternal();
+                const pixelCenterRendered = map === null || map === void 0 ? void 0 : map.getPixelFromCoordinate(renderedCenter);
+                const pixelCenter = map === null || map === void 0 ? void 0 : map.getPixelFromCoordinate(center);
+                if (pixelCenterRendered && pixelCenter) {
+                    this.container.style.transform = composeCssTransform(pixelCenterRendered[0] - pixelCenter[0], pixelCenterRendered[1] - pixelCenter[1], renderedResolution / resolution, renderedResolution / resolution, rotation - renderedRotation, 0, 0);
+                }
             }
         }
-        features = vehicles.map((vehicle) => format.readFeature(vehicle));
-        return features;
+        return this.container;
     }
 }

package/ol/styles/fullTrajectoryDelayStyle.d.ts

@@ -0,0 +1,6 @@
+import { Style } from 'ol/style';
+/**
+ * @private
+ */
+declare const fullTrajectoryDelaystyle: () => Style[];
+export default fullTrajectoryDelaystyle;