feat: simple line 支持 (#1408)

* feat: 瓦片支持 simple line

* chore: change test instance

* chore: simple line 数据拆分方法调整

* style: lint style

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

dev-demos/tile/district/simpleLine.tsx

@@ -0,0 +1,53 @@
+// @ts-ignore
+import { Scene, LineLayer } 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 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],
+          },
+        },
+      )
+      .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/simpleLine.md

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

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

@@ -21,7 +21,7 @@ import {
 import { IRendererService } from '../renderer/IRendererService';
 import { ITexture2D } from '../renderer/ITexture2D';
 import { IUniform } from '../renderer/IUniform';
-import { ISource, ISourceCFG, ITransform } from '../source/ISourceService';
+import { ISource, ISourceCFG, ITransform, IParseDataItem } from '../source/ISourceService';
 import {
   IAnimateOption,
   IEncodeFeature,
@@ -343,7 +343,7 @@ export interface ILayer {
   isVector?: boolean;
   isTileLayer?: boolean;
   triangulation?: Triangulation | undefined;
-
+  processData(data: IParseDataItem[]): IParseDataItem[];
   /**
    * threejs 适配兼容相关的方法
    * @param lnglat

packages/layers/src/core/BaseLayer.ts

@@ -43,6 +43,7 @@ import {
   IStyleAttributeService,
   IStyleAttributeUpdateOptions,
   LayerEventType,
+  IParseDataItem,
   lazyInject,
   LegendItems,
   StyleAttributeField,
@@ -1398,6 +1399,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     console.warn('empty fn');
   }
 
+  // 数据处理 在数据进行 mapping 生成 encodeData 之前对数据进行处理
+  // 在各个 layer 中继承
+  public processData(filterData: IParseDataItem[]) {
+    return filterData;
+  }
+
   protected getModelType(): unknown {
     throw new Error('Method not implemented.');
   }

packages/layers/src/core/triangulation.ts

@@ -212,7 +212,17 @@ function pushDis(point: number[], n?: number) {
   return point;
 }
 
-function getSimpleLineVertices(points: number[][]) {
+function getSimpleLineVertices(coordinates: number[][]) {
+  let points = coordinates;
+  if (
+    Array.isArray(points) &&
+    Array.isArray(points[0]) &&
+    Array.isArray(points[0][0])
+  ) {
+    // @ts-ignore
+    points = coordinates.flat();
+  }
+
   let distance = 0;
   if (points.length < 2) {
     return {

packages/layers/src/line/index.ts

@@ -1,4 +1,5 @@
 import BaseLayer from '../core/BaseLayer';
+import { IParseDataItem } from '@antv/l7-core';
 import { ILineLayerStyleOptions } from '../core/interface';
 import LineModels, { LineModelType } from './models';
 import { isVectorTile } from '../tile/utils';
@@ -64,4 +65,28 @@ export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
     const shape = shapeAttribute?.scale?.field as LineModelType;
     return shape || 'line';
   }
+
+  public processData(filterData: IParseDataItem[]) {
+    // simple line 在接受 multiPolygon 的数据进行绘制的时候需要对数据进行拆解
+    if (this.getModelType() !== 'simple') return filterData;
+    const dataArray: IParseDataItem[] = [];
+    filterData.map((data) => {
+      if (
+        Array.isArray(data.coordinates) &&
+        Array.isArray(data.coordinates[0]) &&
+        Array.isArray(data.coordinates[0][0])
+      ) {
+        const object = { ...data };
+        data.coordinates.map((d) => {
+          dataArray.push({
+            ...object,
+            coordinates: d,
+          });
+        });
+      } else {
+        dataArray.push(data);
+      }
+    });
+    return dataArray;
+  }
 }

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -118,6 +118,11 @@ export default class DataMappingPlugin implements ILayerPlugin {
         return this.applyAttributeMapping(filter, record, bottomColor)[0];
       });
     }
+    // Tip: layer 对数据做处理
+    // 数据处理 在数据进行 mapping 生成 encodeData 之前对数据进行处理
+    // 在各个 layer 中继承
+    filterData = layer.processData(filterData);
+
     const encodeData = this.mapping(
       layer,
       attributes,

packages/layers/src/point/__tests__/layer_init.spec.ts

@@ -43,24 +43,32 @@ describe('template', () => {
     ).shape('circle')
     .color('red')
     .size(10)
-    scene.addLayer(layer)
+    scene.on('loaded',  () =>{
+      scene.addLayer(layer)
+   })
     
   });
   it('scene layer text', async () => {
-  //   const layer = new PointLayer({name:'text'}).source(
+    const layer = new PointLayer({name:'text'}).source(
-  //       testData,
+        testData,
-  //     {
+      {
-  //       parser: {
+        parser: {
-  //         type: 'json',
+          type: 'json',
-  //         x: 'x',
+          x: 'x',
-  //         y: 'y',
+          y: 'y',
-  //       },
+        },
-  //     },
+      },
-  //   ).shape('name','text')
+    ).shape('name','text')
-  //   .color('name',['red','blue'])
+    .color('name',['red','blue'])
-  //   .size('v',[10,20])
+    .size('v',[10,20])
-  //   scene.addLayer(layer)
+
-  //  expect(layer.name).toEqual('text')
+    scene.on('loaded',  () =>{
+      scene.addLayer(layer)
+      expect(layer.name).toEqual('text')
+   })
+
+    // scene.addLayer(layer)
+  
     
   });
 

packages/source/src/source.ts

@@ -215,7 +215,7 @@ export default class Source extends EventEmitter implements ISource {
     this.tileset?.destroy();
   }
 
-  private async handleData() {
+  private async processData() {
     return await new Promise((resolve, reject) => {
       try {
         this.excuteParser();
@@ -251,7 +251,7 @@ export default class Source extends EventEmitter implements ISource {
 
   private async init() {
     this.inited = false;
-    await this.handleData();
+    await this.processData();
     this.inited = true;
   }