p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style: styles

This commit is contained in:
2912401452 2021-06-28 21:08:21 +08:00
parent 14b8ad9b37
commit 24e3661eab
31 changed files with 3869 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/services/layer/ILayerService.ts
View File

@ -29,7 +29,6 @@ import {
Triangulation,
} from './IStyleAttributeService';
import {
IStyleAttributeUpdateOptions,
StyleAttributeField,
@ -59,7 +58,6 @@ export interface ILayerModelInitializationOptions {
triangulation: Triangulation;
}
export interface ILayerModel {
render(): void;
getUninforms(): IModelUniform;
@ -215,8 +213,6 @@ export interface ILayer {
updateLayerConfig(configToUpdate: Partial<ILayerConfig | unknown>): void;
setAnimateStartTime(): void;
getLayerAnimateTime(): number;
}
/**

8
packages/core/src/services/layer/LayerService.ts
View File

@ -114,6 +114,10 @@ export default class LayerService implements ILayerService {
}
}
public getOESTextureFloat() {
return this.renderService.extensionObject.OES_texture_float;
}
private clear() {
this.renderService.clear({
color: [0, 0, 0, 0],
@ -131,8 +135,4 @@ export default class LayerService implements ILayerService {
private stopRender() {
cancelAnimationFrame(this.layerRenderID);
}
public getOESTextureFloat() {
return this.renderService.extensionObject.OES_texture_float
}
}

15
packages/core/src/services/shader/ShaderModuleService.ts
View File

@ -38,9 +38,18 @@ export default class ShaderModuleService implements IShaderModuleService {
this.registerModule('light', { vs: light, fs: '' });
this.registerModule('picking', { vs: pickingVert, fs: pickingFrag });
this.registerModule('styleMapping', { vs: styleMapping, fs: '' });
this.registerModule('styleMappingCalOpacity', { vs: styleMappingCalOpacity, fs: '' });
this.registerModule('styleMappingCalStrokeOpacity', { vs: styleMappingCalStrokeOpacity, fs: '' });
this.registerModule('styleMappingCalStrokeWidth', { vs: styleMappingCalStrokeWidth, fs: '' });
this.registerModule('styleMappingCalOpacity', {
vs: styleMappingCalOpacity,
fs: '',
});
this.registerModule('styleMappingCalStrokeOpacity', {
vs: styleMappingCalStrokeOpacity,
fs: '',
});
this.registerModule('styleMappingCalStrokeWidth', {
vs: styleMappingCalStrokeWidth,
fs: '',
});
}
public registerModule(moduleName: string, moduleParams: IModuleParams) {

94
packages/layers/src/core/BaseModel.ts
View File

@ -44,16 +44,16 @@ export type styleColor =
| string
| [string, (single: any) => string]
| [string, [string, string]];
export interface IDataTextureFrame {
data: number[];
width: number;
height: number;
}
export interface ICellProperty {
attr: string;
count: number;
}
export interface IDataTextureFrame {
data: number[];
width: number;
height: number;
}
export interface ICellProperty {
attr: string;
count: number;
}
export default class BaseModel<ChildLayerStyleOptions = {}>
implements ILayerModel {
@ -68,23 +68,25 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
protected dataTexture: ITexture2D; // 用于数据传递的数据纹理
protected DATA_TEXTURE_WIDTH: number; // 默认有多少列（宽度）
protected rowCount: number; // 计算得到的当前数据纹理有多少行（高度）
protected cacheStyleProperties: { // 记录存储上一次样式字段的值
opacity: styleSingle | undefined,
strokeOpacity: styleSingle | undefined,
strokeWidth: styleSingle | undefined,
stroke: styleColor | undefined,
offsets: styleOffset | undefined
}
protected cacheStyleProperties: {
// 记录存储上一次样式字段的值
opacity: styleSingle | undefined;
strokeOpacity: styleSingle | undefined;
strokeWidth: styleSingle | undefined;
stroke: styleColor | undefined;
offsets: styleOffset | undefined;
};
protected cellLength: number; // 单个 cell 的长度
protected cellProperties: ICellProperty[]; // 需要进行数据映射的属性集合
protected cellTypeLayout: number[];
protected stylePropertyesExist: { // 记录 style 属性是否存在的中间变量
hasOpacity: number,
hasStrokeOpacity: number,
hasStrokeWidth: number,
hasStroke: number,
hasOffsets: number
}
protected stylePropertyesExist: {
// 记录 style 属性是否存在的中间变量
hasOpacity: number;
hasStrokeOpacity: number;
hasStrokeWidth: number;
hasStroke: number;
hasOffsets: number;
};
protected dataTextureTest: boolean;
@lazyInject(TYPES.IGlobalConfigService)
@ -147,16 +149,16 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
strokeOpacity: undefined,
strokeWidth: undefined,
stroke: undefined,
offsets: undefined
}
offsets: undefined,
};
this.stylePropertyesExist = {
hasOpacity: 0,
hasStrokeOpacity: 0,
hasStrokeWidth: 0,
hasStroke: 0,
hasOffsets: 0
}
this.dataTextureTest = this.layerService.getOESTextureFloat()
hasOffsets: 0,
};
this.dataTextureTest = this.layerService.getOESTextureFloat();
}
// style datatexture mapping
@ -167,17 +169,18 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
public clearLastCalRes() {
this.cellProperties = []; // 清空上一次计算的需要进行数据映射的属性集合
this.cellLength = 0; // 清空上一次计算的 cell 的长度
this.stylePropertyesExist = { // 全量清空上一次是否需要对 style 属性进行数据映射的判断
this.stylePropertyesExist = {
// 全量清空上一次是否需要对 style 属性进行数据映射的判断
hasOpacity: 0,
hasStrokeOpacity: 0,
hasStrokeWidth: 0,
hasStroke: 0,
hasOffsets: 0
}
hasOffsets: 0,
};
}
public getCellTypeLayout() {
if(this.dataTextureTest) {
if (this.dataTextureTest) {
return [
this.rowCount, // 数据纹理有几行
this.DATA_TEXTURE_WIDTH, // 数据纹理有几列
@ -195,7 +198,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
0.0,
0.0,
0.0,
]
];
} else {
return [
1.0, // 数据纹理有几行
@ -214,9 +217,8 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
0.0,
0.0,
0.0,
]
];
}
}
/**
@ -237,7 +239,9 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
isUpdate = true;
this.cacheStyleProperties.opacity = options.opacity;
}
if (!isEqual(options.strokeOpacity, this.cacheStyleProperties.strokeOpacity)) {
if (
!isEqual(options.strokeOpacity, this.cacheStyleProperties.strokeOpacity)
) {
isUpdate = true;
this.cacheStyleProperties.strokeOpacity = options.strokeOpacity;
}
@ -274,7 +278,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
if (options.opacity !== undefined && !isNumber(options.opacity)) {
// 数据映射
this.cellProperties.push({ attr: 'opacity', count: 1 });
this.stylePropertyesExist.hasOpacity = 1
this.stylePropertyesExist.hasOpacity = 1;
this.cellLength += 1;
}
@ -284,21 +288,21 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
) {
// 数据映射
this.cellProperties.push({ attr: 'strokeOpacity', count: 1 });
this.stylePropertyesExist.hasStrokeOpacity = 1
this.stylePropertyesExist.hasStrokeOpacity = 1;
this.cellLength += 1;
}
if (options.strokeWidth !== undefined && !isNumber(options.strokeWidth)) {
// 数据映射
this.cellProperties.push({ attr: 'strokeWidth', count: 1 });
this.stylePropertyesExist.hasStrokeWidth = 1
this.stylePropertyesExist.hasStrokeWidth = 1;
this.cellLength += 1;
}
if (options.stroke !== undefined && !this.isStaticColor(options.stroke)) {
// 数据映射
this.cellProperties.push({ attr: 'stroke', count: 4 });
this.stylePropertyesExist.hasStroke = 1
this.stylePropertyesExist.hasStroke = 1;
this.cellLength += 4;
}
@ -308,7 +312,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
) {
// 数据映射
this.cellProperties.push({ attr: 'offsets', count: 2 });
this.stylePropertyesExist.hasOffsets = 1
this.stylePropertyesExist.hasOffsets = 1;
this.cellLength += 2;
}
// console.log('this.cellLength', this.cellLength)
@ -379,13 +383,13 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
if (attr === 'stroke') {
d.push(...rgb2arr(value));
} else if (attr === 'offsets') {
if(this.isOffsetStatic(value)) {
if (this.isOffsetStatic(value)) {
d.push(-value[0], value[1]);
} else {
d.push(0, 0)
d.push(0, 0);
}
} else {
d.push(isNumber(value)?value:1.0);
d.push(isNumber(value) ? value : 1.0);
}
} else {
// 若不存在时则补位

4
packages/layers/src/core/interface.ts
View File

@ -1,6 +1,4 @@
import {
styleSingle,
} from '../core/BaseModel'
import { styleSingle } from '../core/BaseModel';
export enum lineStyleType {
'solid' = 0.0,
'dash' = 1.0,

24
packages/layers/src/line/models/arc.ts
View File

@ -10,12 +10,12 @@ import {
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
import line_arc_frag from '../shaders/line_arc_frag.glsl';
import line_arc2d_vert from '../shaders/line_arc_vert.glsl';
import { isNumber } from 'lodash';
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
dash: 1.0,
@ -35,10 +35,8 @@ export default class ArcModel extends BaseModel {
iconStep = 100,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (this.dataTextureTest &&
this.dataTextureNeedUpdate({ opacity })
) {
this.judgeStyleAttributes({ opacity, });
if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
this.judgeStyleAttributes({ opacity });
const encodeData = this.layer.getEncodedData();
const { data, width, height } = this.calDataFrame(
this.cellLength,
@ -58,13 +56,13 @@ export default class ArcModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
if (dashArray.length === 2) {
@ -88,7 +86,7 @@ export default class ArcModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber: 30,

22
packages/layers/src/line/models/arc_3d.ts
View File

@ -9,12 +9,12 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
import line_arc_frag from '../shaders/line_arc_3d_frag.glsl';
import line_arc_vert from '../shaders/line_arc_3d_vert.glsl';
import { isNumber } from 'lodash';
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
dash: 1.0,
@ -51,10 +51,8 @@ export default class Arc3DModel extends BaseModel {
this.texture.bind();
}
if (this.dataTextureTest &&
this.dataTextureNeedUpdate({ opacity })
) {
this.judgeStyleAttributes({ opacity, });
if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
this.judgeStyleAttributes({ opacity });
const encodeData = this.layer.getEncodedData();
const { data, width, height } = this.calDataFrame(
this.cellLength,
@ -74,13 +72,13 @@ export default class Arc3DModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {

20
packages/layers/src/line/models/great_circle.ts
View File

@ -10,13 +10,13 @@ import {
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
// import line_arc_frag from '../shaders/line_arc_frag.glsl';
import line_arc_frag from '../shaders/line_arc_great_circle_frag.glsl';
import line_arc2d_vert from '../shaders/line_arc_great_circle_vert.glsl';
import { isNumber } from 'lodash';
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
dash: 1.0,
@ -54,9 +54,7 @@ export default class GreatCircleModel extends BaseModel {
useLinearColor = 1;
}
if (this.dataTextureTest &&
this.dataTextureNeedUpdate({ opacity })
) {
if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
this.judgeStyleAttributes({ opacity });
const encodeData = this.layer.getEncodedData();
const { data, width, height } = this.calDataFrame(
@ -77,13 +75,13 @@ export default class GreatCircleModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {

22
packages/layers/src/line/models/line.ts
View File

@ -11,12 +11,12 @@ import {
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineTriangulation } from '../../core/triangulation';
import line_frag from '../shaders/line_frag.glsl';
import line_vert from '../shaders/line_vert.glsl';
import { isNumber } from 'lodash';
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
dash: 1.0,
@ -52,10 +52,8 @@ export default class LineModel extends BaseModel {
useLinearColor = 1;
}
if (this.dataTextureTest &&
this.dataTextureNeedUpdate({ opacity })
) {
this.judgeStyleAttributes({ opacity, });
if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
this.judgeStyleAttributes({ opacity });
const encodeData = this.layer.getEncodedData();
const { data, width, height } = this.calDataFrame(
this.cellLength,
@ -75,13 +73,13 @@ export default class LineModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {

27
packages/layers/src/point/models/extrude.ts
View File

@ -1,16 +1,13 @@
import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
import BaseModel, {
styleOffset,
styleSingle,
} from '../../core/BaseModel';
import { isNumber } from 'lodash';
import BaseModel, { styleOffset, styleSingle } from '../../core/BaseModel';
import { PointExtrudeTriangulation } from '../../core/triangulation';
import { calculteCentroid } from '../../utils/geo';
import pointExtrudeFrag from '../shaders/extrude_frag.glsl';
import pointExtrudeVert from '../shaders/extrude_vert.glsl';
import { isNumber } from 'lodash';
interface IPointLayerStyleOptions {
opacity: styleSingle;
offsets: styleOffset
offsets: styleOffset;
}
export default class ExtrudeModel extends BaseModel {
public getUninforms() {
@ -20,11 +17,11 @@ export default class ExtrudeModel extends BaseModel {
if (
this.dataTextureTest &&
this.dataTextureNeedUpdate({
opacity
opacity,
})
) {
this.judgeStyleAttributes({
opacity
opacity,
});
const encodeData = this.layer.getEncodedData();
const { data, width, height } = this.calDataFrame(
@ -45,13 +42,13 @@ export default class ExtrudeModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]

14
packages/layers/src/point/models/fill.ts
View File

@ -76,13 +76,13 @@ export default class FillModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]

23
packages/layers/src/point/models/image.ts
View File

@ -6,14 +6,11 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import BaseModel, {
styleOffset,
styleSingle,
} from '../../core/BaseModel';
import { isNumber } from 'lodash';
import BaseModel, { styleOffset, styleSingle } from '../../core/BaseModel';
import { PointImageTriangulation } from '../../core/triangulation';
import pointImageFrag from '../shaders/image_frag.glsl';
import pointImageVert from '../shaders/image_vert.glsl';
import { isNumber } from 'lodash';
interface IImageLayerStyleOptions {
opacity: styleSingle;
offsets: styleOffset;
@ -60,18 +57,18 @@ export default class ImageModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_texture: this.texture,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// u_opacity: opacity || 1.0,

24
packages/layers/src/point/models/normal.ts
View File

@ -9,14 +9,11 @@ import {
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import BaseModel, {
styleOffset,
styleSingle,
} from '../../core/BaseModel';
import { isNumber } from 'lodash';
import BaseModel, { styleOffset, styleSingle } from '../../core/BaseModel';
import { BlendTypes } from '../../utils/blend';
import normalFrag from '../shaders/normal_frag.glsl';
import normalVert from '../shaders/normal_vert.glsl';
import { isNumber } from 'lodash';
interface IPointLayerStyleOptions {
opacity: styleSingle;
offsets: styleOffset;
@ -42,7 +39,8 @@ export default class NormalModel extends BaseModel {
offsets = [0, 0],
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
if (this.dataTextureTest &&
if (
this.dataTextureTest &&
this.dataTextureNeedUpdate({
opacity,
offsets,
@ -72,13 +70,13 @@ export default class NormalModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]

28
packages/layers/src/point/models/text.ts
View File

@ -10,6 +10,7 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { boundsContains, padBounds, rgb2arr } from '@antv/l7-utils';
import { isNumber, isString } from 'lodash';
import BaseModel, {
styleColor,
styleOffset,
@ -23,7 +24,6 @@ import {
IGlyphQuad,
shapeText,
} from '../../utils/symbol-layout';
import { isNumber, isString } from 'lodash';
import textFrag from '../shaders/text_frag.glsl';
import textVert from '../shaders/text_vert.glsl';
interface IPointTextLayerStyleOptions {
@ -134,17 +134,18 @@ export default class TextModel extends BaseModel {
textAllowOverlap,
};
if (this.dataTextureTest &&
if (
this.dataTextureTest &&
this.dataTextureNeedUpdate({
opacity,
strokeWidth,
stroke
stroke,
})
) {
this.judgeStyleAttributes({
opacity,
strokeWidth,
stroke
stroke,
});
const encodeData = this.layer.getEncodedData();
@ -166,19 +167,19 @@ export default class TextModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 0.0,
u_stroke_color:
@ -190,7 +191,6 @@ export default class TextModel extends BaseModel {
u_halo_blur: halo,
u_gamma_scale: gamma,
u_sdf_map_size: [canvas.width, canvas.height],
};
}
@ -212,7 +212,7 @@ export default class TextModel extends BaseModel {
this.initGlyph();
this.updateTexture();
this.filterGlyphs();
this.reBuildModel()
this.reBuildModel();
return [
this.layer.buildLayerModel({
moduleName: 'pointText',

26
packages/layers/src/polygon/models/extrude.ts
View File

@ -1,11 +1,9 @@
import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
import BaseModel, {
styleSingle,
} from '../../core/BaseModel';
import { isNumber } from 'lodash';
import BaseModel, { styleSingle } from '../../core/BaseModel';
import { PolygonExtrudeTriangulation } from '../../core/triangulation';
import polygonExtrudeFrag from '../shaders/polygon_extrude_frag.glsl';
import polygonExtrudeVert from '../shaders/polygon_extrude_vert.glsl';
import { isNumber } from 'lodash';
interface IPolygonLayerStyleOptions {
opacity: styleSingle;
}
@ -15,10 +13,8 @@ export default class ExtrudeModel extends BaseModel {
opacity = 1,
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
if (this.dataTextureTest &&
this.dataTextureNeedUpdate({ opacity })
) {
this.judgeStyleAttributes({ opacity, });
if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
this.judgeStyleAttributes({ opacity });
const encodeData = this.layer.getEncodedData();
const { data, width, height } = this.calDataFrame(
this.cellLength,
@ -38,13 +34,13 @@ export default class ExtrudeModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {

26
packages/layers/src/polygon/models/fill.ts
View File

@ -11,13 +11,11 @@ import {
lazyInject,
TYPES,
} from '@antv/l7-core';
import BaseModel, {
styleSingle,
} from '../../core/BaseModel';
import { isNumber } from 'lodash';
import BaseModel, { styleSingle } from '../../core/BaseModel';
import { polygonTriangulation } from '../../core/triangulation';
import polygon_frag from '../shaders/polygon_frag.glsl';
import polygon_vert from '../shaders/polygon_vert.glsl';
import { isNumber } from 'lodash';
interface IPolygonLayerStyleOptions {
opacity: styleSingle;
@ -27,10 +25,8 @@ export default class FillModel extends BaseModel {
const {
opacity = 1,
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
if (this.dataTextureTest &&
this.dataTextureNeedUpdate({ opacity })
) {
this.judgeStyleAttributes({ opacity, });
if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
this.judgeStyleAttributes({ opacity });
const encodeData = this.layer.getEncodedData();
const { data, width, height } = this.calDataFrame(
this.cellLength,
@ -50,13 +46,13 @@ export default class FillModel extends BaseModel {
height,
})
: this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
})
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]

4
packages/layers/src/utils/dataMappingStyle.ts
View File

@ -74,8 +74,8 @@ function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) {
handleStyleOffsets('offsets', layer, configToUpdate.offsets);
}
if(configToUpdate.textOffset) {
// 处理 style 中 textOffset 属性的数据映射
if (configToUpdate.textOffset) {
// 处理 style 中 textOffset 属性的数据映射
handleStyleOffsets('textOffset', layer, configToUpdate.textOffset);
}
}

14
packages/renderer/src/regl/index.ts
View File

@ -10,6 +10,7 @@ import {
IClearOptions,
IElements,
IElementsInitializationOptions,
IExtensions,
IFramebuffer,
IFramebufferInitializationOptions,
IModel,
@ -19,7 +20,6 @@ import {
IRendererService,
ITexture2D,
ITexture2DInitializationOptions,
IExtensions
} from '@antv/l7-core';
import { injectable } from 'inversify';
import regl from 'regl';
@ -35,6 +35,7 @@ import ReglTexture2D from './ReglTexture2D';
*/
@injectable()
export default class ReglRendererService implements IRendererService {
public extensionObject: IExtensions;
private gl: regl.Regl;
private $container: HTMLDivElement | null;
private canvas: HTMLCanvasElement;
@ -42,8 +43,6 @@ export default class ReglRendererService implements IRendererService {
private height: number;
private isDirty: boolean;
public extensionObject: IExtensions;
public async init(
canvas: HTMLCanvasElement,
cfg: IRenderConfig,
@ -86,12 +85,13 @@ export default class ReglRendererService implements IRendererService {
});
this.extensionObject = {
OES_texture_float: this.testExtension('OES_texture_float')
}
OES_texture_float: this.testExtension('OES_texture_float'),
};
}
public testExtension(name: string) { // OES_texture_float
return !!this.getGLContext().getExtension(name)
public testExtension(name: string) {
// OES_texture_float
return !!this.getGLContext().getExtension(name);
}
public createModel = (options: IModelInitializationOptions): IModel =>

6
stories/Map/components/amap2demo_arcLine3DTex.tsx
View File

@ -39,7 +39,7 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
lat1: 36.31512514748051,
lng2: 46.23046874999999,
lat2: 52.802761415419674,
testOpacity: 0.3
testOpacity: 0.3,
},
];
//// @ts-ignore
@ -64,7 +64,7 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
iconStep: 10, // 设置贴图纹理的间距
// opacity: 0,
// opacity: ['testOpacity', ((d: any) => d*2)],
opacity: "testOpacity",
opacity: 'testOpacity',
// opacity: 0.2,
// lineType: 'dash',
// dashArray: [5, 5],
@ -72,7 +72,7 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
// textureBlend: 'normal',
// sourceColor: '#f00',
// targetColor: '#0f0',
})
});
// .animate({
// duration: 50,
// interval: 0.2,

11
stories/Map/components/amap2demo_arcLine3d.tsx
View File

@ -76,7 +76,7 @@ export default class Amap2demo_arcLine3d extends React.Component {
.style({
opacity: 1.0,
});
const flyLine = new LineLayer({blend: 'normal'})
const flyLine = new LineLayer({ blend: 'normal' })
.source(flydata, {
parser: {
type: 'json',
@ -100,9 +100,8 @@ export default class Amap2demo_arcLine3d extends React.Component {
iconStep: 10, // 设置贴图纹理的间距
opacity: 1,
});
const flyLine2 = new LineLayer()
const flyLine2 = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
@ -117,12 +116,12 @@ export default class Amap2demo_arcLine3d extends React.Component {
.style({
lineType: 'dash',
dashArray: [5, 5],
opacity: 0.5
opacity: 0.5,
});
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine2)
scene.addLayer(flyLine)
scene.addLayer(flyLine2);
scene.addLayer(flyLine);
});
});
}

38
stories/Map/components/amap2demo_arcLine3dLinear.tsx
View File

@ -76,7 +76,7 @@ export default class Amap2demo_arcLine3dLinear extends React.Component {
.style({
opacity: 1.0,
});
const flyLine = new LineLayer({blend: 'normal'})
const flyLine = new LineLayer({ blend: 'normal' })
.source(flydata, {
parser: {
type: 'json',
@ -100,26 +100,26 @@ export default class Amap2demo_arcLine3dLinear extends React.Component {
// iconStep: 10, // 设置贴图纹理的间距
sourceColor: '#f00',
targetColor: '#0f0',
opacity: 0.5
opacity: 0.5,
});
// const flyLine2 = new LineLayer({blend: 'normal'})
// .source(flydata, {
// parser: {
// type: 'json',
// coordinates: 'coord',
// },
// })
// .color('#ff6b34')
// // .shape('arc3d')
// .shape('arc')
// .size(1)
// // .active(true)
// .style({
// lineType: 'dash',
// dashArray: [5, 5],
// opacity: 0.5
// });
// const flyLine2 = new LineLayer({blend: 'normal'})
// .source(flydata, {
// parser: {
// type: 'json',
// coordinates: 'coord',
// },
// })
// .color('#ff6b34')
// // .shape('arc3d')
// .shape('arc')
// .size(1)
// // .active(true)
// .style({
// lineType: 'dash',
// dashArray: [5, 5],
// opacity: 0.5
// });
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
// scene.addLayer(flyLine2)

18
stories/Map/components/amap2demo_arcLineDir.tsx
View File

@ -50,21 +50,21 @@ export default class Amap2demo_arcLineDir extends React.Component {
lat1: 40.662557,
lng2: 120.342625,
lat2: 37.373799,
testOpacity: 0.4
testOpacity: 0.4,
},
{
lng1: 116.98242187499999,
lat1: 43.004647127794435,
lng2: 105.64453124999999,
lat2: 28.998531814051795,
testOpacity: 0.4
testOpacity: 0.4,
},
{
lng1: 75.76171875,
lat1: 36.31512514748051,
lng2: 46.23046874999999,
lat2: 52.802761415419674,
testOpacity: 0.8
testOpacity: 0.8,
},
];
let data2 = [
@ -73,7 +73,7 @@ export default class Amap2demo_arcLineDir extends React.Component {
lat1: 52.53627304145948,
lng2: 119.794921875,
lat2: 46.07323062540835,
testOpacity: 0.6
testOpacity: 0.6,
},
// {
// lng2: 88.59374999999999,
@ -100,7 +100,7 @@ export default class Amap2demo_arcLineDir extends React.Component {
.color('#8C1EB2')
.style({
forward: false,
opacity: 'testOpacity'
opacity: 'testOpacity',
});
scene.addLayer(layer);
@ -118,8 +118,8 @@ export default class Amap2demo_arcLineDir extends React.Component {
.shape('arc')
.color('#8C1EB2')
.style({
opacity: 'testOpacity'
})
opacity: 'testOpacity',
});
scene.addLayer(layer2);
const layer3 = new LineLayer({ blend: 'normal' })
@ -136,7 +136,7 @@ export default class Amap2demo_arcLineDir extends React.Component {
.shape('arc')
.color('#8C1EB2')
.style({
opacity: 'testOpacity'
opacity: 'testOpacity',
})
.animate(true);
scene.addLayer(layer3);
@ -156,7 +156,7 @@ export default class Amap2demo_arcLineDir extends React.Component {
.color('#8C1EB2')
.style({
forward: false,
opacity: "testopacity"
opacity: 'testopacity',
})
.animate({
duration: 4,

12
stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx
View File

@ -46,7 +46,7 @@ export default class Amap2demo_arcLine_greatCircle extends React.Component {
lat1: 37.71859032558816,
lng2: 123.3984375,
lat2: 39.639537564366684,
testOpacity: 0.5
testOpacity: 0.5,
},
],
{
@ -76,11 +76,11 @@ export default class Amap2demo_arcLine_greatCircle extends React.Component {
// sourceColor: '#f00',
// targetColor: '#0f0',
})
.animate({
duration: 5,
interval: 0.2,
trailLength: 0.4,
});
.animate({
duration: 5,
interval: 0.2,
trailLength: 0.4,
});
// .animate(true);
scene.addLayer(layer);
});

50
stories/Map/components/amap2demo_iconfont.tsx
View File

@ -49,8 +49,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '晴朗',
opacity: 0.5,
strokeWidth2: 1,
stroke: "#f00",
testTextOffset: [5, -55]
stroke: '#f00',
testTextOffset: [5, -55],
},
{
lng: 120.2,
@ -62,8 +62,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '晴朗',
opacity: 0.5,
strokeWidth2: 1,
stroke: "#f00",
testTextOffset: [5, -55]
stroke: '#f00',
testTextOffset: [5, -55],
},
{
lng: 121.5,
@ -75,8 +75,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '多云',
opacity: 0.5,
strokeWidth2: 1,
stroke: "#f00",
testTextOffset: [5, -55]
stroke: '#f00',
testTextOffset: [5, -55],
},
{
lng: 120,
@ -88,8 +88,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '多云',
opacity: 0.5,
strokeWidth2: 1,
stroke: "#f00",
testTextOffset: [5, -55]
stroke: '#f00',
testTextOffset: [5, -55],
},
{
lng: 120.6,
@ -101,8 +101,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '多云',
opacity: 0.5,
strokeWidth2: 1,
stroke: "#f00",
testTextOffset: [5, -55]
stroke: '#f00',
testTextOffset: [5, -55],
},
{
lng: 120.5,
@ -114,8 +114,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '多云',
opacity: 1,
strokeWidth2: 3,
stroke: "#ff0",
testTextOffset: [5, -55]
stroke: '#ff0',
testTextOffset: [5, -55],
},
{
lng: 121.3,
@ -127,8 +127,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '小雨',
opacity: 1,
strokeWidth2: 3,
stroke: "#ff0",
testTextOffset: [5, -55]
stroke: '#ff0',
testTextOffset: [5, -55],
},
{
lng: 121,
@ -140,8 +140,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '小雨',
opacity: 1,
strokeWidth2: 3,
stroke: "#ff0",
testTextOffset: [5, -55]
stroke: '#ff0',
testTextOffset: [5, -55],
},
{
lng: 120.6,
@ -153,8 +153,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '中雨',
opacity: 1,
strokeWidth2: 3,
stroke: "#ff0",
testTextOffset: [5, -55]
stroke: '#ff0',
testTextOffset: [5, -55],
},
{
lng: 120.2,
@ -166,8 +166,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '小雨',
opacity: 1,
strokeWidth2: 3,
stroke: "#ff0",
testTextOffset: [5, -55]
stroke: '#ff0',
testTextOffset: [5, -55],
},
{
lng: 121.7,
@ -179,8 +179,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '中雨',
opacity: 1,
strokeWidth2: 3,
stroke: "#ff0",
testTextOffset: [5, -55]
stroke: '#ff0',
testTextOffset: [5, -55],
},
{
lng: 121.5,
@ -192,8 +192,8 @@ export default class Amap2demo_iconfont extends React.Component {
weather: '大雨-',
opacity: 1,
strokeWidth2: 3,
stroke: "#ff0",
testTextOffset: [10, -55]
stroke: '#ff0',
testTextOffset: [10, -55],
},
];
@ -251,7 +251,7 @@ export default class Amap2demo_iconfont extends React.Component {
textAllowOverlap: true,
stroke: 'iconColor', // 描边颜色
strokeWidth: 'strokeWidth2', // 描边宽度
opacity: "opacity"
opacity: 'opacity',
});
scene.addLayer(textLayer);

120
stories/Map/components/amap2demo_image.tsx
View File

@ -23,49 +23,55 @@ export default class Amap2demo_image extends React.Component {
}),
});
this.scene = scene;
let originData = [{
"id": "5011000000404",
"name": "铁路新村(华池路)",
"longitude": 121.4316962,
"latitude": 31.26082325,
"unit_price": 71469.4,
"count": 2,
opacity: 0.5,
offsets: [0, 0]
}, {
"id": "5011000002716",
"name": "金元坊",
"longitude": 121.3810096,
"latitude": 31.25302026,
"unit_price": 47480.5,
"count": 2,
opacity: 0.5,
offsets: [100, 0]
}, {
"id": "5011000003403",
"name": "兰溪路231弄",
"longitude": 121.4086229,
"latitude": 31.25291206,
"unit_price": 55218.4,
"count": 2,
opacity: 0.8
}, {
"id": "5011000003652",
"name": "兰溪公寓",
"longitude": 121.409227,
"latitude": 31.251014,
"unit_price": 55577.8,
"count": 2,
opacity: 0.8
}, {
"id": "5011000004139",
"name": "梅岭新村",
"longitude": 121.400946,
"latitude": 31.24946565,
"unit_price": 63028.1,
"count": 2,
opacity: 1.0
}]
let originData = [
{
id: '5011000000404',
name: '铁路新村(华池路)',
longitude: 121.4316962,
latitude: 31.26082325,
unit_price: 71469.4,
count: 2,
opacity: 0.5,
offsets: [0, 0],
},
{
id: '5011000002716',
name: '金元坊',
longitude: 121.3810096,
latitude: 31.25302026,
unit_price: 47480.5,
count: 2,
opacity: 0.5,
offsets: [100, 0],
},
{
id: '5011000003403',
name: '兰溪路231弄',
longitude: 121.4086229,
latitude: 31.25291206,
unit_price: 55218.4,
count: 2,
opacity: 0.8,
},
{
id: '5011000003652',
name: '兰溪公寓',
longitude: 121.409227,
latitude: 31.251014,
unit_price: 55577.8,
count: 2,
opacity: 0.8,
},
{
id: '5011000004139',
name: '梅岭新村',
longitude: 121.400946,
latitude: 31.24946565,
unit_price: 63028.1,
count: 2,
opacity: 1.0,
},
];
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
@ -100,20 +106,20 @@ export default class Amap2demo_image extends React.Component {
// scene.addLayer(imageLayer);
// });
const imageLayer = new PointLayer()
.source(originData, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('name', ['00', '01', '02'])
.size(20)
.style({
opacity: 'opacity',
offsets: 'offsets'
})
scene.addLayer(imageLayer);
.source(originData, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('name', ['00', '01', '02'])
.size(20)
.style({
opacity: 'opacity',
offsets: 'offsets',
});
scene.addLayer(imageLayer);
});
}

2
stories/Map/components/amap2demo_lineLinear.tsx
View File

@ -26,7 +26,7 @@ export default class Amap2demo_lineLinear extends React.Component {
scene.on('loaded', () => {
fetch(
// 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
'https://gw.alipayobjects.com/os/bmw-prod/459591a6-8aa5-4ce7-87a1-0e1e7bce3e60.json'
'https://gw.alipayobjects.com/os/bmw-prod/459591a6-8aa5-4ce7-87a1-0e1e7bce3e60.json',
)
.then((res) => res.json())
.then((data) => {

6
stories/Map/components/amap2demo_meshStyleMap.tsx
View File

@ -65,9 +65,9 @@ export default class Amap2demo_meshStyleMap extends React.Component {
// opacity: ['unit_price', (unit_price: any) => {
// return unit_price/100000
// }],
opacity: ['unit_price', [0, 1]]
opacity: ['unit_price', [0, 1]],
})
.active(true)
.active(true);
scene.addLayer(filllayer);
// const linelayer = new LineLayer({
@ -101,7 +101,7 @@ export default class Amap2demo_meshStyleMap extends React.Component {
// iconfont: true,
// });
// scene.addLayer(pointLayer);
// const tempertureLayer = new PointLayer({
// zIndex: 10,
// })

2
stories/Map/components/amap2demo_polygon_extrude.tsx
View File

@ -113,7 +113,7 @@ export default class Amap2demo_polygon_extrude extends React.Component {
.color('red')
.size(6000000)
.style({
opacity: 'testOpacity'
opacity: 'testOpacity',
})
.active(true);
scene.addLayer(layer);

2
stories/Map/components/amap2demo_rasterlayer.tsx
View File

@ -47,7 +47,7 @@ export default class Amap2demo_rasterLayer extends React.Component {
this.scene = scene;
const tiffdata = await this.getTiffData();
console.log('tiffdata', tiffdata)
console.log('tiffdata', tiffdata);
const layer = new RasterLayer({});
const mindata = -0;
const maxdata = 8000;

3565
stories/Map/components/amap2demo_styleMap.tsx
View File

File diff suppressed because one or more lines are too long

29
stories/Map/components/amap2demo_textOffset.tsx
View File

@ -28,7 +28,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'sun',
iconColor: '#FFA500',
weather: '晴朗',
textOffset: [10, 0]
textOffset: [10, 0],
},
{
lng: 120.2,
@ -36,7 +36,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'sun',
iconColor: '#FFA500',
weather: '晴朗 - 高温预警',
textOffset: [-25, 0]
textOffset: [-25, 0],
},
{
lng: 121.5,
@ -44,7 +44,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云',
textOffset: [10, 0]
textOffset: [10, 0],
},
{
lng: 120,
@ -52,7 +52,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 温度适宜',
textOffset: [-25, 0]
textOffset: [-25, 0],
},
{
lng: 120.6,
@ -60,7 +60,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云',
textOffset: [10, 0]
textOffset: [10, 0],
},
{
lng: 120.5,
@ -68,7 +68,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 今日适宜出门',
textOffset: [-40, 0]
textOffset: [-40, 0],
},
{
lng: 121.3,
@ -76,7 +76,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'smallRain',
iconColor: '#6EA0FF',
weather: '中雨转小雨',
textOffset: [-10, 0]
textOffset: [-10, 0],
},
{
lng: 121,
@ -84,7 +84,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'smallRain',
iconColor: '#6EA0FF',
weather: '小雨',
textOffset: [10, 0]
textOffset: [10, 0],
},
{
lng: 120.6,
@ -92,7 +92,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'middleRain',
iconColor: '#6495ED',
weather: '中雨',
textOffset: [10, 0]
textOffset: [10, 0],
},
{
lng: 120.2,
@ -100,7 +100,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'smallRain',
iconColor: '#6EA0FF',
weather: '小雨',
textOffset: [10, 0]
textOffset: [10, 0],
},
{
lng: 121.7,
@ -108,7 +108,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'middleRain',
iconColor: '#6495ED',
weather: '大雨转中雨',
textOffset: [-15, 0]
textOffset: [-15, 0],
},
{
lng: 121.5,
@ -116,7 +116,7 @@ export default class Amap2demo_textOffset extends React.Component {
iconType: 'hugeRain',
iconColor: '#4678D2',
weather: '大雨',
textOffset: [10, 0]
textOffset: [10, 0],
},
];
let fontFamily = 'iconfont';
@ -153,7 +153,7 @@ export default class Amap2demo_textOffset extends React.Component {
});
scene.addLayer(pointIconFontLayer);
const textLayer = new PointLayer({})
const textLayer = new PointLayer({})
.source(originData, {
parser: {
type: 'json',
@ -170,10 +170,9 @@ export default class Amap2demo_textOffset extends React.Component {
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
fontFamily: 'Times New Roman',
textAllowOverlap: true
textAllowOverlap: true,
});
scene.addLayer(textLayer);
});
}