feat: 新增矢量瓦片类型 - 掩模图层 (#1382)

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

dev-demos/features/tile/mask.md

@@ -0,0 +1,5 @@
+### Vector - Mask
+
+#### vector mask
+mask 掩模瓦片图层
+<code src="./vector/mask.tsx"></code>

dev-demos/features/tile/vector/mask.tsx

@@ -0,0 +1,63 @@
+// @ts-ignore
+import { Scene, RasterLayer, MaskLayer } from '@antv/l7';
+// @ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'line',
+      stencil: true,
+      map: new Map({
+        center: [121.268, 30.3628],
+        pitch: 0,
+        style: 'blank',
+        zoom: 4,
+      }),
+    });
+
+    const layer = 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 satellite = new RasterLayer({
+        mask: true
+      })
+        .source(
+          'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+          {
+            parser: {
+              type: 'rasterTile',
+              tileSize: 256,
+              zoomOffset: 0,
+              updateStrategy: 'overlap',
+            },
+          },
+        )
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+      scene.addLayer(satellite);
+    });
+  }, []);
+  return (
+    <div
+      id="line"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

packages/layers/src/core/interface.ts

@@ -164,6 +164,7 @@ export interface IMaskLayerStyleOptions extends IBaseLayerStyleOptions {
   // define
   opacity: number;
   color: string;
+  sourceLayer?: string;
 }
 
 export interface IWindLayerStyleOptions extends IBaseLayerStyleOptions {

packages/layers/src/mask/index.ts

@@ -1,6 +1,7 @@
 import BaseLayer from '../core/BaseLayer';
 import { IMaskLayerStyleOptions } from '../core/interface';
 import MaskModels, { MaskModelType } from './models';
+import { isVectorTile } from '../tile/utils';
 import {
   TYPES,
   ICameraService,
@@ -125,6 +126,10 @@ export default class MaskLayer extends BaseLayer<IMaskLayerStyleOptions> {
   }
 
   protected getModelType(): MaskModelType {
+    const parserType = this.layerSource.getParserType();
+    if (isVectorTile(parserType)) {
+      return 'vectorMask';
+    }
     return 'fill';
   }
 }

packages/layers/src/mask/models/index.ts

@@ -1,8 +1,10 @@
+import MaskTileModel from '../../tile/models/tileModel';
 import FillModel from './fill';
 
-export type MaskModelType = 'fill';
+export type MaskModelType = 'fill' | 'vectorMask';
 
 const MaskModels: { [key in MaskModelType]: any } = {
   fill: FillModel,
+  vectorMask: MaskTileModel,
 };
 export default MaskModels;

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

@@ -9,7 +9,7 @@ import {
 } from '@antv/l7-core';
 import Source from '@antv/l7-source';
 import { osmLonLat2TileXY, Tile, TilesetManager } from '@antv/l7-utils';
-import MaskLayer from '../../mask';
+
 import {
   getLayerShape,
   readRasterValue,
@@ -175,7 +175,7 @@ export default class TileFactory implements ITileFactory {
     // set mask
     const layers = [layer];
     if (mask && layer.isVector) {
-      const masklayer = new MaskLayer()
+      const masklayer = new VectorLayer({layerType: "MaskLayer"})
         .source({
           type: 'FeatureCollection',
           features: [tile.bboxPolygon],
@@ -198,11 +198,12 @@ export default class TileFactory implements ITileFactory {
     return layer;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public updateStyle(styles: ITileStyles) {
     return '';
   }
 
-  public getDefautStyleAttributeField(layer: ILayer, type: string) {
+  public getDefaultStyleAttributeField(layer: ILayer, type: string) {
     switch (type) {
       case 'size':
         return 1;
@@ -229,7 +230,7 @@ export default class TileFactory implements ITileFactory {
       layer[type](value);
       return;
     }
-    const defaultValue = this.getDefautStyleAttributeField(layer, type);
+    const defaultValue = this.getDefaultStyleAttributeField(layer, type);
     if (!value) {
       layer[type](defaultValue);
       return layer;

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

@@ -3,6 +3,7 @@ import { rasterDataTypes } from '@antv/l7-source';
 import VectorLineTile from './line';
 import VectorPointLayer from './point';
 import VectorPolygonTile from './polygon';
+import VectorMask from './mask'
 import RasterTileFactory from './raster';
 import RasterDataFactory from './rasterData';
 import TestTile from './test';
@@ -12,6 +13,7 @@ export type TileType =
   | 'PointLayer'
   | 'LineLayer'
   | 'RasterLayer'
+  | 'MaskLayer'
   | 'TileDebugLayer';
 
 export function getTileFactory(tileType: TileType, parser: IParserCfg) {
@@ -22,6 +24,8 @@ export function getTileFactory(tileType: TileType, parser: IParserCfg) {
       return VectorLineTile;
     case 'PointLayer':
       return VectorPointLayer;
+    case 'MaskLayer':
+      return VectorMask;
     case 'TileDebugLayer': 
       return TestTile;
     case 'RasterLayer':

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

@@ -3,7 +3,7 @@ import Source from '@antv/l7-source';
 import { Tile } from '@antv/l7-utils';
 import { ITileFactoryOptions } from '../interface';
 import TileFactory from './base';
-export default class VectorPolygonTile extends TileFactory {
+export default class VectorLineTile extends TileFactory {
   public parentLayer: ILayer;
 
   constructor(option: ITileFactoryOptions) {

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

@@ -0,0 +1,41 @@
+import { ILayer, ISubLayerInitOptions } from '@antv/l7-core';
+import Source from '@antv/l7-source';
+import { Tile } from '@antv/l7-utils';
+import { ITileFactoryOptions } from '../interface';
+import TileFactory from './base';
+
+export default class VectorMaskTile extends TileFactory {
+  public parentLayer: ILayer;
+
+  constructor(option: ITileFactoryOptions) {
+    super(option);
+    this.parentLayer = option.parent;
+  }
+
+  public createTile(tile: Tile, initOptions: ISubLayerInitOptions) {
+    const { features, vectorTileLayer, source } = this.getFeatureData(
+      tile,
+      initOptions,
+    );
+    if (features.length === 0) {
+      return {
+        layers: [],
+        layerIDList: [],
+      };
+    }
+    const layer = this.createLayer({
+      tile,
+      initOptions,
+      vectorTileLayer,
+      source: source as Source,
+      needListen: false
+    });
+    layer.once('modelLoaded', () => {
+      tile.layerLoad();
+    })
+    return {
+      layers: [layer],
+      layerIDList: [layer.id],
+    };
+  }
+}

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

@@ -4,7 +4,7 @@ import { Tile } from '@antv/l7-utils';
 import { ITileFactoryOptions } from '../interface';
 import TileFactory from './base';
 
-export default class VectorPolygonTile extends TileFactory {
+export default class VectorPointTile extends TileFactory {
   public parentLayer: ILayer;
 
   constructor(option: ITileFactoryOptions) {

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

@@ -17,6 +17,7 @@ import {
   ILineLayerStyleOptions,
   IPointLayerStyleOptions,
   IPolygonLayerStyleOptions,
+  IMaskLayerStyleOptions,
 } from '../../core/interface';
 import lineFillModel from '../../line/models/tile';
 import lineSimpleModel from '../../line/models/simpleTileLine';
@@ -25,9 +26,13 @@ import pointTextModel from '../../point/models/tileText';
 import pointFillModel from '../../point/models/tile';
 import polygonFillModel from '../../polygon/models/tile';
 
+import maskModel from '../../mask/models/fill';
+
+type ILayerStyleOptions = IPolygonLayerStyleOptions & ILineLayerStyleOptions & IPointLayerStyleOptions & IMaskLayerStyleOptions;
+
 export default class VectorLayer extends BaseLayer<
   Partial<
-    IPolygonLayerStyleOptions & ILineLayerStyleOptions & IPointLayerStyleOptions & {needListen: boolean;}
+  ILayerStyleOptions & {needListen: boolean;}
   >
 > {
   public needListen: boolean = true;
@@ -167,6 +172,8 @@ export default class VectorLayer extends BaseLayer<
         return this.getLineModel();
       case 'PointLayer':
         return this.getPointModel();
+      case 'MaskLayer':
+          return maskModel;
       default:
         return pointFillModel;
     }