From 214c039723730f7d788d0113496035bf94276da1 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Fri, 24 Dec 2021 17:56:35 +0800 Subject: [PATCH] Shihuidev (#898) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 增加着色器的拾取计算控制、完善 arcmini * feat: 完善 enableShaderPick/disableShaderPick 功能 * style: lint style * feat: 补充调用高德地图公交线路查询 demo * style: lint style * feat: 优化弧线的纹理动画 * style: lint style * feat: 去除greatCircle 的纹理动画优化 * feat: 扩展点图层圆柱效果 * feat: 增加几何体的径向渐变配置 * style: lint style * fix: 修复bug 图层触发的事件跟图层设置的zIndex无关，只跟插入图层先后顺序有关 * style: lint style * feat: 补全挤出几何体拾取颜色的光照配置 * style: lint style * fix: 修复圆柱 cull 问题 mapbox amap 不同 * feat: 图层销毁时的内存泄漏 * style: lint style * feat: 平面弧线新增弧线偏移量的数据映射能力 * style: lint style * fix: 修复重复销毁bug * style: lint style * feat: 修复 texture 重复销毁问题 * style: lint style * fix: 修复图层叠加模式下的拾取失效问题 * style: lint style * fix: 修复纹理贴图在 zoom 大于 12 时存在的问题 * fix: 修复水波点颜色偏暗 * feat: 优化点图层的渲染效果，叠加渲染效果 * style: lint style * fix: 修复 layer contextmenu 事件丢失 * fix: 修复 map 类型 resize 失效 * style: lint style * feat: 增加瓦片地图的请求节流 * style: lint style * feat: 优化热力图在 radius 数值比较大时热力点边缘发生裁剪的现象 * style: lint style * fix: 修复resize 后 picking shiqu 拾取失败的问题 * feat: 优化 marker/popup 在容器边缘的表现 * feat: 增加 setEnableRender 方法 * style: lint style * feat: 增加城市图层扫光特效 * style: lint style * feat: 补全拾取色混合配置 * style: lint style * feat: 增加高德地图的面积大小点 * style: lint style * feat: 点优化边缘锯齿 * fix: 修复pointLayer stroke 变暗问题 * fix: 修复混合导致的拾取错误 * feat: add simple point 1.0 * style: lint style * feat: simple point support stroke * style: lint style * feat: 优化 simple point 边缘的锯齿 * style: lint style * feat: add point cylinder raising animate * style: lint style * feat: 优化点图层 icon 在小尺寸下的锯齿问题 * style: lint style * feat: 修复 layer destroy 报错、未清理、未重绘、补充触发 destroy 事件 * fix: 修复 marker 在 cluster getMakers 失效 * style: lint style * feat: 清除 marker layer cluster fix * style: lint style * fix: 修复 markerLayer hide show 方法缺少 cluster 模式下的控制 * style: lint style * feat: 取消在 shape 方法执行后的暴力更新 * style: lint style * feat: 增加图层保底颜色设置 * style: lint style * feat: 将兜底颜色改为 bottomColor --- .../core/src/services/layer/ILayerService.ts | 2 + packages/layers/src/core/BaseLayer.ts | 11 +++ .../layers/src/plugins/DataMappingPlugin.ts | 30 +++++++-- .../src/plugins/UpdateStyleAttributePlugin.ts | 5 +- packages/three/src/core/baseLayer.ts | 8 +++ stories/Map/components/amap2demo_polygon.tsx | 67 +++++++++++++++++++ stories/customMap/components/Map.tsx | 38 ++++++----- 7 files changed, 135 insertions(+), 26 deletions(-) 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); }); }); }