feat: mvt 实现getCustomdata 方法 (#1591)

dev-demos/tile/Vector/demos/citytile.tsx

@@ -16,13 +16,20 @@ export default () => {
     });
 
     const source = new Source(
-      'https://pre-gridwise.alibaba-inc.com/tile/test?z={z}&x={x}&y={y}',
+      'https://gridwise.alibaba-inc.com/tile/test?z={z}&x={x}&y={y}',
       {
         parser: {
           type: 'mvt',
           tileSize: 256,
-          // minZoom: 9,
+          getCustomData:(tile, cb)=>{
+            const url = `https://gridwise.alibaba-inc.com/tile/test?z=${tile.z}&x=${tile.x}&y=${tile.y}`;
+            fetch(url).then(res=>res.arrayBuffer()).then((data)=>{
+              cb(null,data)
+            }
+            )
+            }
         },
+  
       },
     );
 

packages/site/docs/api/source/mvt.zh.md

@@ -38,6 +38,21 @@ L7 加载矢量瓦片地图的时候需要在 `source` 中对瓦片服务进行
 <description> _number[]_ **可选** 不限制:\_ </description>
 地图显示范围
 
+### getCustomData `(tile: { x: number, y: number, z: number }, callback: (err: any, data: any) => void) => void,`
+
+<description> \_\_ **可选**</description>
+
+callback 参数
+
+- err 数据返回时
+- data arrarybuffer 类型， pbf
+
+自定义瓦片数据获取方法,试用业务场景需要数据鉴权，或者特殊处理的场景
+
+## 示例
+
+### 通用
+
 ```javascript
 const tileSource = new Source(
   'http://localhost:3000/zhejiang.mbtiles/{z}/{x}/{y}.pbf',
@@ -52,3 +67,25 @@ const tileSource = new Source(
   },
 );
 ```
+
+### 自定义方法
+
+```javascript
+const source = new Source(
+  'https://gridwise.alibaba-inc.com/tile/test?z={z}&x={x}&y={y}',
+  {
+    parser: {
+      type: 'mvt',
+      tileSize: 256,
+      getCustomData: (tile, cb) => {
+        const url = `https://gridwise.alibaba-inc.com/tile/test?z=${tile.z}&x=${tile.x}&y=${tile.y}`;
+        fetch(url)
+          .then((res) => res.arrayBuffer())
+          .then((data) => {
+            cb(null, data);
+          });
+      },
+    },
+  },
+);
+```

packages/source/src/parser/mvt.ts

@@ -29,27 +29,43 @@ const getVectorTile = async (
   tileParams: TileLoadParams,
   tile: SourceTile,
   requestParameters?: Partial<RequestParameters>,
+  getCustomData?: ITileParserCFG['getCustomData'],
 ): Promise<ITileSource | undefined> => {
   const tileUrl = getURLFromTemplate(url, tileParams);
   return new Promise((resolve) => {
-    const xhr = getArrayBuffer(
-      {
-        ...requestParameters,
-        url: tileUrl,
-      },
-      (err, data) => {
-        if (err || !data) {
-          resolve(undefined);
-        } else {
-          const vectorSource = new VectorSource(data, tile.x, tile.y, tile.z);
-          // const vectorTile = new VectorTile(
-          //   new Protobuf(data),
-          // ) as MapboxVectorTile;
-          resolve(vectorSource);
-        }
-      },
-    );
-    tile.xhrCancel = () => xhr.abort();
+    if (getCustomData) {
+      getCustomData(
+        {
+          x: tile.x,
+          y: tile.y,
+          z: tile.z,
+        },
+        (err, data) => {
+          if (err || !data) {
+            resolve(undefined);
+          } else {
+            const vectorSource = new VectorSource(data, tile.x, tile.y, tile.z);
+            resolve(vectorSource);
+          }
+        },
+      );
+    } else {
+      const xhr = getArrayBuffer(
+        {
+          ...requestParameters,
+          url: tileUrl,
+        },
+        (err, data) => {
+          if (err || !data) {
+            resolve(undefined);
+          } else {
+            const vectorSource = new VectorSource(data, tile.x, tile.y, tile.z);
+            resolve(vectorSource);
+          }
+        },
+      );
+      tile.xhrCancel = () => xhr.abort();
+    }
   });
 };
 
@@ -59,9 +75,14 @@ export default function mapboxVectorTile(
 ): IParserData {
   // TODO: 后续考虑支持多服务
   const url = Array.isArray(data) ? data[0] : data;
-
   const getTileData = (tileParams: TileLoadParams, tile: SourceTile) =>
-    getVectorTile(url, tileParams, tile, cfg?.requestParameters);
+    getVectorTile(
+      url,
+      tileParams,
+      tile,
+      cfg?.requestParameters,
+      cfg?.getCustomData,
+    );
 
   const tilesetOptions = {
     ...DEFAULT_CONFIG,