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 <[email protected]>

Author: XinyueDu

.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

__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 });

__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,
       };
     }

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",

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);