feat: 初始化天地图瓦片图层组件

dev-demos/layer/rasterLayer/tiandituLayer.md

@@ -0,0 +1,6 @@
+---
+title: rasterLayer
+order: 3
+---
+
+<code src="./tiandituLayer.tsx" compact defaultShowCode></code>

dev-demos/layer/rasterLayer/tiandituLayer.tsx

@@ -0,0 +1,57 @@
+import {
+  GaodeMap,
+  Scene,
+  TiandituLayer
+  // anchorType,
+} from '@antv/l7';
+import React from 'react';
+// tslint:disable-next-line:no-duplicate-imports
+import { FunctionComponent, useEffect } from 'react';
+
+const Demo: FunctionComponent = () => {
+  useEffect(() => {
+    const newScene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        style: 'dark',
+        center: [120.104697, 30.260704],
+        pitch: 0,
+        // zoom: 15,
+      }),
+    });
+
+    newScene.on('loaded', () => {
+      // const tiandituLayer = new TiandituLayer({
+      //   type: 'satellite',
+      //   token: '6557fd8a19b09d6e91ae6abf9d13ccbd'
+      // })
+      // newScene.addLayer(tiandituLayer.layer);
+
+      // const tiandituLayer2 = new TiandituLayer({
+      //   type: 'cia',
+      //   token: '6557fd8a19b09d6e91ae6abf9d13ccbd'
+      // })
+      // newScene.addLayer(tiandituLayer2.layer);
+
+      const tiandituLayer3 = new TiandituLayer({
+        type: 'normal',
+        token: '6557fd8a19b09d6e91ae6abf9d13ccbd'
+      })
+      newScene.addLayer(tiandituLayer3.layer);
+    });
+  }, []);
+
+  return (
+    <>
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    </>
+  );
+};
+
+export default Demo;

packages/component/src/constants/index.ts

@@ -73,3 +73,15 @@ export const MapboxMapStyleConfig = {
       'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*gXFLRIaBUI0AAAAAAAAAAAAAARQnAQ',
   },
 };
+
+export const TiandituLayerType = {
+  // 矢量底图
+  normal: '//t{0-4}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={tk}', // &tk=6557fd8a19b09d6e91ae6abf9d13ccbd,
+  // 矢量注记
+  cva: '//t{0-4}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}',
+  // 影像底图
+  satellite:
+    '//t{0-4}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}',
+  // 影像注记
+  cia: '//t{0-4}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}',
+};

packages/component/src/index.ts

@@ -17,6 +17,7 @@ export * from './control/zoom';
 export * from './control/scale';
 export * from './popup/popup';
 export * from './popup/layerPopup';
+export * from './raster/tiandituLayer';
 
 export { Marker, MarkerLayer };
 

packages/component/src/raster/tiandituLayer.ts

@@ -0,0 +1,49 @@
+import { RasterLayer } from '@antv/l7-layers';
+import { TiandituLayerType } from '../constants';
+
+export interface ITiandituLayerOption {
+  type: 'normal' | 'satellite' | 'cva' | 'cia'; // 天地图图层类别
+  token: string; // 在天地图官网注册的token
+}
+
+export { TiandituLayer };
+
+export default class TiandituLayer {
+  private layerOption: Partial<ITiandituLayerOption>;
+  private layer: RasterLayer;
+
+  constructor(option?: Partial<ITiandituLayerOption>) {
+    console.log('tianditu');
+    this.layerOption = {
+      ...this.getDefault(),
+      ...option,
+    };
+    this.init();
+  }
+
+  public getDefault(): Partial<ITiandituLayerOption> {
+    return {
+      type: 'normal',
+    };
+  }
+
+  public init() {
+    const url =
+      TiandituLayerType[this.layerOption.type!] +
+      `&tk=${this.layerOption.token!}`;
+    this.layer = new RasterLayer({
+      zIndex: 1,
+    });
+    this.layer.source(
+      // 'https://t{1-2}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd',
+      url,
+      {
+        parser: {
+          type: 'rasterTile',
+          tileSize: 256,
+          zoomOffset: 0,
+        },
+      },
+    );
+  }
+}