feat(layer): add blend 效果配置支持 normal,additive

antvis · Dec 18, 2019 · 07da3f7 · 07da3f7
1 parent b40f408
commit 07da3f7
Show file tree

Hide file tree

Showing 25 changed files with 248 additions and 55 deletions.
diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md
@@ -24,6 +24,10 @@ new Layer(option)
 
 ## 配置项
 
+### name
+
+设置图层名称,可根据 name 获取 layer;
+
 ### visable
 
 图层是否可见   {bool } default true
@@ -40,6 +44,15 @@ new Layer(option)
 
 图层显示最大缩放等级 （0-18）   {number}  default 18
 
+### blend
+
+图层元素混合效果
+
+- normal 正常效果 默认
+- additive 叠加模式
+- subtractive 相减模式
+- max 最大值
+
 # 方法
 
 ### source
@@ -284,6 +297,13 @@ scene.render();
 layer.setData(data);
 ```
 
+### setBlend(type)
+
+设置图层叠加方法
+参数：
+
+- type blend 类型
+
 ## 图层控制方法
 
 ### show
@@ -422,3 +442,13 @@ layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发
 layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键
 layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件
 ```
+
+## 图层事件
+
+### inited
+
+图层初始化完成后触发
+
+### remove
+
+图层移除时触发
diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts
@@ -50,6 +50,7 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
   visible: true,
   autoFit: false,
   zIndex: 0,
+  blend: 'normal',
   pickedFeatureID: -1,
   enableMultiPassRenderer: true,
   enablePicking: true,

diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts
@@ -3,7 +3,11 @@ import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable';
 import Clock from '../../utils/clock';
 import { ISceneConfig } from '../config/IConfigService';
 import { IMapService } from '../map/IMapService';
-import { IModel, IModelInitializationOptions } from '../renderer/IModel';
+import {
+  IBlendOptions,
+  IModel,
+  IModelInitializationOptions,
+} from '../renderer/IModel';
 import {
   IMultiPassRenderer,
   IPass,
@@ -22,6 +26,16 @@ import {
   StyleAttributeOption,
   Triangulation,
 } from './IStyleAttributeService';
+export enum BlendType {
+  normal = 'normal',
+  additive = 'additive',
+  subtractive = 'subtractive',
+  min = 'min',
+  max = 'max',
+}
+export interface IBlendTypes {
+  [key: string]: Partial<IBlendOptions>;
+}
 export interface IDataState {
   dataSourceNeedUpdate: boolean;
   dataMappingNeedUpdate: boolean;
@@ -38,6 +52,7 @@ export interface ILayerModelInitializationOptions {
 export interface ILayerModel {
   render(): void;
   getUninforms(): IModelUniform;
+  getBlend(): IBlendOptions;
   buildModels(): IModel[];
 }
 export interface IModelUniform {
@@ -57,7 +72,8 @@ export interface IActiveOption {
 
 export interface ILayer {
   id: string; // 一个场景中同一类型 Layer 可能存在多个
-  name: string; // 代表 Layer 的类型
+  type: string; // 代表 Layer 的类型
+  name: string; //
   inited: boolean; // 是否初始化完成
   zIndex: number;
   plugins: ILayerPlugin[];
@@ -120,6 +136,7 @@ export interface ILayer {
   isVisible(): boolean;
   setMaxZoom(min: number): ILayer;
   setMinZoom(max: number): ILayer;
+  setBlend(type: keyof typeof BlendType): void;
   // animate(field: string, option: any): ILayer;
   render(): ILayer;
   destroy(): void;
@@ -190,6 +207,8 @@ export interface ILayerConfig {
   visible: boolean;
   zIndex: number;
   autoFit: boolean;
+  name: string; //
+  blend: keyof typeof BlendType;
   pickedFeatureID: number;
   enableMultiPassRenderer: boolean;
   passes: Array<string | [string, { [key: string]: unknown }]>;

diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts
@@ -38,15 +38,16 @@ export default class LayerService implements ILayerService {
     return this.layers;
   }
 
-  public getLayer(id: string): ILayer | undefined {
-    return this.layers.find((layer) => layer.id === id);
+  public getLayer(name: string): ILayer | undefined {
+    return this.layers.find((layer) => layer.name === name);
   }
 
   public remove(layer: ILayer): void {
     const layerIndex = this.layers.indexOf(layer);
     if (layerIndex > -1) {
       this.layers.splice(layerIndex, 1);
     }
+    layer.emit('remove', null);
     layer.destroy();
     this.renderLayers();
   }

diff --git a/packages/core/src/services/log/LogService.ts b/packages/core/src/services/log/LogService.ts
@@ -4,7 +4,7 @@ import { ILogService } from './ILogService';
 
 const Logger = new Log({ id: 'L7' }).enable(true);
 // // 只输出 debug 级别以上的日志信息
-Logger.priority = 4;
+Logger.priority = 5;
 
 @injectable()
 export default class LogService implements ILogService {

diff --git a/packages/core/src/services/renderer/IModel.ts b/packages/core/src/services/renderer/IModel.ts
@@ -3,6 +3,30 @@ import { IAttribute } from './IAttribute';
 import { IElements } from './IElements';
 import { IUniform } from './IUniform';
 
+export interface IBlendOptions {
+  // gl.enable(gl.BLEND)
+  enable: boolean;
+  // gl.blendFunc
+  func: BlendingFunctionSeparate;
+  // gl.blendEquation
+  equation: {
+    // TODO: EXT_blend_minmax
+    rgb:
+      | gl.FUNC_ADD
+      | gl.FUNC_SUBTRACT
+      | gl.FUNC_REVERSE_SUBTRACT
+      | gl.MIN_EXT
+      | gl.MAX_EXT;
+    alpha?:
+      | gl.FUNC_ADD
+      | gl.FUNC_SUBTRACT
+      | gl.FUNC_REVERSE_SUBTRACT
+      | gl.MIN_EXT
+      | gl.MAX_EXT;
+  };
+  // gl.blendColor
+  color: [number, number, number, number];
+}
 type stencilOp =
   | gl.ZERO
   | gl.KEEP
@@ -153,20 +177,7 @@ export interface IModelInitializationOptions {
   /**
    * blending
    */
-  blend?: Partial<{
-    // gl.enable(gl.BLEND)
-    enable: boolean;
-    // gl.blendFunc
-    func: BlendingFunctionSeparate;
-    // gl.blendEquation
-    equation: {
-      // TODO: EXT_blend_minmax
-      rgb: gl.FUNC_ADD | gl.FUNC_SUBTRACT | gl.FUNC_REVERSE_SUBTRACT;
-      alpha: gl.FUNC_ADD | gl.FUNC_SUBTRACT | gl.FUNC_REVERSE_SUBTRACT;
-    };
-    // gl.blendColor
-    color: [number, number, number, number];
-  }>;
+  blend?: Partial<IBlendOptions>;
 
   /**
    * stencil
@@ -221,6 +232,8 @@ export interface IModelDrawOptions {
     [key: string]: IAttribute;
   };
   elements?: IElements;
+
+  blend?: IBlendOptions;
 }
 
 /**

diff --git a/packages/core/src/services/renderer/gl.ts b/packages/core/src/services/renderer/gl.ts
@@ -60,6 +60,10 @@ export enum gl {
   FUNC_SUBTRACT = 0x800a,
   FUNC_REVERSE_SUBTRACT = 0x800b,
 
+  /** Blend Min Max */
+  MAX_EXT = 0x8008,
+  MIN_EXT = 0x8007,
+
   /* Separate Blend Functions */
   BLEND_DST_RGB = 0x80c8,
   BLEND_SRC_RGB = 0x80c9,

diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts
@@ -1,4 +1,5 @@
 import {
+  BlendType,
   gl,
   IActiveOption,
   IAnimateOption,
@@ -34,17 +35,17 @@ import {
   ScaleTypes,
   StyleAttributeField,
   StyleAttributeOption,
-  TYPES,
+   TYPES
 } from '@antv/l7-core';
 import Source from '@antv/l7-source';
-import { bindAll } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
 import { isFunction, isObject } from 'lodash';
 // @ts-ignore
 import mergeJsonSchemas from 'merge-json-schemas';
 import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable';
 import { normalizePasses } from '../plugins/MultiPassRendererPlugin';
+import { BlendTypes } from '../utils/blend';
 import baseLayerSchema from './schema';
 /**
  * 分配 layer id
@@ -55,6 +56,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   implements ILayer {
   public id: string = `${layerIdCounter++}`;
   public name: string;
+  public type: string;
   public visible: boolean = true;
   public zIndex: number = 0;
   public minZoom: number;
@@ -165,6 +167,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
   constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
     super();
+    this.name = config.name || this.id;
     this.rawConfig = config;
   }
 
@@ -299,6 +302,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     this.buildModels();
     // 触发初始化完成事件;
     this.emit('inited');
+    this.emit('added');
     return this;
   }
 
@@ -514,10 +518,18 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
       this.interactionService.triggerSelect(id);
     }
   }
+  public setBlend(type: keyof typeof BlendType): void {
+    this.updateLayerConfig({
+      blend: type,
+    });
+    this.layerModelNeedUpdate = true;
+    this.render();
+  }
   public show(): ILayer {
     this.updateLayerConfig({
       visible: true,
     });
+
     return this;
   }
 
@@ -685,15 +697,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
       fs,
       vs,
       elements,
-      blend: {
-        enable: true,
-        func: {
-          srcRGB: gl.SRC_ALPHA,
-          srcAlpha: 1,
-          dstRGB: gl.ONE_MINUS_SRC_ALPHA,
-          dstAlpha: 1,
-        },
-      },
+      blend: BlendTypes[BlendType.normal],
       ...rest,
     });
   }

diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts
@@ -1,5 +1,7 @@
 import {
+  BlendType,
   IAttribute,
+  IBlendOptions,
   ICameraService,
   IElements,
   IFontService,
@@ -17,7 +19,7 @@ import {
   Triangulation,
   TYPES,
 } from '@antv/l7-core';
-
+import { BlendTypes } from '../utils/blend';
 export default class BaseModel implements ILayerModel {
   public triangulation: Triangulation;
 
@@ -54,7 +56,10 @@ export default class BaseModel implements ILayerModel {
       .get<ICameraService>(TYPES.ICameraService);
     this.registerBuiltinAttributes();
   }
-
+  public getBlend(): IBlendOptions {
+    const { blend = 'normal' } = this.layer.getLayerConfig();
+    return BlendTypes[BlendType[blend]] as IBlendOptions;
+  }
   public getUninforms(): IModelUniform {
     throw new Error('Method not implemented.');
   }

diff --git a/packages/layers/src/heatmap/index.ts b/packages/layers/src/heatmap/index.ts
@@ -5,7 +5,7 @@ interface IPointLayerStyleOptions {
   opacity: number;
 }
 export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
-  public name: string = 'HeatMapLayer';
+  public type: string = 'HeatMapLayer';
   protected getConfigSchema() {
     return {
       properties: {

diff --git a/packages/layers/src/line/dash.ts b/packages/layers/src/line/dash.ts
@@ -10,7 +10,7 @@ interface IDashLineLayerStyleOptions {
 export default class DashLineLayer extends BaseLayer<
   IDashLineLayerStyleOptions
 > {
-  public name: string = 'LineLayer';
+  public type: string = 'LineLayer';
 
   protected getConfigSchema() {
     return {

diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts
@@ -4,7 +4,7 @@ interface IPointLayerStyleOptions {
   opacity: number;
 }
 export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
-  public name: string = 'LineLayer';
+  public type: string = 'LineLayer';
 
   private animateStartTime: number = 0;
 

diff --git a/packages/layers/src/point/index.ts b/packages/layers/src/point/index.ts
@@ -7,7 +7,7 @@ interface IPointLayerStyleOptions {
   strokeColor: string;
 }
 export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
-  public name: string = 'PointLayer';
+  public type: string = 'PointLayer';
   protected getConfigSchema() {
     return {
       properties: {