From 44a7e18035bbbb2bd31af283151825768b950988 Mon Sep 17 00:00:00 2001 From: XinyueDu <51403464+XinyueDu@users.noreply.github.com> Date: Sat, 8 Feb 2025 18:39:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20maplibre=20=E5=85=BC=E5=AE=B9=20pmtiles?= =?UTF-8?q?=20(#2666)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: maplibre 兼容 pmtiles * fix: lint fixed * fix: lint fixed * fix: update artifact-actions * fix: test error * feat: test png update * feat: integration fixed * feat: integration fixed * feat: intergration fixed * feat: intergration fixed * feat: bug test * feat: bug test * feat: intergration test * feat: intergration test * feat: inter test * feat: inter test * feat: intergration test * feat: intergration test * feat: intergration test * feat: inter test * feat: deleted png * feat: update png * feat: intergration test * feat: intergration test * feat: intergration fixed * feat: intergration fixed * feat: maplibre compat pmTiles * feat: bug fixed * feat: intergration fixed --------- Co-authored-by: duxinyue.dxy --- .github/workflows/ci.yml | 19 +------------------ __tests__/integration/utils/generator.ts | 2 +- .../utils/toMatchCanvasSnapshot.ts | 6 ++---- package.json | 5 ++++- packages/maps/src/maplibre/map.ts | 8 +++++--- 5 files changed, 13 insertions(+), 27 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4342ba27be..74242f8911 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -91,31 +91,14 @@ jobs: - name: Integration Test run: pnpm test:integration - - name: Check if snapshot files exist - run: | - if [ ! -d "__tests__/integration/snapshots/" ]; then - echo "Directory __tests__/integration/snapshots/ does not exist" - exit 1 - fi - if [ ! "$(ls -A __tests__/integration/snapshots/*-actual.png)" ]; then - echo "No files matching __tests__/integration/snapshots/*-actual.png found" - exit 1 - fi - - name: Generate timestamp and random string - run: | - echo "TIMESTAMP=$(date +%s)" >> $GITHUB_ENV - echo "RANDOM_STRING=$(openssl rand -hex 4)" >> $GITHUB_ENV - - name: Upload snapshots to GitHub Actions Artifacts if: always() uses: actions/upload-artifact@v4 with: - name: snapshots-${{ env.TIMESTAMP }}-${{ env.RANDOM_STRING }} + name: snapshots path: | __tests__/integration/snapshots/*-actual.png retention-days: 1 - if-no-files-found: ignore - include-hidden-files: true size-test: runs-on: ubuntu-latest diff --git a/__tests__/integration/utils/generator.ts b/__tests__/integration/utils/generator.ts index cf6f025085..37f826f8f5 100644 --- a/__tests__/integration/utils/generator.ts +++ b/__tests__/integration/utils/generator.ts @@ -53,7 +53,7 @@ export function generateCanvasTestCases( // Chart already rendered, capture into buffer. const buffer = await page.locator('canvas').screenshot(); const dir = `${__dirname}/../snapshots`; - const maxError = 100000; + const maxError = 0; try { expect(buffer).toMatchCanvasSnapshot(dir, key, { maxError }); diff --git a/__tests__/integration/utils/toMatchCanvasSnapshot.ts b/__tests__/integration/utils/toMatchCanvasSnapshot.ts index 074456f064..bfb9dd00de 100644 --- a/__tests__/integration/utils/toMatchCanvasSnapshot.ts +++ b/__tests__/integration/utils/toMatchCanvasSnapshot.ts @@ -35,12 +35,11 @@ function diff( // @see https://github.com/mapbox/pixelmatch#pixelmatchimg1-img2-output-width-height-options const mismatch = pixelmatch(img1.data, img2.data, output, width, height, { - threshold: 0.05, + threshold: 0.1, }); if (showMismatchedPixels && mismatch > maxError && diffPNG) { fs.writeFileSync(diff, PNG.sync.write(diffPNG)); - console.log(`Mismatched pixels: ${mismatch}`); } return mismatch; @@ -82,7 +81,6 @@ export function toMatchCanvasSnapshot( writePNG(buffer, actualPath); const error = diff(actualPath, expectedPath, diffPath, maxError); if (error <= maxError) { - console.log('toMatchCanvasSnapshot==>', error, maxError); if (fs.existsSync(diffPath)) fs.unlinkSync(diffPath); fs.unlinkSync(actualPath); return { @@ -91,7 +89,7 @@ export function toMatchCanvasSnapshot( }; } return { - message: () => `mismatch ${namePath} (error: ${error}) (maxError: ${maxError})`, + message: () => `mismatch ${namePath} (error: ${error})`, pass: false, }; } diff --git a/package.json b/package.json index 5da143d3d5..89a4bfe848 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,10 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "stats.js": "^0.17.0", - "three": "0.115.0" + "three": "0.115.0", + "@types/pixelmatch": "^5.2.5", + "pixelmatch": "5.3.0", + "pngjs": "^6.0.0" }, "devDependencies": { "@antv/translator": "^1.0.1", diff --git a/packages/maps/src/maplibre/map.ts b/packages/maps/src/maplibre/map.ts index f18802c0ad..c9cd46d066 100644 --- a/packages/maps/src/maplibre/map.ts +++ b/packages/maps/src/maplibre/map.ts @@ -115,8 +115,7 @@ export default class Service extends BaseMapService { this.$mapContainer = this.creatMapContainer(id); if (typeof style !== 'string') { - const protocol = new Protocol(); - maplibregl.addProtocol('pmtiles', protocol.tile); + this.addProtocol(); } // @ts-ignore this.map = new window.maplibregl.Map({ @@ -135,7 +134,10 @@ export default class Service extends BaseMapService { // 不同于高德地图，需要手动触发首次渲染 this.handleCameraChanged(); } - + public addProtocol() { + const protocol = new Protocol(); + maplibregl.addProtocol('pmtiles', protocol.tile); + } public destroy() { // 销毁地图可视化层的容器 this.$mapContainer?.parentNode?.removeChild(this.$mapContainer);