feat: maplibre 兼容 pmtiles (#2666)

* 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 <duxinyue.dxy@antgroup.com>
antvis · Feb 8, 2025 · 44a7e18 · 44a7e18
1 parent e9464e7
commit 44a7e18
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -115,8 +115,7 @@ export default class Service extends BaseMapService<Map & IMapboxInstance> {
       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<Map & IMapboxInstance> {
     // 不同于高德地图，需要手动触发首次渲染
     this.handleCameraChanged();
   }
-
+  public addProtocol() {
+    const protocol = new Protocol();
+    maplibregl.addProtocol('pmtiles', protocol.tile);
+  }
   public destroy() {
     // 销毁地图可视化层的容器
     this.$mapContainer?.parentNode?.removeChild(this.$mapContainer);