Skip to content

Commit

Permalink
feat(layer): add blend 效果配置支持 normal,additive
Browse files Browse the repository at this point in the history
  • Loading branch information
lzxue committed Dec 18, 2019
1 parent b40f408 commit e0ab4cd
Show file tree
Hide file tree
Showing 25 changed files with 247 additions and 54 deletions.
30 changes: 30 additions & 0 deletions docs/api/layer/layer.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ new Layer(option)

## 配置项

### name

设置图层名称,可根据 name 获取 layer;

### visable

图层是否可见   {bool } default true
Expand All @@ -40,6 +44,15 @@ new Layer(option)

图层显示最大缩放等级 (0-18)   {number}  default 18

### blend

图层元素混合效果

- normal 正常效果 默认
- additive 叠加模式
- subtractive 相减模式
- max 最大值

# 方法

### source
Expand Down Expand Up @@ -284,6 +297,13 @@ scene.render();
layer.setData(data);
```

### setBlend(type)

设置图层叠加方法
参数:

- type blend 类型

## 图层控制方法

### show
Expand Down Expand Up @@ -422,3 +442,13 @@ layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发
layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键
layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件
```

## 图层事件

### inited

图层初始化完成后触发

### remove

图层移除时触发
1 change: 1 addition & 0 deletions packages/core/src/services/config/ConfigService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
visible: true,
autoFit: false,
zIndex: 0,
blend: 'normal',
pickedFeatureID: -1,
enableMultiPassRenderer: true,
enablePicking: true,
Expand Down
23 changes: 21 additions & 2 deletions packages/core/src/services/layer/ILayerService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand All @@ -38,6 +52,7 @@ export interface ILayerModelInitializationOptions {
export interface ILayerModel {
render(): void;
getUninforms(): IModelUniform;
getBlend(): IBlendOptions;
buildModels(): IModel[];
}
export interface IModelUniform {
Expand All @@ -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[];
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 }]>;
Expand Down
5 changes: 3 additions & 2 deletions packages/core/src/services/layer/LayerService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/services/log/LogService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
41 changes: 27 additions & 14 deletions packages/core/src/services/renderer/IModel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -221,6 +232,8 @@ export interface IModelDrawOptions {
[key: string]: IAttribute;
};
elements?: IElements;

blend?: IBlendOptions;
}

/**
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/services/renderer/gl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
24 changes: 14 additions & 10 deletions packages/layers/src/core/BaseLayer.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
BlendType,
gl,
IActiveOption,
IAnimateOption,
Expand Down Expand Up @@ -37,14 +38,14 @@ import {
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
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -299,6 +302,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.buildModels();
// 触发初始化完成事件;
this.emit('inited');
this.emit('added');
return this;
}

Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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,
});
}
Expand Down
9 changes: 7 additions & 2 deletions packages/layers/src/core/BaseModel.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import {
BlendType,
IAttribute,
IBlendOptions,
ICameraService,
IElements,
IFontService,
Expand All @@ -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;

Expand Down Expand Up @@ -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.');
}
Expand Down
2 changes: 1 addition & 1 deletion packages/layers/src/heatmap/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion packages/layers/src/line/dash.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ interface IDashLineLayerStyleOptions {
export default class DashLineLayer extends BaseLayer<
IDashLineLayerStyleOptions
> {
public name: string = 'LineLayer';
public type: string = 'LineLayer';

protected getConfigSchema() {
return {
Expand Down
2 changes: 1 addition & 1 deletion packages/layers/src/line/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion packages/layers/src/point/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Loading

0 comments on commit e0ab4cd

Please sign in to comment.