Feat pmtile (#1789)

* feat: add pmtiles protocal Refs #1788 * docs: 新增 pmtiles 文档
antvis · Aug 22, 2023 · be6e688 · be6e688
1 parent 5748694
commit be6e688
Show file tree

Hide file tree

Showing 15 changed files with 429 additions and 8 deletions.
diff --git a/dev-demos/tile/Vector/demos/pmtiles.tsx b/dev-demos/tile/Vector/demos/pmtiles.tsx
@@ -0,0 +1,142 @@
+// @ts-ignore
+import { Scene, PolygonLayer, PointLayer, Source } from '@antv/l7';
+// @ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import * as pmtiles from "pmtiles";
+const protocol = new pmtiles.Protocol();
+
+Scene.addProtocol('pmtiles',protocol.tile);
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Map({
+        center: [11.2438, 43.7799],
+        zoom: 12,
+      }),
+    });
+
+    const source = new Source('pmtiles://https://mdn.alipayobjects.com/afts/file/A*HYvHSZ-wQmIAAAAAAAAAAAAADrd2AQ/protomaps(vector)ODbL_firenze.bin', {
+        parser: {
+          type: 'mvt',
+          tileSize: 256,
+          maxZoom: 14,
+          extent: [-180, -85.051129, 179, 85.051129],
+        },
+      })
+
+
+    const layer = new PolygonLayer({
+    //   featureId: 'COLOR',
+      sourceLayer: 'earth', // woods hillshade contour ecoregions ecoregions2 city
+    });
+    layer
+      .source(source)
+      .color('#f7f7f7')
+
+      .style({
+        opacity: 0.5
+      });
+      const boundaries = new PolygonLayer({
+        //   featureId: 'COLOR',
+          sourceLayer: 'boundaries', // woods hillshade contour ecoregions ecoregions2 city
+        })
+          .source(source)
+          .color('#ffffbf')
+          .shape('line')
+          .size(1)
+          .style({
+            opacity: 1
+          });
+
+      const buildings = new PolygonLayer({
+        //   featureId: 'COLOR',
+          sourceLayer: 'buildings', // woods hillshade contour ecoregions ecoregions2 city
+        })
+          .source(source)
+          .color('#f1b6da')
+          .shape('fill')
+          .style({
+            opacity: 1
+          });
+
+          const natural = new PolygonLayer({
+            //   featureId: 'COLOR',
+              sourceLayer: 'natural', // woods hillshade contour ecoregions ecoregions2 city
+            })
+              .source(source)
+              .color('#e6f5d0')
+              .shape('fill')
+
+              .style({
+                opacity: 1
+              });
+
+              const water = new PolygonLayer({
+                //   featureId: 'COLOR',
+                  sourceLayer: 'water', // woods hillshade contour ecoregions ecoregions2 city
+                })
+                  .source(source)
+                  .color('#92c5de')
+                  .shape('fill')
+
+                  .style({
+                    opacity: 1
+                  });
+              const roads = new PolygonLayer({
+                //   featureId: 'COLOR',
+                    sourceLayer: 'roads', // woods hillshade contour ecoregions ecoregions2 city
+                })
+                    .source(source)
+                    .color('#bababa')
+                    .shape('line')
+                    .size(0.5)
+                    .style({
+                    opacity: 1
+                    });
+            const transit = new PolygonLayer({
+            //   featureId: 'COLOR',
+                sourceLayer: 'transit', // woods hillshade contour ecoregions ecoregions2 city
+            })
+                .source(source)
+                .color('#542788')
+                .shape('line')
+                .size(0.5)
+                .style({
+                opacity: 1
+                });
+
+                const point = new PointLayer({
+                    //   featureId: 'COLOR',
+                        sourceLayer: 'places', // woods hillshade contour ecoregions ecoregions2 city
+                    })
+                    .source(source)
+                    .color('#542788')
+                    .shape('circle')
+                    .size(5)
+                    .style({
+                    opacity: 1
+                    });
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+      scene.addLayer(boundaries);
+      scene.addLayer(natural);
+      scene.addLayer(buildings);
+      scene.addLayer(transit);
+      scene.addLayer(roads);
+      scene.addLayer(water);
+      scene.addLayer(point);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '60vh',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/tile/Vector/pmtiles.md b/dev-demos/tile/Vector/pmtiles.md
@@ -0,0 +1,13 @@
+---
+group: 
+    path: 'vector'
+    title: '矢量瓦片'
+    order: 1
+title: PMTiles
+order: 0
+---
+
+
+### Polygon
+
+<code src="./demos/pmtiles.tsx"></code>
diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
     "mockjs": "^1.1.0",
     "npm-run-all": "^4.1.5",
     "open-cli": "^7.0.1",
+    "pmtiles": "^2.7.2",
     "popmotion": "^9.4.2",
     "postcss": "^8.4.22",
     "postcss-plugin": "^1.0.0",

diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts
@@ -33,7 +33,13 @@ import {
 } from '@antv/l7-core';
 import { MaskLayer } from '@antv/l7-layers';
 import { ReglRendererService } from '@antv/l7-renderer';
-import { DOM, isMini, setMiniScene } from '@antv/l7-utils';
+import {
+  DOM,
+  IProtocolHandler,
+  isMini,
+  SceneConifg,
+  setMiniScene,
+} from '@antv/l7-utils';
 import { Container } from 'inversify';
 import BoxSelect, { BoxSelectEventList } from './boxSelect';
 import ILayerManager from './ILayerManager';
@@ -527,6 +533,19 @@ class Scene
     this.boxSelect.disable();
   }
 
+  // 数据协议
+  public static addProtocol(protocol: string, handler: IProtocolHandler) {
+    SceneConifg.REGISTERED_PROTOCOLS[protocol] = handler;
+  }
+
+  public static removeProtocol(protocol: string) {
+    delete SceneConifg.REGISTERED_PROTOCOLS[protocol];
+  }
+
+  public getProtocol(protocol: string): IProtocolHandler {
+    return SceneConifg.REGISTERED_PROTOCOLS[protocol];
+  }
+
   // get current point size info
   public getPointSizeRange() {
     return this.sceneService.getPointSizeRange();

diff --git a/packages/site/.dumi/global.ts b/packages/site/.dumi/global.ts
@@ -17,4 +17,5 @@ if (window) {
     window.reactDom = require('react-dom');
     window.antd = require('antd');
     window.gcoord = require('gcoord');
+    window.pmtiles = require('pmtiles');
 }
diff --git a/packages/site/docs/api/scene.zh.md b/packages/site/docs/api/scene.zh.md
@@ -256,6 +256,80 @@ scene.removeMarkerLayer(markerLayer);
 ```javascript
 scene.removeAllMarkers();
 ```
+## 静态方法
+静态方法通过 Scene 类去调用，不是 scene 实例
+### addProtocol
+添加自定义数据协议，设置一个自定义加载瓦片函数，当使用以自定义 URL 模式开头的数据时，该函数将被调用。
+-  protocol 协议名称
+-  handler 数据处理回调函数
+    -  requestParameters: RequestParameters,
+        - url 瓦片 URL，携带瓦片行列号 x,y,z 
+    -  callback: ResponseCallback<any>) => Cancelable
+        - Cancelable： {
+            cancel: () => void;
+          };
+
+
+#### 自定义函数
+
+```ts
+    Scene.addProtocol('custom', (params, callback) => {
+          fetch(`https://${params.url.split("://")[1]}`)
+              .then(t => {
+                  if (t.status == 200) {
+                      t.arrayBuffer().then(arr => {
+                          callback(null, arr, null, null);
+                      });
+                  } else {
+                      callback(new Error(`Tile fetch error: ${t.statusText}`));
+                  }
+              })
+              .catch(e => {
+                  callback(new Error(e));
+              });
+          return { cancel: () => { } };
+      });
+// the following is an example of a way to return an error when trying to load a tile
+    Scene.addProtocol('custom2', (params, callback) => {
+        callback(new Error('someErrorMessage'));
+        return { cancel: () => { } };
+    });
+```
+
+#### 加载 PMTiles
+
+```ts
+import * as pmtiles from "pmtiles";
+const protocol = new pmtiles.Protocol();
+const scene = new Scene({
+      id: 'map',
+      map: new Map({
+        center: [11.2438, 43.7799],
+        zoom: 12,
+      }),
+    });
+
+    scene.addProtocol('pmtiles',protocol.tile);
+    const source = new Source('pmtiles://https://mdn.alipayobjects.com/afts/file/A*HYvHSZ-wQmIAAAAAAAAAAAAADrd2AQ/protomaps(vector)ODbL_firenze.bin', {
+        parser: {
+          type: 'mvt',
+          tileSize: 256,
+          maxZoom: 14,
+          extent: [-180, -85.051129, 179, 85.051129],
+        },
+      })
+
+
+```
+
+### removeProtocol
+  删除之前添加的协议
+  - name: 协议名称
+
+```ts
+ scene.removeProtocol('pmtiles',protocol.tile);
+```
+
 
 ## 地图方法
 
@@ -695,6 +769,7 @@ scene.on('loaded', () => {
 scene.on('resize', () => {}); // 地图容器大小改变事件
 ```
 
+
 ### 地图事件
 
 ```javascript
@@ -731,6 +806,8 @@ scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖
 scene.on('webglcontextlost', () => {}); // webgl 上下文丢失
 ```
 
+
+
 ## 实验参数
 
 实验参数可能会废弃。

diff --git a/packages/site/examples/tile/vector/demo/meta.json b/packages/site/examples/tile/vector/demo/meta.json
@@ -39,6 +39,11 @@
       "filename": "geojson-vt.ts",
       "title": "GeoJSON-Vt",
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*amqiQaYHIKYAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "pmtiles.ts",
+      "title": "pmtiles",
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZEC8Q52nhn4AAAAAAAAAAAAADmJ7AQ/fmt.webp"
     }
   ]
 }