diff --git a/jest.config.cjs b/jest.config.cjs index dc960a1..4709149 100644 --- a/jest.config.cjs +++ b/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 ] }; diff --git a/package-lock.json b/package-lock.json index f4b7360..ebff152 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,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", @@ -34,7 +34,7 @@ "vite": "5.1.4" }, "peerDependencies": { - "ol": "7 || 8" + "ol": "9" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -4615,6 +4615,31 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "node_modules/color-parse": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.0.tgz", + "integrity": "sha512-g2Z+QnWsdHLppAbrpcFWo629kLOnOPtpxYV69GCqm92gqSgyXbzlfyN3MXs0412fPBkFmiuS+rXposgBgBa6Kg==", + "dev": true, + "dependencies": { + "color-name": "^1.0.0" + } + }, + "node_modules/color-rgba": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz", + "integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==", + "dev": true, + "dependencies": { + "color-parse": "^2.0.0", + "color-space": "^2.0.0" + } + }, + "node_modules/color-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz", + "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==", + "dev": true + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -9087,11 +9112,13 @@ } }, "node_modules/ol": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/ol/-/ol-8.0.0.tgz", - "integrity": "sha512-tWDVFlt4ylZJeByD/Q5vSWPxEMoHy1tyyWT+LFDlGmGl6p9kmxtCfGAIupwUGrc5ifWsy+gDbg6QGd1Qw0y3HA==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ol/-/ol-9.0.0.tgz", + "integrity": "sha512-+nYHZYbHrRUTDJ8ryxXPdDoAiaT6Zea02cocmGqsJXs4Oac1fYC9EbTIU2Y7803QcmG3u2MR88RxbksBvK+ZfQ==", "dev": true, "dependencies": { + "color-rgba": "^3.0.0", + "color-space": "^2.0.1", "earcut": "^2.2.3", "geotiff": "^2.0.7", "pbf": "3.2.1", @@ -14245,6 +14272,31 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "color-parse": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.0.tgz", + "integrity": "sha512-g2Z+QnWsdHLppAbrpcFWo629kLOnOPtpxYV69GCqm92gqSgyXbzlfyN3MXs0412fPBkFmiuS+rXposgBgBa6Kg==", + "dev": true, + "requires": { + "color-name": "^1.0.0" + } + }, + "color-rgba": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz", + "integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==", + "dev": true, + "requires": { + "color-parse": "^2.0.0", + "color-space": "^2.0.0" + } + }, + "color-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz", + "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==", + "dev": true + }, "combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -17533,11 +17585,13 @@ } }, "ol": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/ol/-/ol-8.0.0.tgz", - "integrity": "sha512-tWDVFlt4ylZJeByD/Q5vSWPxEMoHy1tyyWT+LFDlGmGl6p9kmxtCfGAIupwUGrc5ifWsy+gDbg6QGd1Qw0y3HA==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ol/-/ol-9.0.0.tgz", + "integrity": "sha512-+nYHZYbHrRUTDJ8ryxXPdDoAiaT6Zea02cocmGqsJXs4Oac1fYC9EbTIU2Y7803QcmG3u2MR88RxbksBvK+ZfQ==", "dev": true, "requires": { + "color-rgba": "^3.0.0", + "color-space": "^2.0.1", "earcut": "^2.2.3", "geotiff": "^2.0.7", "pbf": "3.2.1", diff --git a/package.json b/package.json index 6ddb6f4..5b301f2 100644 --- a/package.json +++ b/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", diff --git a/src/MVTEncoder.ts b/src/MVTEncoder.ts index ea40995..85a2b32 100644 --- a/src/MVTEncoder.ts +++ b/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 + 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(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, + declutter: boolean, outputFormat?: string ): PrintResult { const canvas = document.createElement('canvas'); @@ -497,7 +494,7 @@ export default class MVTEncoder { transform, ctx!, renderBuffer, - decluterTree + declutter ); } }); diff --git a/src/demo/demo-app.ts b/src/demo/demo-app.ts index 49fdd60..6a86ea1 100644 --- a/src/demo/demo-app.ts +++ b/src/demo/demo-app.ts @@ -66,7 +66,7 @@ export class DemoApp extends LitElement { private map?: OLMap; private mvtLayer?: VectorTileLayer; - private printExtentLayer?: VectorLayer>; + private printExtentLayer?: VectorLayer>>; 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.