diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 8c7a619681..ca5fd3e58e 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -141,6 +141,8 @@ export interface ILayer { getShaderPickStat: () => boolean; needPick(type: string): boolean; getLayerConfig(): Partial; + setBottomColor(color: string): void; + getBottomColor(): string; getContainer(): Container; setContainer(container: Container, sceneContainer: Container): void; setCurrentPickId(id: number | null): void; diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 10c524d11b..bc9ec722fc 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -186,6 +186,9 @@ export default class BaseLayer extends EventEmitter private aniamateStatus: boolean = false; + // TODO: layer 保底颜色 + private bottomColor = 'rgba(0, 0, 0, 0)'; + // private pickingPassRender: IPass<'pixelPicking'>; constructor(config: Partial = {}) { @@ -237,6 +240,14 @@ export default class BaseLayer extends EventEmitter return this.container; } + public setBottomColor(color: string) { + this.bottomColor = color; + } + + public getBottomColor() { + return this.bottomColor; + } + public addPlugin(plugin: ILayerPlugin): ILayer { // TODO: 控制插件注册顺序 // @example: diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index 006db926d9..2749edc6f5 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/packages/layers/src/plugins/DataMappingPlugin.ts @@ -49,6 +49,7 @@ export default class DataMappingPlugin implements ILayerPlugin { if (layer.layerModelNeedUpdate) { return; } + const bottomColor = layer.getBottomColor(); const attributes = styleAttributeService.getLayerStyleAttributes() || []; const filter = styleAttributeService.getLayerStyleAttribute('filter'); const { dataArray } = layer.getSource().data; @@ -59,13 +60,15 @@ export default class DataMappingPlugin implements ILayerPlugin { // 数据过滤完 再执行数据映射 if (filter?.needRemapping && filter?.scale) { filterData = dataArray.filter((record: IParseDataItem) => { - return this.applyAttributeMapping(filter, record)[0]; + return this.applyAttributeMapping(filter, record, bottomColor)[0]; }); } if (attributesToRemapping.length) { // 过滤数据 if (filter?.needRemapping) { - layer.setEncodedData(this.mapping(attributes, filterData)); + layer.setEncodedData( + this.mapping(attributes, filterData, undefined, bottomColor), + ); filter.needRemapping = false; } else { layer.setEncodedData( @@ -73,6 +76,7 @@ export default class DataMappingPlugin implements ILayerPlugin { attributesToRemapping, filterData, layer.getEncodedData(), + bottomColor, ), ); } @@ -87,6 +91,7 @@ export default class DataMappingPlugin implements ILayerPlugin { styleAttributeService, }: { styleAttributeService: IStyleAttributeService }, ) { + const bottomColor = layer.getBottomColor(); const attributes = styleAttributeService.getLayerStyleAttributes() || []; const filter = styleAttributeService.getLayerStyleAttribute('filter'); const { dataArray } = layer.getSource().data; @@ -94,16 +99,19 @@ export default class DataMappingPlugin implements ILayerPlugin { // 数据过滤完 再执行数据映射 if (filter?.scale) { filterData = dataArray.filter((record: IParseDataItem) => { - return this.applyAttributeMapping(filter, record)[0]; + return this.applyAttributeMapping(filter, record, bottomColor)[0]; }); } - layer.setEncodedData(this.mapping(attributes, filterData)); + layer.setEncodedData( + this.mapping(attributes, filterData, undefined, bottomColor), + ); } private mapping( attributes: IStyleAttribute[], data: IParseDataItem[], predata?: IEncodeFeature[], + minimumColor?: string, ): IEncodeFeature[] { // console.log('data', data) const mappedData = data.map((record: IParseDataItem, i) => { @@ -119,7 +127,11 @@ export default class DataMappingPlugin implements ILayerPlugin { .forEach((attribute: IStyleAttribute) => { // console.log('attribute', attribute) // console.log('record', record) - let values = this.applyAttributeMapping(attribute, record); + let values = this.applyAttributeMapping( + attribute, + record, + minimumColor, + ); // console.log('values', values) attribute.needRemapping = false; @@ -183,6 +195,7 @@ export default class DataMappingPlugin implements ILayerPlugin { private applyAttributeMapping( attribute: IStyleAttribute, record: { [key: string]: unknown }, + minimumColor?: string, ) { if (!attribute.scale) { return []; @@ -201,7 +214,12 @@ export default class DataMappingPlugin implements ILayerPlugin { }); // console.log('params', params) // console.log('attribute', attribute) - // console.log('mapping',attribute.mapping ? attribute.mapping(params) : []) + if (attribute.name === 'color') { + if (params.length === 0 || params[0] === '') { + return [minimumColor]; + } + } + return attribute.mapping ? attribute.mapping(params) : []; } } diff --git a/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts b/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts index acd1ca60be..af0828c4bf 100644 --- a/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts +++ b/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts @@ -44,8 +44,9 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin { const filter = styleAttributeService.getLayerStyleAttribute('filter'); const shape = styleAttributeService.getLayerStyleAttribute('shape'); if ( - (filter && filter.needRegenerateVertices) || - (shape && shape.needRegenerateVertices) // TODO:Shape 更新重新build + filter && + filter.needRegenerateVertices // || + // (shape && shape.needRegenerateVertices) // TODO:Shape 更新重新build ) { layer.layerModelNeedUpdate = true; attributes.forEach((attr) => (attr.needRegenerateVertices = false)); diff --git a/packages/three/src/core/baseLayer.ts b/packages/three/src/core/baseLayer.ts index 85b058ef7f..871df66d40 100644 --- a/packages/three/src/core/baseLayer.ts +++ b/packages/three/src/core/baseLayer.ts @@ -216,4 +216,12 @@ export default class ThreeJSLayer public addAnimateMixer(mixer: AnimationMixer) { this.animateMixer.push(mixer); } + + public setBottomColor(color: string): void { + console.warn('empty function'); + } + + public getBottomColor() { + return 'rgba(0, 0, 0, 0)'; + } } diff --git a/stories/Map/components/amap2demo_polygon.tsx b/stories/Map/components/amap2demo_polygon.tsx index e519db4717..e119255c73 100644 --- a/stories/Map/components/amap2demo_polygon.tsx +++ b/stories/Map/components/amap2demo_polygon.tsx @@ -92,6 +92,64 @@ export default class Amap2demo_polygon extends React.Component { ], }; + const data2 = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: { + testOpacity: 0.4, + }, + geometry: { + type: 'MultiPolygon', + coordinates: [ + [ + [ + [110.5224609375, 32.731840896865684], + [113.0712890625, 32.731840896865684], + [113.0712890625, 34.56085936708384], + [110.5224609375, 34.56085936708384], + [110.5224609375, 32.731840896865684], + ], + [ + [111.26953125, 33.52307880890422], + [111.26953125, 34.03445260967645], + [112.03857421875, 34.03445260967645], + [112.03857421875, 33.52307880890422], + [111.26953125, 33.52307880890422], + ], + ], + ], + }, + }, + { + type: 'Feature', + properties: { + testOpacity: 0.8, + }, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [113.8623046875, 30.031055426540206], + [116.3232421875, 30.031055426540206], + [116.3232421875, 31.090574094954192], + [113.8623046875, 31.090574094954192], + [113.8623046875, 30.031055426540206], + ], + [ + [117.26806640625, 32.13840869677249], + [118.36669921875, 32.13840869677249], + [118.36669921875, 32.47269502206151], + [117.26806640625, 32.47269502206151], + [117.26806640625, 32.13840869677249], + ], + ], + }, + }, + ], + }; + const layer = new PolygonLayer({ autoFit: true, }) @@ -104,6 +162,15 @@ export default class Amap2demo_polygon extends React.Component { }); scene.addLayer(layer); + setTimeout(() => { + layer + .setData(data2) + .shape('fill') + .color('#0f0'); + + scene.render(); + }, 1000); + // const layer2 = new PolygonLayer({ // autoFit: true, // }) diff --git a/stories/customMap/components/Map.tsx b/stories/customMap/components/Map.tsx index 81ea636d6d..aa09e3f946 100644 --- a/stories/customMap/components/Map.tsx +++ b/stories/customMap/components/Map.tsx @@ -25,7 +25,7 @@ export default class ScaleComponent extends React.Component { let layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true .source(data) .size('name', [0, 10000, 50000, 30000, 100000]) - .color('name', [ + .color('name1', [ '#2E8AE6', '#69D1AB', '#DAF291', @@ -43,25 +43,27 @@ export default class ScaleComponent extends React.Component { }, }); - let layer2 = new PolygonLayer({ blend: 'normal' }) - .source(data) - .size(1) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49', - ]) - .shape('line') - .select(true) - .style({ - opacity: 1.0, - }); + layer.setBottomColor('#f00'); + + // let layer2 = new PolygonLayer({ blend: 'normal' }) + // .source(data) + // .size(1) + // .color('name', [ + // '#2E8AE6', + // '#69D1AB', + // '#DAF291', + // '#FFD591', + // '#FF7A45', + // '#CF1D49', + // ]) + // .shape('line') + // .select(true) + // .style({ + // opacity: 1.0, + // }); scene.addLayer(layer); - scene.addLayer(layer2); + // scene.addLayer(layer2); }); }); }