diff --git a/dev-demos/tile/district/simpleLine.tsx b/dev-demos/tile/district/simpleLine.tsx new file mode 100644 index 0000000000..b5ae7aa706 --- /dev/null +++ b/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 ( +
+ ); +}; diff --git a/dev-demos/tile/simpleLine.md b/dev-demos/tile/simpleLine.md new file mode 100644 index 0000000000..0c9da00fd0 --- /dev/null +++ b/dev-demos/tile/simpleLine.md @@ -0,0 +1,9 @@ +--- +title: Simple Line +order: 0 +--- + + +### Simple Line + + \ No newline at end of file diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 862dd210c7..ba6e863d00 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/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 diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 1e00f02ad0..017c8cfd91 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/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 console.warn('empty fn'); } + // 数据处理 在数据进行 mapping 生成 encodeData 之前对数据进行处理 + // 在各个 layer 中继承 + public processData(filterData: IParseDataItem[]) { + return filterData; + } + protected getModelType(): unknown { throw new Error('Method not implemented.'); } diff --git a/packages/layers/src/core/triangulation.ts b/packages/layers/src/core/triangulation.ts index 619bfbc95d..22ba6b3d32 100644 --- a/packages/layers/src/core/triangulation.ts +++ b/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 { diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts index d8bb91b83f..76a6a99dca 100644 --- a/packages/layers/src/line/index.ts +++ b/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 { 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; + } } diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index 45bc8c9b8b..8f0b86e75f 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/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, diff --git a/packages/layers/src/point/__tests__/layer_init.spec.ts b/packages/layers/src/point/__tests__/layer_init.spec.ts index 3af75ab7ee..7b6bc5e530 100644 --- a/packages/layers/src/point/__tests__/layer_init.spec.ts +++ b/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( - // testData, - // { - // parser: { - // type: 'json', - // x: 'x', - // y: 'y', - // }, - // }, - // ).shape('name','text') - // .color('name',['red','blue']) - // .size('v',[10,20]) - // scene.addLayer(layer) - // expect(layer.name).toEqual('text') + const layer = new PointLayer({name:'text'}).source( + testData, + { + parser: { + type: 'json', + x: 'x', + y: 'y', + }, + }, + ).shape('name','text') + .color('name',['red','blue']) + .size('v',[10,20]) + + scene.on('loaded', () =>{ + scene.addLayer(layer) + expect(layer.name).toEqual('text') + }) + + // scene.addLayer(layer) + }); diff --git a/packages/source/src/source.ts b/packages/source/src/source.ts index b5b26c3e2f..f2b3873b4e 100644 --- a/packages/source/src/source.ts +++ b/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; }