feat: 增加 Mask Tile Layer (#1416)

* feat: add Mask TIle layer

* style: lint style

* feat: add demo

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>

dev-demos/tile/district/image.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { Scene, RasterLayer } from '@antv/l7';
+import { Scene, RasterLayer, MaskLayer } from '@antv/l7';
 // @ts-ignore
 import { Map } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
@@ -16,7 +16,24 @@ export default () => {
       }),
     });
 
-    const layer = new RasterLayer({}).source(
+    const mask = new MaskLayer({
+      sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city
+    }).source(
+      'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
+      {
+        parser: {
+          type: 'mvt',
+          tileSize: 256,
+          maxZoom: 9,
+          extent: [-180, -85.051129, 179, 85.051129],
+        },
+      },
+    );
+
+    const layer = new RasterLayer({
+      zIndex: 1,
+      mask: true,
+    }).source(
       'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
       {
         parser: {
@@ -28,6 +45,7 @@ export default () => {
     );
 
     scene.on('loaded', () => {
+      scene.addLayer(mask);
       scene.addLayer(layer);
     });
   }, []);

dev-demos/tile/district/point.tsx

@@ -0,0 +1,53 @@
+// @ts-ignore
+import { Scene, PointLayer } from '@antv/l7';
+// @ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      stencil: true,
+      map: new Map({
+        center: [112, 30],
+        zoom: 3,
+      }),
+    });
+
+    const layer = new PointLayer({
+      featureId: 'COLOR',
+      sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city
+    });
+    layer
+      .source(
+        'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
+        {
+          parser: {
+            type: 'mvt',
+            tileSize: 256,
+            zoomOffset: 0,
+            maxZoom: 9,
+            extent: [-180, -85.051129, 179, 85.051129],
+          },
+        },
+      )
+      // .shape('simple')
+      .color('COLOR')
+      .size(2)
+      .select(true);
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/tile/point.md

@@ -0,0 +1,9 @@
+---
+title: Point
+order: 0
+---
+
+
+### Point
+
+<code src="./district/point.tsx"></code>

packages/layers/src/tile/service/TileLayerService.ts

@@ -1,4 +1,4 @@
-import { ILayer, ILayerService, ILngLat, IRendererService, ITexture2D } from '@antv/l7-core';
+import { ILayer, ILayerService, ILngLat, IRendererService } from '@antv/l7-core';
 import { SourceTile } from '@antv/l7-utils';
 import 'reflect-metadata';
 import Tile from '../tileFactory/Tile';
@@ -10,10 +10,9 @@ interface TileLayerServiceOptions {
 }
 export class TileLayerService {
   private rendererService: IRendererService;
-  private   layerService: ILayerService;
+  private layerService: ILayerService;
   private parent: ILayer;
 
-  public colorTexture: ITexture2D; // 颜色纹理，被栅格瓦片共用
 
   private _tiles: Tile[] = [];
   constructor({ rendererService,layerService, parent }: TileLayerServiceOptions) {

packages/layers/src/tile/tileFactory/MaskTile.ts

@@ -0,0 +1,44 @@
+import { ILayerAttributesOption } from '@antv/l7-core';
+import MaskLayer from './layers/vectorLayer';
+import Tile from './Tile';
+export default class MaskTile extends Tile {
+  public async initTileLayer(): Promise<void> {
+    const attributes = this.parent.getLayerAttributeConfig();
+    const layerOptions = this.parent.getLayerConfig();
+    
+    const sourceOptions = this.getSourceOption();
+    const layer = new MaskLayer({ ...layerOptions, layerType: 'MaskLayer'})
+    .source(sourceOptions.data, sourceOptions.options);
+
+    // 初始化数据映射
+    attributes && Object.keys(attributes).forEach((type) => {
+      const attr = type as keyof ILayerAttributesOption;
+      // @ts-ignore
+      layer[attr](attributes[attr]?.field, attributes[attr]?.values);
+    });
+
+    await this.addLayer(layer);
+    this.isLoaded = true;
+  }
+  protected getSourceOption() {
+    const rawSource = this.parent.getSource();
+    const { sourceLayer, featureId } = this.parent.getLayerConfig<{
+      featureId: string;
+    }>();
+    const features = this.sourceTile.data.layers[sourceLayer as string]
+      .features;
+    return {
+      data: {
+        type: 'FeatureCollection',
+        features,
+      },
+      options: {
+        parser: {
+          type: 'geojson',
+          featureId,
+        },
+        transforms: rawSource.transforms,
+      },
+    };
+  }
+}

packages/layers/src/tile/tileFactory/index.ts

@@ -1,9 +1,9 @@
+import { ILayer } from '@antv/l7-core';
 import VectorTile from './VectorTile2';
 import DebugTile from './DebugTile';
-import { ILayer } from '@antv/l7-core';
 import ImageTile from  './ImageTile';
 import RasterTile from './RasterTile';
-
+import MaskLayer from './MaskTile';
 
 
 export type TileType =
@@ -19,7 +19,7 @@ export type TileType =
 
 export function getTileFactory(layer: ILayer) {
   const tileType = layer.type;
-  
+  // console.log('tileType', tileType)
   switch (tileType) {
     case 'PolygonLayer':
       return VectorTile;
@@ -29,6 +29,8 @@ export function getTileFactory(layer: ILayer) {
       return VectorTile;
     case 'TileDebugLayer': 
       return DebugTile;
+    case 'MaskLayer':
+      return MaskLayer;
     case 'RasterLayer':
       const { dataType } = layer.getSource().parser;
       switch(dataType) {

packages/layers/src/tile/tileFactory/util.ts

@@ -2,7 +2,7 @@
 import PointLayer from '../../point/index';
 import LineLayer from '../../line';
 import PolygonLayer from '../../polygon';
-import MaskLayer from '../../mask';
+import MaskLayer from './layers/vectorLayer';
 
 export function getTileLayer(type: string) {
     if(type === 'PolygonLayer') {

packages/scene/src/index.ts

@@ -197,7 +197,7 @@ class Scene
       maskColor = '#000',
       maskOpacity = 0,
     }  = layer.getLayerConfig();
-    if(!mask) return undefined;
+    if(!mask || !maskfence) return undefined;
 
     const maskInstance = new MaskLayer()
     .source(maskfence)