feat: 适量图层支持透传 transfrom (#1294)

* feat: 矢量图层支持 join/transfrom 透传

* style: lint style

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

dev-demos/features/point/tile.md

@@ -1,2 +0,0 @@
-### Raster Tile
-<code src="./tile.tsx"></code>

dev-demos/features/tile/rastertile.md

@@ -0,0 +1,2 @@
+### Raster Tile
+<code src="./rastertile.tsx"></code>

dev-demos/features/tile/vectortile.md

@@ -0,0 +1,2 @@
+### Vector Tile
+<code src="./vectortile.tsx"></code>

dev-demos/features/tile/vectortile.tsx

@@ -0,0 +1,116 @@
+// @ts-ignore
+import { Scene, LineLayer } from '@antv/l7';
+// @ts-ignore
+import { Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+const list = [
+  {
+    value: -28.0,
+    color1: 'orange',
+    province_adcode: '630000',
+    province_adName: '青海省',
+    province: '青海省',
+    nnh: 2,
+  },
+  {
+    value: 29.0,
+    color1: 'orange',
+    province_adcode: '640000',
+    province_adName: '宁夏回族自治区',
+    province: '宁夏回族自治区',
+    nnh: 3,
+  },
+  {
+    value: 60.0,
+    color1: 'orange',
+    province_adcode: '650000',
+    province_adName: '新疆维吾尔自治区',
+    province: '新疆维吾尔自治区',
+    nnh: 4,
+  },
+  {
+    value: -31.0,
+    color1: 'orange',
+    province_adcode: '710000',
+    province_adName: '台湾省',
+    province: '台湾省',
+    nnh: 4,
+  },
+  {
+    value: 80.0,
+    color1: 'orange',
+    province_adcode: '810000',
+    province_adName: '香港特别行政区',
+    province: '香港特别行政区',
+    nnh: 4,
+  },
+  {
+    value: -33.0,
+    color1: 'orange',
+    province_adcode: '820000',
+    province_adName: '澳门特别行政区',
+    province: '澳门特别行政区',
+    nnh: 4,
+  },
+];
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      stencil: true,
+      map: new Mapbox({
+        center: [121.268, 30.3628],
+        pitch: 0,
+        style: 'blank',
+        zoom: 4,
+      }),
+    });
+
+    const layer = new LineLayer({
+      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],
+          },
+          transforms: [
+            {
+              type: 'join',
+              sourceField: 'nnh',
+              targetField: 'NNH', // data 对应字段名 绑定到的地理数据
+              data: list,
+            },
+          ],
+        },
+      )
+      .color('COLOR')
+      .size(2)
+      .select(true);
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+      layer.on('click', (e) => {
+        console.log(e);
+      });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

packages/core/src/services/layer/ILayerService.ts

@@ -20,7 +20,7 @@ import {
 } from '../renderer/IMultiPassRenderer';
 import { IRendererService } from '../renderer/IRendererService';
 import { IUniform } from '../renderer/IUniform';
-import { ISource, ISourceCFG } from '../source/ISourceService';
+import { ISource, ISourceCFG, ITransform } from '../source/ISourceService';
 import {
   IAnimateOption,
   IEncodeFeature,
@@ -136,6 +136,7 @@ export interface ISubLayerStyles {
  */
 export interface ISubLayerInitOptions {
   layerType: string;
+  transforms: ITransform[];
   shape?: string | string[] | IScaleValue;
   // options
   zIndex: number;
@@ -223,6 +224,7 @@ export interface ITileLayerOPtions {
   mapService: IMapService;
   layerService: ILayerService;
   pickingService: IPickingService;
+  transforms: ITransform[];
 }
 
 export type LayerEventType =

packages/layers/src/tile/manager/tileLayerManager.ts

@@ -8,6 +8,7 @@ import {
   ISubLayerInitOptions,
   ITileLayerManager,
   ITilePickManager,
+  ITransform,
   ScaleAttributeType,
 } from '@antv/l7-core';
 import { generateColorRamp, IColorRamp, Tile } from '@antv/l7-utils';
@@ -26,17 +27,21 @@ export class TileLayerManager implements ITileLayerManager {
   private tileFactory: ITileFactory;
   private initOptions: ISubLayerInitOptions;
   private rampColorsData: any;
+  private transforms: ITransform[];
   constructor(
     parent: ILayer,
     mapService: IMapService,
     rendererService: IRendererService,
     pickingService: IPickingService,
     layerService: ILayerService,
+    transforms: ITransform[]
   ) {
     this.parent = parent;
     this.children = parent.layerChildren;
     this.mapService = mapService;
     this.rendererService = rendererService;
+    this.transforms = transforms;
+
     this.tilePickManager = new TilePickManager(
       parent,
       rendererService,
@@ -180,6 +185,7 @@ export class TileLayerManager implements ITileLayerManager {
 
     this.initOptions = {
       layerType: this.parent.type,
+      transforms: this.transforms,
       shape: layerShape,
       zIndex,
       opacity,

packages/layers/src/tile/models/tileModel.ts

@@ -7,13 +7,15 @@ export default class RasterTileModel extends BaseModel {
   }
 
   public initModels() {
-    if (this.layer.getSource()?.data.isTile) {
+    const source = this.layer.getSource();
+    if (source?.data.isTile) {
       this.layer.tileLayer = new TMSTileLayer({
         parent: this.layer,
         rendererService: this.rendererService,
         mapService: this.mapService,
         layerService: this.layerService,
         pickingService: this.pickingService,
+        transforms: source.transforms,
       });
     }
 

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

@@ -69,7 +69,7 @@ export default class TileFactory implements ITileFactory {
       vectorTileLayer: null,
       source: null,
     };
-    const { sourceLayer, featureId } = initOptions;
+    const { sourceLayer, featureId, transforms } = initOptions;
     if (!sourceLayer) {
       return emptyData;
     }
@@ -88,6 +88,7 @@ export default class TileFactory implements ITileFactory {
             type: 'geojson',
             featureId,
           },
+          transforms
         },
       );
 

packages/layers/src/tile/tileLayer/baseTileLayer.ts

@@ -47,6 +47,7 @@ export default class BaseTileLayer implements ITileLayer {
     mapService,
     layerService,
     pickingService,
+    transforms
   }: ITileLayerOPtions) {
     const parentSource = parent.getSource();
     const { sourceLayer, coords, featureId } =
@@ -62,6 +63,7 @@ export default class BaseTileLayer implements ITileLayer {
       rendererService,
       pickingService,
       layerService,
+      transforms
     );
 
     this.initTileSetManager();

packages/source/src/source.ts

@@ -136,7 +136,7 @@ export default class Source extends EventEmitter implements ISource {
           : 'null';
       const newFeature = cloneDeep(feature);
 
-      if (this.transforms.length !== 0 || this.dataArrayChanged) {
+      if (newFeature?.properties && (this.transforms.length !== 0 || this.dataArrayChanged)) {
         // 如果数据进行了transforms 属性会发生改变 或者数据dataArray发生更新
         const item = this.data.dataArray.find((dataItem: IParseDataItem) => {
           return dataItem._id === id;