Adapt code to ol 9.0.0

jest.config.cjs

@@ -192,6 +192,6 @@ module.exports = {
   // Whether to use watchman for file crawling
   // watchman: true,
   transformIgnorePatterns: [
-     "node_modules/(?!(ol|pbf|@open-wc|chai-a11y-axe|lit-html|lit-element|node-fetch|fetch-blob|data-uri-to-buffer|formdata-polyfill)/)", // <- exclude the OL lib
+     "node_modules/(?!(ol|pbf|@open-wc|chai-a11y-axe|lit-html|lit-element|node-fetch|fetch-blob|data-uri-to-buffer|formdata-polyfill|color-space|color-rgba|color-parse)/)", // <- exclude the OL lib
   ]
 };

package.json

@@ -26,7 +26,7 @@
     "test": "jest"
   },
   "peerDependencies": {
-    "ol": "7 || 8"
+    "ol": "9"
   },
   "devDependencies": {
     "@babel/preset-env": "7.24.0",
@@ -45,7 +45,7 @@
     "jest-environment-jsdom": "29.7.0",
     "lit": "3.1.2",
     "node-fetch": "3.3.2",
-    "ol": "8.0.0",
+    "ol": "9.0.0",
     "ol-mapbox-style": "12.2.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",

src/MVTEncoder.ts

@@ -24,7 +24,6 @@ import {transform2D} from 'ol/geom/flat/transform.js';
 
 import CanvasBuilderGroup from 'ol/render/canvas/BuilderGroup.js';
 import CanvasExecutorGroup from 'ol/render/canvas/ExecutorGroup.js';
-import RBush from 'rbush';
 import TileGrid from 'ol/tilegrid/TileGrid';
 
 /**
@@ -109,7 +108,7 @@ export default class MVTEncoder {
    * @param coordinateToPixelTransform World to CSS coordinates transform (top-left is 0)
    * @param context
    * @param renderBuffer
-   * @param declutterTree
+   * @param declutter
    */
   private drawFeaturesToContextUsingRenderAPI_(
     featuresExtent: _FeatureExtent,
@@ -118,7 +117,7 @@ export default class MVTEncoder {
     coordinateToPixelTransform: Transform,
     context: CanvasRenderingContext2D,
     renderBuffer: number,
-    declutterTree?: RBush<any>
+    declutter: boolean
   ) {
     const pixelRatio = 1;
     const builderGroup = new CanvasBuilderGroup(
@@ -129,7 +128,7 @@ export default class MVTEncoder {
     );
 
     let declutterBuilderGroup: CanvasBuilderGroup | undefined;
-    if (declutterTree) {
+    if (declutter) {
       declutterBuilderGroup = new CanvasBuilderGroup(
         0,
         featuresExtent.extent,
@@ -169,7 +168,7 @@ export default class MVTEncoder {
               tolerance,
               resourceLoadedListener,
               undefined,
-              declutterBuilderGroup
+              declutter
             ) || loading;
         }
       }
@@ -195,14 +194,13 @@ export default class MVTEncoder {
       executorGroupInstructions,
       renderBuffer
     );
-    const scale = 1;
     const transform = coordinateToPixelTransform;
     const viewRotation = 0;
     const snapToPixel = true;
 
     renderingExecutorGroup.execute(
       context,
-      scale,
+      [context.canvas.width, context.canvas.height],
       transform,
       viewRotation,
       snapToPixel,
@@ -220,12 +218,12 @@ export default class MVTEncoder {
       );
       declutterExecutorGroup.execute(
         context,
-        scale,
+        [context.canvas.width, context.canvas.height],
         transform,
         viewRotation,
         snapToPixel,
         undefined,
-        declutterTree
+        declutter
       );
     }
   }
@@ -433,8 +431,7 @@ export default class MVTEncoder {
     const styleResolution = options.styleResolution || tileResolution;
     const layerStyleFunction = layer.getStyleFunction()!; // there is always a default one
     const layerOpacity = layer.get('opacity');
-
-    const decluterTree = layer.getDeclutter() ? new RBush<any>(9) : undefined;
+    const declutter = !!layer.getDeclutter();
 
     // render to these tiles;
     const encodedLayers = renderTiles.map((rt) =>
@@ -446,7 +443,7 @@ export default class MVTEncoder {
         layerStyleFunction,
         layerOpacity,
         renderBuffer,
-        decluterTree,
+        declutter,
         outputFormat
       )
     );
@@ -461,7 +458,7 @@ export default class MVTEncoder {
     layerStyleFunction: StyleFunction,
     layerOpacity: number,
     renderBuffer: number,
-    decluterTree?: RBush<any>,
+    declutter: boolean,
     outputFormat?: string
   ): PrintResult {
     const canvas = document.createElement('canvas');
@@ -497,7 +494,7 @@ export default class MVTEncoder {
           transform,
           ctx!,
           renderBuffer,
-          decluterTree
+          declutter
         );
       }
     });

src/demo/demo-app.ts

@@ -66,7 +66,7 @@ export class DemoApp extends LitElement {
 
   private map?: OLMap;
   private mvtLayer?: VectorTileLayer;
-  private printExtentLayer?: VectorLayer<VectorSource<Geometry>>;
+  private printExtentLayer?: VectorLayer<VectorSource<Feature<Geometry>>>;
   private targetSizeInPdfPoints: [number, number] = [255, 355]; // 72pts / inch => ~[9cm, 12.5cm]
   private printScale = 1 / 5000;
   private dpi = 96; // let's take a value adapted for a screen. For a printer 254 would be better.