From 41375168626b1493dae7a1a4186b13dc702ecdea Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Wed, 8 Dec 2021 17:12:12 +0800 Subject: [PATCH] Shihuidev (#872) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix: 修复图层叠加模式下的拾取失效问题 style: lint style --- .../services/interaction/PickingService.ts | 2 +- .../core/src/services/layer/ILayerService.ts | 2 +- packages/core/src/services/renderer/IModel.ts | 2 +- packages/layers/src/core/BaseLayer.ts | 11 +++++--- packages/renderer/src/regl/ReglModel.ts | 27 ++++++++++++++++--- stories/Map/components/mapCenter.tsx | 2 +- 6 files changed, 35 insertions(+), 11 deletions(-) diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index c8f01e727f..758e2524b2 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -221,7 +221,7 @@ export default class PickingService implements IPickingService { depth: 1, }); layer.hooks.beforePickingEncode.call(); - layer.renderModels(); + layer.renderModels(true); layer.hooks.afterPickingEncode.call(); const isPicked = this.pickFromPickingFBO(layer, target); return isPicked && !layer.getLayerConfig().enablePropagation; diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 43c1bdd40c..700c52d805 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -147,7 +147,7 @@ export interface ILayer { setCurrentSelectedId(id: number | null): void; getCurrentSelectedId(): number | null; prepareBuildModel(): void; - renderModels(): void; + renderModels(isPicking?: boolean): void; buildModels(): void; rebuildModels(): void; buildLayerModel( diff --git a/packages/core/src/services/renderer/IModel.ts b/packages/core/src/services/renderer/IModel.ts index 0ae015ddc2..4bda4dee3b 100644 --- a/packages/core/src/services/renderer/IModel.ts +++ b/packages/core/src/services/renderer/IModel.ts @@ -244,6 +244,6 @@ export interface IModelDrawOptions { */ export interface IModel { addUniforms(uniforms: { [key: string]: IUniform }): void; - draw(options: IModelDrawOptions): void; + draw(options: IModelDrawOptions, pick?: boolean): void; destroy(): void; } diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 945acd0577..550c3684f1 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -963,7 +963,7 @@ export default class BaseLayer extends EventEmitter throw new Error('Method not implemented.'); } - public renderModels() { + public renderModels(isPicking?: boolean) { // TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题 if (this.getEncodedData().length > 0) { if (this.layerModelNeedUpdate && this.layerModel) { @@ -972,9 +972,12 @@ export default class BaseLayer extends EventEmitter this.layerModelNeedUpdate = false; } this.models.forEach((model) => { - model.draw({ - uniforms: this.layerModel.getUninforms(), - }); + model.draw( + { + uniforms: this.layerModel.getUninforms(), + }, + isPicking, + ); }); } return this; diff --git a/packages/renderer/src/regl/ReglModel.ts b/packages/renderer/src/regl/ReglModel.ts index fe853134d6..377306e240 100644 --- a/packages/renderer/src/regl/ReglModel.ts +++ b/packages/renderer/src/regl/ReglModel.ts @@ -7,7 +7,7 @@ import { IUniform, } from '@antv/l7-core'; import regl from 'l7regl'; -import { isPlainObject, isTypedArray } from 'lodash'; +import { cloneDeep, isPlainObject, isTypedArray } from 'lodash'; import { blendEquationMap, blendFuncMap, @@ -29,6 +29,7 @@ export default class ReglModel implements IModel { private reGl: regl.Regl; private destroyed: boolean = false; private drawCommand: regl.DrawCommand; + private drawPickCommand: regl.DrawCommand; private drawParams: regl.DrawConfig; private options: IModelInitializationOptions; private uniforms: { @@ -93,6 +94,18 @@ export default class ReglModel implements IModel { this.initCullDrawParams({ cull }, drawParams); this.drawCommand = reGl(drawParams); + + const pickDrawParams = cloneDeep(drawParams); + // @ts-ignore + pickDrawParams.blend.enable = true; + // @ts-ignore + pickDrawParams.blend.func = { + dstAlpha: 'one', + dstRGB: 'one minus src alpha', + srcAlpha: 'one', + srcRGB: 'src alpha', + }; + this.drawPickCommand = reGl(pickDrawParams); this.drawParams = drawParams; } @@ -103,7 +116,8 @@ export default class ReglModel implements IModel { }; } - public draw(options: IModelDrawOptions) { + public draw(options: IModelDrawOptions, pick?: boolean) { + // console.log('options', this.drawParams) if ( this.drawParams.attributes && Object.keys(this.drawParams.attributes).length === 0 @@ -143,7 +157,14 @@ export default class ReglModel implements IModel { | ReglTexture2D).get(); } }); - this.drawCommand(reglDrawProps); + // TODO: 在进行拾取操作的绘制中，不应该使用叠加模式 - picking 根据拾取的颜色作为判断的输入，而叠加模式会产生新的，在 id 序列中不存在的颜色 + if (!pick) { + this.drawCommand(reglDrawProps); + } else { + this.drawPickCommand(reglDrawProps); + } + // this.drawCommand(reglDrawProps); + // this.drawPickCommand(reglDrawProps); } public destroy() { diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index c64c20accc..fe7c08d7ee 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -28,7 +28,7 @@ export default class GaodeMapComponent extends React.Component { // min = 'min', // max = 'max', // none = 'none', - const layer = new PointLayer({ zIndex: 2, blend: 'additive' }) + const layer = new PointLayer({ zIndex: 2, blend: 'additive' }) // .source( [ {