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

chore: clean code (#1099) 

* feat: clean billboard code

* feat: clean image code

* feat: clean maskLayer code

* style: lint style

* feat: clean raster code

* feat: clean package.json devDependencies

* feat: clean gatsby-browser lib

* feat: clean windLayer code

* style: lint style

* feat: clean polygon/ocean code

* feat: clean polygon/water code

* feat: clean polygon/fill code

* style: lint style

* feat: clean polygon/fill code

* feat: clean polygon/extrude

* feat: clean pointLayer/fillImage code

* style: lint style

* feat: clean pointLayer/image code

* feat: clean pointLayer/normal code

* feat: clean pointLayer/radar code

* feat: clean pointLayer/simplepoint code

* feat: clean pointLayer/extrude code

* style: lint style

* feat: clean pointLayer/fill code

* feat: clean pointLayer/text code

* feat: clean lineLayer/simple code

* feat: clean lineLayer/wall code

* feat: clean lineLayer code

* feat: clean lineLayer/line code
This commit is contained in:
YiQianYao 2022-05-06 20:16:58 +08:00 committed by GitHub
parent e44ba06eae
commit ceca2404cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 295 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gatsby-browser.js
View File

@ -19,4 +19,3 @@ window.react = require('react');
window.popmotion = require('popmotion');
window.reactDom = require('react-dom');
window.antd = require('antd');
window.materialUICore = require('@material-ui/core')

1
package.json
View File

@ -89,7 +89,6 @@
"jest": "^24.9.0",
"jest-electron": "^0.1.11",
"@material-ui/core": "^4.10.2",
"@material-ui/icons": "^4.9.1",
"jest-styled-components": "^6.2.1",
"lerna": "^3.16.4",
"lint-staged": "^9.2.4",

8
packages/layers/src/Geometry/models/billboard.ts
View File

@ -14,9 +14,6 @@ import planeVert from '../shaders/billboard_vert.glsl';
export default class BillBoardModel extends BaseModel {
protected texture: ITexture2D;
protected terrainImage: HTMLImageElement;
protected terrainImageLoaded: boolean = false;
protected mapTexture: string | undefined;
private radian: number = 0; // 旋转的弧度
public planeGeometryTriangulation = () => {
@ -81,8 +78,6 @@ export default class BillBoardModel extends BaseModel {
}
public clearModels(): void {
// @ts-ignore
this.terrainImage = null;
this.texture?.destroy();
}
@ -90,10 +85,8 @@ export default class BillBoardModel extends BaseModel {
const {
mask = false,
maskInside = true,
mapTexture,
drawCanvas,
} = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;
this.mapTexture = mapTexture;
const { createTexture2D } = this.rendererService;
this.texture = createTexture2D({
@ -112,7 +105,6 @@ export default class BillBoardModel extends BaseModel {
fragmentShader: planeFrag,
triangulation: this.planeGeometryTriangulation,
primitive: gl.TRIANGLES,
// primitive: gl.LINES,
depth: { enable: true },
blend: this.getBlend(),
stencil: getMask(mask, maskInside),

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

@ -91,9 +91,9 @@ export interface IPointLayerStyleOptions {
}
export interface IPolygonLayerStyleOptions {
opacity: styleSingle;
opacity?: number;
opacityLinear: {
opacityLinear?: {
enable: boolean;
dir: string;
};
@ -119,6 +119,27 @@ export interface IPolygonLayerStyleOptions {
watercolor2?: string;
}
export interface IMaskLayerStyleOptions {
opacity: styleSingle;
}
export interface IWindLayerStyleOptions {
uMin?: number;
uMax?: number;
vMin?: number;
vMax?: number;
fadeOpacity?: number;
speedFactor?: number;
dropRate?: number;
dropRateBump?: number;
opacity?: number;
numParticles?: number;
rampColors?: {
[key: number]: string;
};
sizeScale?: number;
}
export interface IImageLayerStyleOptions {
opacity: number;
mask?: boolean;

1
packages/layers/src/image/models/image.ts
View File

@ -38,7 +38,6 @@ export default class ImageModel extends BaseModel {
// @ts-ignore
const canvas = this.layerService.sceneService.getSceneConfig().canvas;
const img = canvas.createImage();
// let img = new Image()
img.crossOrigin = 'anonymous';
img.src = source.data.originData;

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

@ -10,9 +10,8 @@ import {
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
// arc dash line
import arc_dash_frag from '../shaders/dash/arc_dash_frag.glsl';
@ -31,7 +30,7 @@ export default class ArcModel extends BaseModel {
protected texture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
opacity = 1,
sourceColor,
targetColor,
textureBlend = 'normal',
@ -99,8 +98,8 @@ export default class ArcModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_thetaOffset: isNumber(thetaOffset) ? thetaOffset : 0.0,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_thetaOffset: Number(thetaOffset),
u_opacity: Number(opacity),
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber,
u_line_type: lineStyleObj[lineType || 'solid'],

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

@ -9,9 +9,8 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
import { EARTH_RADIUS } from '../../earth/utils';
// arc3d line layer
@ -29,7 +28,7 @@ export default class Arc3DModel extends BaseModel {
protected texture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
opacity = 1,
sourceColor,
targetColor,
textureBlend = 'normal',
@ -96,8 +95,7 @@ export default class Arc3DModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
// u_opacity: opacity === undefined ? 1 : opacity,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber,
u_line_type: lineStyleObj[lineType as string] || 0.0,
@ -141,7 +139,6 @@ export default class Arc3DModel extends BaseModel {
const {
sourceColor,
targetColor,
lineType,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (sourceColor && targetColor) {

5
packages/layers/src/line/models/arcmini.ts
View File

@ -9,7 +9,6 @@ import {
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
@ -19,7 +18,7 @@ import line_arcmini_vert from '../shaders/line_arcmini_vert.glsl';
export default class ArcMiniModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
opacity,
opacity = 1,
sourceColor,
targetColor,
forward = true,
@ -40,7 +39,7 @@ export default class ArcMiniModel extends BaseModel {
return {
u_thetaOffset: thetaOffset,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
segmentNumber,
u_blur: 0.9,

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

@ -10,7 +10,6 @@ import {
} from '@antv/l7-core';
import { getMask, 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';
@ -25,7 +24,7 @@ export default class GreatCircleModel extends BaseModel {
protected texture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
opacity = 1,
sourceColor,
targetColor,
textureBlend = 'normal',
@ -86,8 +85,8 @@ export default class GreatCircleModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
// u_opacity: opacity === undefined ? 1 : opacity,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber,
u_line_type: lineStyleObj[lineType as string] || 0.0,

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

@ -11,9 +11,8 @@ import {
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineTriangulation } from '../../core/triangulation';
// dash line shader
import line_dash_frag from '../shaders/dash/line_dash_frag.glsl';
@ -32,7 +31,7 @@ export default class LineModel extends BaseModel {
protected texture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
opacity = 1,
sourceColor,
targetColor,
textureBlend = 'normal',
@ -102,8 +101,7 @@ export default class LineModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
// u_opacity: opacity === undefined ? 1 : opacity,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
u_line_type: lineStyleObj[lineType],
u_dash_array: dashArray,
@ -303,7 +301,6 @@ export default class LineModel extends BaseModel {
type: gl.FLOAT,
},
size: 3,
// @ts-ignore
update: (
feature: IEncodeFeature,
featureIdx: number,

8
packages/layers/src/line/models/linearline.ts
View File

@ -1,17 +1,13 @@
import {
AttributeType,
gl,
IAnimateOption,
IEncodeFeature,
IImage,
ILayerConfig,
IModel,
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineTriangulation } from '../../core/triangulation';
@ -22,7 +18,7 @@ export default class LinearLineModel extends BaseModel {
protected colorTexture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
opacity = 1,
vertexHeightScale = 20.0,
raisingHeight = 0,
heightfixed = false,
@ -65,7 +61,7 @@ export default class LinearLineModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
// 纹理支持参数
u_texture: this.colorTexture, // 贴图

11
packages/layers/src/line/models/simpleLine.ts
View File

@ -9,7 +9,6 @@ import {
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { SimpleLineTriangulation } from '../../core/triangulation';
@ -20,7 +19,7 @@ import simple_line_vert from '../shaders/simpleline_vert.glsl';
export default class SimpleLineModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
opacity,
opacity = 1,
sourceColor,
targetColor,
vertexHeightScale = 20.0,
@ -69,7 +68,7 @@ export default class SimpleLineModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
// 渐变色支持参数
u_linearColor: useLinearColor,
@ -106,13 +105,13 @@ export default class SimpleLineModel extends BaseModel {
return {
frag: simle_linear_frag,
vert: simple_line_vert,
type: 'linear',
type: 'simple_linear',
};
} else {
return {
frag: simple_line_frag,
vert: simple_line_vert,
type: 'normal',
type: 'simple_normal',
};
}
}
@ -126,7 +125,7 @@ export default class SimpleLineModel extends BaseModel {
const { frag, vert, type } = this.getShaders();
return [
this.layer.buildLayerModel({
moduleName: 'simpleline' + type,
moduleName: type,
vertexShader: vert,
fragmentShader: frag,
triangulation: SimpleLineTriangulation,

9
packages/layers/src/line/models/wall.ts
View File

@ -10,9 +10,8 @@ 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 { ILineLayerStyleOptions } from '../../core/interface';
import { LineTriangulation } from '../../core/triangulation';
import line_frag from '../shaders/wall_frag.glsl';
import line_vert from '../shaders/wall_vert.glsl';
@ -21,7 +20,7 @@ export default class LineWallModel extends BaseModel {
protected texture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
opacity = 1,
sourceColor,
targetColor,
textureBlend = 'normal',
@ -79,8 +78,8 @@ export default class LineWallModel extends BaseModel {
u_heightfixed: Number(heightfixed),
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
// u_opacity: opacity === undefined ? 1 : opacity,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
// 纹理支持参数

1
packages/layers/src/line/shaders/line_arcmini_frag.glsl
View File

@ -1,4 +1,3 @@
#define LineTypeSolid 0.0
#define Animate 0.0
uniform float u_opacity;

3
packages/layers/src/line/shaders/line_arcmini_vert.glsl
View File

@ -1,5 +1,3 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
attribute vec4 a_Color;
@ -11,7 +9,6 @@ uniform mat4 u_Mvp;
uniform float segmentNumber;
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
varying vec4 v_color;
// varying vec2 v_normal;
uniform float u_lineDir: 1.0;

2
packages/layers/src/line/shaders/linear/simpleline_linear_frag.glsl
View File

@ -1,5 +1,3 @@
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;

3
packages/layers/src/line/shaders/simpleline_vert.glsl
View File

@ -1,10 +1,7 @@
attribute vec4 a_Color;
attribute vec2 a_Size;
attribute vec3 a_Position;
// dash line
attribute float a_Total_Distance;
attribute float a_Distance;

9
packages/layers/src/line/shaders/wall_frag.glsl
View File

@ -1,4 +1,3 @@
#define LineTypeSolid 0.0
#define Animate 0.0
#define LineTexture 1.0
@ -13,10 +12,6 @@ uniform float u_line_texture;
uniform sampler2D u_texture;
uniform vec2 u_textSize;
// dash
uniform float u_dash_offset : 0.0;
uniform float u_dash_ratio : 0.1;
varying vec2 v_iconMapUV;
varying float v_blur;
@ -95,8 +90,4 @@ void main() {
}
gl_FragColor = filterColor(gl_FragColor);
}

5
packages/layers/src/line/shaders/wall_vert.glsl
View File

@ -1,5 +1,3 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
attribute float a_Miter;
@ -9,7 +7,6 @@ attribute vec3 a_Normal;
attribute vec3 a_Position;
attribute vec2 a_iconMapUV;
// dash line
attribute float a_Total_Distance;
attribute float a_Distance;
@ -29,7 +26,6 @@ varying float v_blur;
// texV 线图层 - 贴图部分的 v 坐标（线的宽度方向）
varying vec2 v_iconMapUV;
uniform float u_linearColor: 0;
uniform float u_opacity: 1.0;
@ -102,7 +98,6 @@ void main() {
v_blur = min(project_float_pixel(2.0) / originSize, 0.05);
// v_lightWeight = lightWeight;
v_color = vec4(a_Color.rgb * lightWeight, a_Color.w);
// v_color = a_Color;

5
packages/layers/src/mask/index.ts
View File

@ -1,10 +1,7 @@
import BaseLayer from '../core/BaseLayer';
import { IMaskLayerStyleOptions } from '../core/interface';
import MaskModels, { MaskModelType } from './models';
interface IMaskLayerStyleOptions {
opacity: number;
}
export default class MaskLayer extends BaseLayer<IMaskLayerStyleOptions> {
public type: string = 'MaskLayer';
public buildModels() {

11
packages/layers/src/mask/models/fill.ts
View File

@ -1,15 +1,16 @@
import { gl, IModel } from '@antv/l7-core';
import { isNumber } from 'lodash';
import BaseModel, { styleSingle } from '../../core/BaseModel';
import BaseModel from '../../core/BaseModel';
import { IMaskLayerStyleOptions } from '../../core/interface';
import { polygonTriangulation } from '../../core/triangulation';
import mask_frag from '../shaders/mask_frag.glsl';
import mask_vert from '../shaders/mask_vert.glsl';
interface IMaskStyleOptions {
opacity: styleSingle;
}
export default class MaskModel extends BaseModel {
public getUninforms() {
const { opacity = 0 } = this.layer.getLayerConfig() as IMaskStyleOptions;
const {
opacity = 0,
} = this.layer.getLayerConfig() as IMaskLayerStyleOptions;
return {
u_opacity: isNumber(opacity) ? opacity : 0.0,
};

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

@ -6,7 +6,6 @@ import {
IModel,
} from '@antv/l7-core';
import { getCullFace, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import { PointExtrudeTriangulation } from '../../core/triangulation';
@ -116,9 +115,8 @@ export default class ExtrudeModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
// u_opacity: opacity || 1.0,
// u_offsets: offsets || [0, 0],
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
// 渐变色支持参数
u_linearColor: useLinearColor,
@ -158,7 +156,6 @@ export default class ExtrudeModel extends BaseModel {
depth: {
enable: depth,
},
// primitive: gl.POINTS,
}),
];
}

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

@ -22,8 +22,6 @@ import waveFillFrag from '../shaders/animate/wave_frag.glsl';
import pointFillFrag from '../shaders/fill_frag.glsl';
import pointFillVert from '../shaders/fill_vert.glsl';
import { isNumber } from 'lodash';
import { Version } from '@antv/l7-maps';
import { mat4, vec3 } from 'gl-matrix';
export default class FillModel extends BaseModel {
@ -98,9 +96,9 @@ export default class FillModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_stroke_opacity: isNumber(strokeOpacity) ? strokeOpacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 0.0,
u_opacity: Number(opacity),
u_stroke_opacity: Number(strokeOpacity),
u_stroke_width: Number(strokeWidth),
u_stroke_color: this.getStrokeColor(stroke),
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
@ -151,7 +149,6 @@ export default class FillModel extends BaseModel {
* @returns
*/
public calMeter2Coord() {
// @ts-ignore
const [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
const center = [(minLng + maxLng) / 2, (minLat + maxLat) / 2];
@ -212,7 +209,6 @@ export default class FillModel extends BaseModel {
triangulation: isGlobel
? GlobelPointFillTriangulation
: PointFillTriangulation,
// depth: { enable: false },
depth: { enable: isGlobel },
blend: this.getBlend(),
stencil: getMask(mask, maskInside),

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

@ -8,6 +8,7 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { Version } from '@antv/l7-maps';
import { getCullFace, getMask } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
@ -16,30 +17,21 @@ import { PointFillTriangulation } from '../../core/triangulation';
import pointFillFrag from '../shaders/image/fillImage_frag.glsl';
import pointFillVert from '../shaders/image/fillImage_vert.glsl';
import { isNumber } from 'lodash';
import { Version } from '@antv/l7-maps';
export default class FillImageModel extends BaseModel {
public meter2coord: number = 1;
private meter2coord: number = 1;
private texture: ITexture2D;
private isMeter: boolean = false;
private radian: number = 0; // 旋转的弧度
public getUninforms(): IModelUniform {
const {
opacity = 1,
strokeOpacity = 1,
strokeWidth = 0,
stroke = 'rgba(0,0,0,0)',
offsets = [0, 0],
blend,
rotation,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
if (this.rendererService.getDirty()) {
this.texture.bind();
}
/**
* rotateFlag
* L7MAP 1
@ -64,18 +56,12 @@ export default class FillImageModel extends BaseModel {
this.dataTextureTest &&
this.dataTextureNeedUpdate({
opacity,
strokeOpacity,
strokeWidth,
stroke,
offsets,
})
) {
// 判断当前的样式中哪些是需要进行数据映射的，哪些是常量，同时计算用于构建数据纹理的一些中间变量
this.judgeStyleAttributes({
opacity,
strokeOpacity,
strokeWidth,
stroke,
offsets,
});
@ -114,7 +100,6 @@ export default class FillImageModel extends BaseModel {
-Math.sin(this.radian),
Math.cos(this.radian),
]),
u_additive: blend === 'additive' ? 1.0 : 0.0,
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
@ -122,7 +107,7 @@ export default class FillImageModel extends BaseModel {
u_texture: this.texture,
u_textSize: [1024, this.iconService.canvasHeight || 128],
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],
@ -166,7 +151,6 @@ export default class FillImageModel extends BaseModel {
* @returns
*/
public calMeter2Coord() {
// @ts-ignore
const [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
const center = [(minLng + maxLng) / 2, (minLat + maxLat) / 2];
@ -212,7 +196,7 @@ export default class FillImageModel extends BaseModel {
const { frag, vert, type } = this.getShaders();
return [
this.layer.buildLayerModel({
moduleName: 'pointfill_' + type,
moduleName: type,
vertexShader: vert,
fragmentShader: frag,
triangulation: PointFillTriangulation,
@ -231,7 +215,7 @@ export default class FillImageModel extends BaseModel {
return {
frag: pointFillFrag,
vert: pointFillVert,
type: 'normal',
type: 'point_fillImage',
};
}
@ -341,7 +325,6 @@ export default class FillImageModel extends BaseModel {
attributeIdx: number,
) => {
const { size = 5 } = feature;
// console.log('featureIdx', featureIdx, feature)
return Array.isArray(size)
? [size[0] * this.meter2coord]
: [(size as number) * this.meter2coord];
@ -367,7 +350,6 @@ export default class FillImageModel extends BaseModel {
this.texture = createTexture2D({
data: this.iconService.getCanvas(),
mag: gl.LINEAR,
// min: gl.LINEAR,
min: gl.LINEAR_MIPMAP_LINEAR,
premultiplyAlpha: false,
width: 1024,

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

@ -7,7 +7,6 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import { PointImageTriangulation } from '../../core/triangulation';
@ -18,7 +17,7 @@ export default class ImageModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
opacity,
opacity = 1,
offsets = [0, 0],
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
if (this.rendererService.getDirty()) {
@ -69,9 +68,7 @@ export default class ImageModel extends BaseModel {
u_texture: this.texture,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// u_opacity: opacity || 1.0,
// u_offsets: [-offsets[0], offsets[1]],
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],
@ -172,7 +169,6 @@ export default class ImageModel extends BaseModel {
min: 'linear mipmap nearest',
mipmap: true,
});
// this.layer.render();
// TODO: 更新完纹理后在更新的图层的时候需要更新所有的图层
this.layer.renderLayers();
return;
@ -180,7 +176,6 @@ export default class ImageModel extends BaseModel {
this.texture = createTexture2D({
data: this.iconService.getCanvas(),
mag: gl.LINEAR,
// min: gl.LINEAR,
min: gl.LINEAR_MIPMAP_LINEAR,
premultiplyAlpha: false,
width: 1024,

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

@ -7,7 +7,6 @@ import {
IModelUniform,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import normalFrag from '../shaders/normal_frag.glsl';
@ -76,7 +75,7 @@ export default class NormalModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],

19
packages/layers/src/point/models/radar.ts
View File

@ -17,8 +17,6 @@ import { PointFillTriangulation } from '../../core/triangulation';
import pointFillFrag from '../shaders/radar/radar_frag.glsl';
import pointFillVert from '../shaders/radar/radar_vert.glsl';
import { isNumber } from 'lodash';
import { Version } from '@antv/l7-maps';
export default class RadarModel extends BaseModel {
@ -27,9 +25,6 @@ export default class RadarModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
opacity = 1,
strokeOpacity = 1,
strokeWidth = 0,
stroke = 'rgba(0,0,0,0)',
offsets = [0, 0],
blend,
speed = 1,
@ -39,18 +34,12 @@ export default class RadarModel extends BaseModel {
this.dataTextureTest &&
this.dataTextureNeedUpdate({
opacity,
strokeOpacity,
strokeWidth,
stroke,
offsets,
})
) {
// 判断当前的样式中哪些是需要进行数据映射的，哪些是常量，同时计算用于构建数据纹理的一些中间变量
this.judgeStyleAttributes({
opacity,
strokeOpacity,
strokeWidth,
stroke,
offsets,
});
@ -88,7 +77,7 @@ export default class RadarModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],
@ -138,7 +127,6 @@ export default class RadarModel extends BaseModel {
* @returns
*/
public calMeter2Coord() {
// @ts-ignore
const [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
const center = [(minLng + maxLng) / 2, (minLat + maxLat) / 2];
@ -185,7 +173,7 @@ export default class RadarModel extends BaseModel {
return [
this.layer.buildLayerModel({
moduleName: 'pointfill_' + type,
moduleName: type,
vertexShader: vert,
fragmentShader: frag,
triangulation: PointFillTriangulation,
@ -208,7 +196,7 @@ export default class RadarModel extends BaseModel {
return {
frag: pointFillFrag,
vert: pointFillVert,
type: 'radar',
type: 'point_radar',
};
}
@ -272,7 +260,6 @@ export default class RadarModel extends BaseModel {
attributeIdx: number,
) => {
const { size = 5 } = feature;
// console.log('featureIdx', featureIdx, feature)
return Array.isArray(size)
? [size[0] * this.meter2coord]
: [(size as number) * this.meter2coord];

7
packages/layers/src/point/models/simplePoint.ts
View File

@ -8,7 +8,6 @@ import {
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
@ -84,12 +83,12 @@ export default class SimplePointModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],
u_stroke_opacity: isNumber(strokeOpacity) ? strokeOpacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 0.0,
u_stroke_opacity: Number(strokeOpacity),
u_stroke_width: Number(strokeWidth),
u_stroke_color: this.getStrokeColor(stroke),
};
}

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

@ -7,7 +7,6 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { boundsContains, getMask, padBounds } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import CollisionIndex from '../../utils/collision-index';
@ -161,8 +160,8 @@ export default class TextModel extends BaseModel {
u_cellTypeLayout: this.getCellTypeLayout(),
u_raisingHeight: Number(raisingHeight),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 0.0,
u_opacity: Number(opacity),
u_stroke_width: Number(strokeWidth),
u_stroke_color: this.getStrokeColor(stroke),
u_sdf_map: this.texture,
@ -227,6 +226,7 @@ export default class TextModel extends BaseModel {
}
public clearModels() {
this.texture?.destroy();
this.dataTexture?.destroy();
this.layer.off('remapping', this.buildModels);
}

12
packages/layers/src/point/shaders/extrude/extrude_frag.glsl
View File

@ -1,8 +1,6 @@
varying vec4 v_color;
uniform float u_opacity: 1.0;
varying float v_z;
varying float v_lightWeight;
uniform float u_pickLight: 0.0;
#pragma include "picking"
@ -18,11 +16,13 @@ uniform float u_opacitylinear_dir: 1.0;
void main() {
float opacity = styleMappingMat[0][0];
float lightWeight = styleMappingMat[1][3];
float barLinearZ = styleMappingMat[2][3];
// 设置圆柱的底色
if(u_linearColor == 1.0) { // 使用渐变颜色
gl_FragColor = mix(u_sourceColor, u_targetColor, v_z);
gl_FragColor.rgb *= v_lightWeight;
gl_FragColor = mix(u_sourceColor, u_targetColor, barLinearZ);
gl_FragColor.rgb *= lightWeight;
} else { // 使用 color 方法传入的颜色
gl_FragColor = v_color;
}
@ -32,12 +32,12 @@ void main() {
// 开启透明度渐变
if(u_opacitylinear > 0.0) {
gl_FragColor.a *= u_opacitylinear_dir > 0.0 ? (1.0 - v_z): v_z;
gl_FragColor.a *= u_opacitylinear_dir > 0.0 ? (1.0 - barLinearZ): barLinearZ;
}
// picking
if(u_pickLight > 0.0) {
gl_FragColor = filterColorAlpha(gl_FragColor, v_lightWeight);
gl_FragColor = filterColorAlpha(gl_FragColor, lightWeight);
} else {
gl_FragColor = filterColor(gl_FragColor);
}

20
packages/layers/src/point/shaders/extrude/extrude_vert.glsl
View File

@ -23,9 +23,6 @@ uniform float u_lightEnable: 1;
varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
varying float v_z;
varying float v_lightWeight;
#pragma include "styleMapping"
#pragma include "styleMappingCalOpacity"
@ -54,8 +51,8 @@ void main() {
// cal style mapping - 数据纹理映射部分的计算
styleMappingMat = mat4(
0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA - lightWeight
0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1] - linearZ(垂直方向 0 - 1 的值)
0.0, 0.0, 0.0, 0.0
);
@ -79,16 +76,11 @@ void main() {
vec3 size = a_Size * a_Position;
// a_Position.z 是在构建网格的时候传入的标准值 0 - 1，在插值器插值可以获取 0～1 线性渐变的值
v_z = a_Position.z;
// vec2 offset = project_pixel(size.xy);
// vec2 offset = (size.xy);
styleMappingMat[2][3] = a_Position.z;
vec3 offset = size; // 控制圆柱体的大小 - 从标准单位圆柱体进行偏移
if(u_heightfixed < 1.0) { // 圆柱体不固定高度
// offset = project_pixel(offset);
if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
// P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
offset = offset * pow(2.0, (19.0 - u_Zoom));
@ -106,17 +98,15 @@ void main() {
vec4 project_pos = project_position(vec4(a_Pos.xy, 0., 1.0));
// vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z) * u_r, 1.0);
// u_r 控制圆柱的生长
vec4 pos = vec4(project_pos.xy + offset.xy, offset.z * u_r, 1.0);
// 圆柱光照效果
// float lightWeight = u_lightEnable > 0.0 ? calc_lighting(pos): 1.0;
float lightWeight = 1.0;
if(u_lightEnable > 0.0) { // 取消三元表达式，增强健壮性
lightWeight = calc_lighting(pos);
}
v_lightWeight = lightWeight;
styleMappingMat[1][3] = lightWeight;
v_color =vec4(a_Color.rgb * lightWeight, a_Color.w);

4
packages/layers/src/point/shaders/image/fillImage_frag.glsl
View File

@ -1,12 +1,8 @@
uniform sampler2D u_texture;
uniform vec2 u_textSize;
uniform float u_additive;
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
varying float v_radius;
#pragma include "sdf_2d"
#pragma include "picking"
varying vec2 v_uv; // 本身的 uv 坐标

9
packages/layers/src/point/shaders/image/fillImage_vert.glsl
View File

@ -12,7 +12,6 @@ uniform mat4 u_Mvp;
uniform mat2 u_RotateMatrix;
uniform float u_isMeter;
varying float v_radius;
varying vec2 v_uv; // 本身的 uv 坐标
varying vec2 v_Iconuv; // icon 贴图的 uv 坐标
@ -25,7 +24,6 @@ uniform vec2 u_offsets;
#pragma include "projection"
#pragma include "picking"
void main() {
vec3 extrude = a_Extrude;
@ -73,13 +71,6 @@ void main() {
// cal style mapping
// radius(16-bit)
v_radius = a_Size;
// TODO: billboard
// anti-alias
highp float angle_sin = sin(a_Rotate);
highp float angle_cos = cos(a_Rotate);
mat2 rotation_matrix = mat2(angle_cos, -1.0 * angle_sin, angle_sin, angle_cos);

14
packages/layers/src/point/shaders/image_vert.glsl
View File

@ -7,7 +7,6 @@ varying vec4 v_color;
varying vec2 v_uv;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
uniform float u_stroke_width : 1;
uniform vec2 u_offsets;
uniform float u_opacity : 1;
@ -71,13 +70,12 @@ void main() {
// gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0));
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0);
} else {
gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0));
}
gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0);
} else {
gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0));
}
gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
setPickingColor(a_PickingColor);
}

2
packages/layers/src/point/shaders/radar/radar_frag.glsl
View File

@ -60,7 +60,5 @@ void main() {
radar_v = 1.0 - (radar_v - 0.99)/0.01;
}
gl_FragColor.a *= radar_v;
}

17
packages/layers/src/point/shaders/radar/radar_vert.glsl
View File

@ -8,7 +8,6 @@ uniform float u_time;
varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
uniform float u_globel;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
uniform float u_isMeter;
@ -18,13 +17,8 @@ varying vec4 v_color;
varying float v_radius;
uniform float u_opacity : 1;
uniform float u_stroke_opacity : 1;
uniform float u_stroke_width : 2;
uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
uniform vec2 u_offsets;
uniform float u_blur : 0.0;
#pragma include "styleMapping"
#pragma include "styleMappingCalOpacity"
@ -90,12 +84,11 @@ void main() {
// radius(16-bit)
v_radius = newSize;
// TODO: billboard
// anti-alias
// float antialiased_blur = -max(u_blur, antialiasblur);
float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, u_blur);
float blur = 0.0;
float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, blur);
vec2 offset = (extrude.xy * (newSize + u_stroke_width) + textrueOffsets);
vec2 offset = (extrude.xy * (newSize) + textrueOffsets);
vec3 aPosition = a_Position;
if(u_isMeter < 1.0) {
// 不以米为实际单位
@ -123,9 +116,5 @@ void main() {
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
}
if(u_globel > 0.0) {
gl_Position = u_ViewProjectionMatrix * vec4(a_Position + extrude * newSize * 0.1, 1.0);
}
setPickingColor(a_PickingColor);
}

4
packages/layers/src/point/shaders/simplePoint_frag.glsl
View File

@ -43,10 +43,6 @@ void main() {
gl_FragColor.a *= opacity;
gl_FragColor = filterColor(gl_FragColor);
if(u_additive > 0.0) {
gl_FragColor *= circleClipOpacity;

7
packages/layers/src/point/shaders/simplePoint_vert.glsl
View File

@ -65,16 +65,11 @@ styleMappingMat = mat4(
// cal style mapping
// vec2 offset = project_pixel(u_offsets);
vec2 offset = project_pixel(textrueOffsets);
// vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);
// gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));\
//
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
// vec2 offset = project_pixel((u_offsets));
gl_Position = u_Mvp * vec4(a_Position.xy + offset, a_Position.z, 1.0);
} else { // else
// vec2 offset = project_pixel(u_offsets);
vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);
gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));
}

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

@ -6,7 +6,6 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPolygonLayerStyleOptions } from '../../core/interface';
import { PolygonExtrudeTriangulation } from '../../core/triangulation';
@ -83,7 +82,7 @@ export default class ExtrudeModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_raisingHeight: Number(raisingHeight),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: Number(opacity),
// 渐变色支持参数
u_linearColor: useLinearColor,
@ -137,7 +136,7 @@ export default class ExtrudeModel extends BaseModel {
return {
frag: polygonExtrudePickLightFrag,
vert: polygonExtrudePickLightVert,
type: 'polygonExtrude',
type: 'polygonExtrudePickLight',
};
} else {
return {

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

@ -1,6 +1,11 @@
import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
import {
AttributeType,
gl,
IEncodeFeature,
IModel,
Triangulation,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPolygonLayerStyleOptions } from '../../core/interface';
import {
@ -53,11 +58,10 @@ export default class FillModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
// u_opacity: opacity,
u_raisingHeight: Number(raisingHeight),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: opacity,
u_opacitylinear: Number(opacityLinear.enable),
u_dir: opacityLinear.dir === 'in' ? 1.0 : 0.0,
@ -69,28 +73,18 @@ export default class FillModel extends BaseModel {
}
public buildModels(): IModel[] {
const { frag, vert, triangulation, type } = this.getModelParams();
const {
opacityLinear = {
enable: false,
dir: 'in',
},
mask = false,
maskInside = true,
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
this.layer.triangulation = opacityLinear.enable
? polygonTriangulationWithCenter
: polygonTriangulation;
this.layer.triangulation = triangulation;
return [
this.layer.buildLayerModel({
moduleName: 'polygon',
vertexShader: opacityLinear.enable ? polygon_linear_vert : polygon_vert,
fragmentShader: opacityLinear.enable
? polygon_linear_frag
: polygon_frag,
// triangulation: polygonTriangulation,
triangulation: opacityLinear.enable
? polygonTriangulationWithCenter
: polygonTriangulation,
moduleName: type,
vertexShader: vert,
fragmentShader: frag,
triangulation,
blend: this.getBlend(),
depth: { enable: false },
cull: {
@ -140,4 +134,32 @@ export default class FillModel extends BaseModel {
});
}
}
private getModelParams(): {
frag: string;
vert: string;
type: string;
triangulation: Triangulation;
} {
const {
opacityLinear = {
enable: false,
},
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
if (opacityLinear.enable) {
return {
frag: polygon_linear_frag,
vert: polygon_linear_vert,
type: 'polygon_linear',
triangulation: polygonTriangulationWithCenter,
};
} else {
return {
frag: polygon_frag,
vert: polygon_vert,
type: 'polygon_fill',
triangulation: polygonTriangulation,
};
}
}
}

4
packages/layers/src/polygon/models/ocean.ts
View File

@ -7,7 +7,6 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { create, isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPolygonLayerStyleOptions } from '../../core/interface';
import { polygonTriangulation } from '../../core/triangulation';
@ -60,7 +59,7 @@ export default class OceanModel extends BaseModel {
u_watercolor2: rgb2arr(watercolor2),
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: opacity,
};
}
@ -87,7 +86,6 @@ export default class OceanModel extends BaseModel {
fragmentShader: ocean_frag,
triangulation: polygonTriangulation,
depth: { enable: false },
stencil: getMask(mask, maskInside),
}),
];

4
packages/layers/src/polygon/models/water.ts
View File

@ -7,7 +7,6 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPolygonLayerStyleOptions } from '../../core/interface';
import { polygonTriangulation } from '../../core/triangulation';
@ -54,7 +53,7 @@ export default class WaterModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_speed: speed,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacity: opacity,
};
}
@ -81,7 +80,6 @@ export default class WaterModel extends BaseModel {
fragmentShader: water_frag,
triangulation: polygonTriangulation,
depth: { enable: false },
stencil: getMask(mask, maskInside),
}),
];

10
packages/layers/src/polygon/shaders/water/polygon_ocean_frag.glsl
View File

@ -1,13 +1,10 @@
uniform float u_time;
uniform float u_time: 0.0;
uniform float u_opacity: 1.0;
varying vec4 v_Color;
varying vec2 v_uv;
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
#pragma include "picking"
float coast2water_fadedepth = 0.10;
float large_waveheight = .750; // change to adjust the "heavy" waves
float large_wavesize = 3.4; // factor to adjust the large wave size
@ -247,8 +244,5 @@ void main() {
float opacity = styleMappingMat[0][0];
gl_FragColor = vec4(col, opacity);
// gl_FragColor = v_Color;
gl_FragColor = vec4(col, opacity);
}

6
packages/layers/src/polygon/shaders/water/polygon_ocean_vert.glsl
View File

@ -1,10 +1,8 @@
attribute vec4 a_Color;
attribute vec2 a_uv;
attribute vec3 a_Position;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
varying vec4 v_Color;
varying vec2 v_uv;
uniform float u_opacity: 1.0;
varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
@ -13,7 +11,6 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
#pragma include "styleMappingCalOpacity"
#pragma include "projection"
#pragma include "picking"
void main() {
v_uv = a_uv;
@ -43,7 +40,6 @@ styleMappingMat = mat4(
textureOffset = opacityAndOffset.g;
// cal style mapping - 数据纹理映射部分的计算
v_Color = a_Color;
vec4 project_pos = project_position(vec4(a_Position, 1.0));
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
@ -52,7 +48,5 @@ styleMappingMat = mat4(
} else {
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
}
setPickingColor(a_PickingColor);
}

104
packages/layers/src/polygon/shaders/water/polygon_water_frag.glsl
View File

@ -1,6 +1,5 @@
uniform sampler2D u_texture;
uniform float u_time;
uniform float u_time: 0.0;
uniform float u_speed: 1.0;
uniform float u_opacity: 1.0;
@ -8,62 +7,61 @@ varying vec4 v_Color;
varying vec2 v_uv;
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
#pragma include "picking"
float rand(vec2 n) { return 0.5 + 0.5 * fract(sin(dot(n.xy, vec2(12.9898, 78.233)))* 43758.5453); }
float rand(vec2 n) { return 0.5 + 0.5 * fract(sin(dot(n.xy, vec2(12.9898, 78.233)))* 43758.5453); }
float water(vec3 p) {
float t = u_time * u_speed;
p.z += t * 2.; p.x += t * 2.;
vec3 c1 = texture2D(u_texture, p.xz / 30.).xyz;
p.z += t * 3.; p.x += t * 0.52;
vec3 c2 = texture2D(u_texture, p.xz / 30.).xyz;
p.z += t * 4.; p.x += t * 0.8;
vec3 c3 = texture2D(u_texture, p.xz / 30.).xyz;
c1 += c2 - c3;
float z = (c1.x + c1.y + c1.z) / 3.;
return p.y + z / 4.;
float water(vec3 p) {
float t = u_time * u_speed;
p.z += t * 2.; p.x += t * 2.;
vec3 c1 = texture2D(u_texture, p.xz / 30.).xyz;
p.z += t * 3.; p.x += t * 0.52;
vec3 c2 = texture2D(u_texture, p.xz / 30.).xyz;
p.z += t * 4.; p.x += t * 0.8;
vec3 c3 = texture2D(u_texture, p.xz / 30.).xyz;
c1 += c2 - c3;
float z = (c1.x + c1.y + c1.z) / 3.;
return p.y + z / 4.;
}
float map(vec3 p) {
float d = 100.0;
d = water(p);
return d;
}
float intersect(vec3 ro, vec3 rd) {
float d = 0.0;
for (int i = 0; i <= 100; i++) {
float h = map(ro + rd * d);
if (h < 0.1) return d;
d += h;
}
return 0.0;
}
float map(vec3 p) {
float d = 100.0;
d = water(p);
return d;
}
vec3 norm(vec3 p) {
float eps = .1;
return normalize(vec3(
map(p + vec3(eps, 0, 0)) - map(p + vec3(-eps, 0, 0)),
map(p + vec3(0, eps, 0)) - map(p + vec3(0, -eps, 0)),
map(p + vec3(0, 0, eps)) - map(p + vec3(0, 0, -eps))
));
}
float intersect(vec3 ro, vec3 rd) {
float d = 0.0;
for (int i = 0; i <= 100; i++) {
float h = map(ro + rd * d);
if (h < 0.1) return d;
d += h;
}
return 0.0;
}
vec3 norm(vec3 p) {
float eps = .1;
return normalize(vec3(
map(p + vec3(eps, 0, 0)) - map(p + vec3(-eps, 0, 0)),
map(p + vec3(0, eps, 0)) - map(p + vec3(0, -eps, 0)),
map(p + vec3(0, 0, eps)) - map(p + vec3(0, 0, -eps))
));
}
float calSpc() {
vec3 l1 = normalize(vec3(1, 1, 1));
vec3 ro = vec3(-3, 20, -8);
vec3 rc = vec3(0, 0, 0);
vec3 ww = normalize(rc - ro);
vec3 uu = normalize(cross(vec3(0,1,0), ww));
vec3 vv = normalize(cross(rc - ro, uu));
vec3 rd = normalize(uu * v_uv.x + vv * v_uv.y + ww);
float d = intersect(ro, rd);
vec3 p = ro + rd * d;
vec3 n = norm(p);
float spc = pow(max(0.0, dot(reflect(l1, n), rd)), 30.0);
return spc;
}
float calSpc() {
vec3 l1 = normalize(vec3(1, 1, 1));
vec3 ro = vec3(-3, 20, -8);
vec3 rc = vec3(0, 0, 0);
vec3 ww = normalize(rc - ro);
vec3 uu = normalize(cross(vec3(0,1,0), ww));
vec3 vv = normalize(cross(rc - ro, uu));
vec3 rd = normalize(uu * v_uv.x + vv * v_uv.y + ww);
float d = intersect(ro, rd);
vec3 p = ro + rd * d;
vec3 n = norm(p);
float spc = pow(max(0.0, dot(reflect(l1, n), rd)), 30.0);
return spc;
}
void main() {
float opacity = styleMappingMat[0][0];

3
packages/layers/src/polygon/shaders/water/polygon_water_vert.glsl
View File

@ -13,7 +13,6 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
#pragma include "styleMappingCalOpacity"
#pragma include "projection"
#pragma include "picking"
void main() {
v_uv = a_uv;
@ -52,7 +51,5 @@ styleMappingMat = mat4(
} else {
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
}
setPickingColor(a_PickingColor);
}

17
packages/layers/src/wind/index.ts
View File

@ -1,21 +1,6 @@
import BaseLayer from '../core/BaseLayer';
import { IWindLayerStyleOptions } from '../core/interface';
import WindModels, { WindModelType } from './models';
interface IWindLayerStyleOptions {
uMin?: number;
uMax?: number;
vMin?: number;
vMax?: number;
fadeOpacity?: number;
speedFactor?: number;
dropRate?: number;
dropRateBump?: number;
opacity?: number;
numParticles?: number;
rampColors?: {
[key: number]: string;
};
sizeScale?: number;
}
export default class WindLayer extends BaseLayer<IWindLayerStyleOptions> {
public type: string = 'WindLayer';
public buildModels() {

81
packages/layers/src/wind/models/utils.ts
View File

@ -1,5 +1,8 @@
// @ts-nocheck
export function createProgram(gl, vshader, fshader) {
export function createProgram(
gl: WebGLRenderingContext,
vshader: string,
fshader: string,
) {
// Create shader object
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader); // 创建顶点着色器对象
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader); // 创建片元着色器对象
@ -33,22 +36,30 @@ export function createProgram(gl, vshader, fshader) {
const numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
for (let i = 0; i < numAttributes; i++) {
const attribute = gl.getActiveAttrib(program, i);
const attribute = gl.getActiveAttrib(program, i) as WebGLActiveInfo;
// @ts-ignore
program[attribute.name] = gl.getAttribLocation(program, attribute.name);
}
const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
for (let i$1 = 0; i$1 < numUniforms; i$1++) {
const uniform = gl.getActiveUniform(program, i$1);
const uniform = gl.getActiveUniform(program, i$1) as WebGLActiveInfo;
// @ts-ignore
program[uniform.name] = gl.getUniformLocation(program, uniform.name);
}
// @ts-ignore
program.vertexShader = vertexShader;
// @ts-ignore
program.fragmentShader = fragmentShader;
return program;
}
export function loadShader(gl: WebGLRenderingContext, type, source) {
export function loadShader(
gl: WebGLRenderingContext,
type: number,
source: string,
) {
// Create shader object
const shader = gl.createShader(type); // 生成着色器对象
if (shader == null) {
@ -120,12 +131,16 @@ export function createDataTexture(
return texture;
}
export function bindTexture(gl, texture, unit) {
export function bindTexture(
gl: WebGLRenderingContext,
texture: WebGLTexture,
unit: number,
) {
gl.activeTexture(gl.TEXTURE0 + unit);
gl.bindTexture(gl.TEXTURE_2D, texture);
}
export function createBuffer(gl, data) {
export function createBuffer(gl: WebGLRenderingContext, data: Float32Array) {
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
@ -135,9 +150,9 @@ export function createBuffer(gl, data) {
export function bindAttriBuffer(
gl: WebGLRenderingContext,
attrName: string,
vertices,
count,
program,
vertices: number,
count: number,
program: WebGLProgram,
) {
const buffer = gl.createBuffer();
if (!buffer) {
@ -160,47 +175,61 @@ export function bindAttriIndicesBuffer(
const buffer = gl.createBuffer();
if (!buffer) {
console.warn('failed create vertex buffer');
} else {
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
}
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
return buffer;
return buffer as WebGLBuffer;
}
export function bindUnifrom(gl, unifromName, data, program, vec) {
export function bindUnifrom(
gl: WebGLRenderingContext,
unifromName: string,
data: number | Float32List,
program: WebGLProgram,
vec: string,
) {
const uniform = gl.getUniformLocation(program, unifromName);
if (uniform < 0) {
if (uniform === null || uniform < 0) {
console.warn('无法获取 uniform 变量的存储位置');
} else {
setUnifrom(gl, uniform, data, vec);
}
setUnifrom(gl, uniform, data, vec);
return uniform;
}
export function setUnifrom(gl, location, data, vec) {
export function setUnifrom(
gl: WebGLRenderingContext,
location: WebGLUniformLocation,
data: number | Float32List,
vec: string,
) {
switch (vec) {
case 'float':
gl.uniform1f(location, data);
gl.uniform1f(location, data as number);
break;
case 'vec2':
gl.uniform2fv(location, data);
gl.uniform2fv(location, data as Float32List);
break;
case 'vec3':
gl.uniform3fv(location, data);
gl.uniform3fv(location, data as Float32List);
break;
case 'vec4':
gl.uniform4fv(location, data);
gl.uniform4fv(location, data as Float32List);
break;
case 'bool':
gl.uniform1i(location, data); // 1 - true 0 - false
gl.uniform1i(location, data as number); // 1 - true 0 - false
break;
case 'sampler2d':
break;
case 'mat4':
gl.uniformMatrix4fv(location, false, data);
gl.uniformMatrix4fv(location, false, data as Float32List);
break;
}
}
export function initFramebuffer(gl) {
export function initFramebuffer(gl: WebGLRenderingContext) {
const { drawingBufferWidth, drawingBufferHeight } = gl;
const OFFER_SCREEN_WIDTH = drawingBufferWidth;
@ -224,9 +253,11 @@ export function initFramebuffer(gl) {
);
const texture = gl.createTexture();
const textureSize = 1024;
// @ts-ignore
FRAMEBUFFER.texture = texture;
// @ts-ignore
FRAMEBUFFER.width = OFFER_SCREEN_WIDTH;
// @ts-ignore
FRAMEBUFFER.height = OFFER_SCREEN_HEIGHT;
gl.bindTexture(gl.TEXTURE_2D, texture);

20
packages/layers/src/wind/models/wind.ts
View File

@ -7,30 +7,14 @@ import {
ITexture2D,
Point,
} from '@antv/l7-core';
import { FrequencyController, isMini } from '@antv/l7-utils';
import { FrequencyController } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel';
import { IWindLayerStyleOptions } from '../../core/interface';
import { RasterImageTriangulation } from '../../core/triangulation';
import WindFrag from '../shaders/wind_frag.glsl';
import WindVert from '../shaders/wind_vert.glsl';
import { IWind, IWindProps, Wind } from './windRender';
interface IWindLayerStyleOptions {
uMin?: number;
uMax?: number;
vMin?: number;
vMax?: number;
fadeOpacity?: number;
speedFactor?: number;
dropRate?: number;
dropRateBump?: number;
opacity?: number;
numParticles?: number;
rampColors?: {
[key: number]: string;
};
sizeScale?: number;
}
const defaultRampColors = {
0.0: '#3288bd',
0.1: '#66c2a5',

20
packages/layers/src/wind/models/windRender.ts
View File

@ -156,13 +156,21 @@ export class Wind {
this.dropRate = 0.003; // how often the particles move to a random place
this.dropRateBump = 0.01; // drop rate increase relative to individual particle speed
this.drawProgram = glUtils.createProgram(gl, drawVert, drawFrag);
this.drawProgram = glUtils.createProgram(
gl,
drawVert,
drawFrag,
) as WebGLProgram;
this.fullScreenProgram = glUtils.createProgram(
gl,
fullScreenVert,
fullScreenFrag,
);
this.updateProgram = glUtils.createProgram(gl, updateVert, updateFrag);
) as WebGLProgram;
this.updateProgram = glUtils.createProgram(
gl,
updateVert,
updateFrag,
) as WebGLProgram;
this.quadBuffer = glUtils.createBuffer(
gl,
@ -365,8 +373,8 @@ export class Wind {
if (this.windData?.image) {
const gl = this.gl;
glUtils.bindTexture(gl, this.windTexture, 0);
glUtils.bindTexture(gl, this.particleStateTexture0, 1);
glUtils.bindTexture(gl, this.windTexture as WebGLTexture, 0);
glUtils.bindTexture(gl, this.particleStateTexture0 as WebGLTexture, 1);
this.drawScreen(); // draw Particles into framebuffer
this.updateParticles();
@ -437,7 +445,7 @@ export class Wind {
gl.useProgram(program);
bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
glUtils.bindTexture(gl, this.colorRampTexture, 2);
glUtils.bindTexture(gl, this.colorRampTexture as WebGLTexture, 2);
gl.uniform1i(program.u_wind, 0);
gl.uniform1i(program.u_particles, 1);

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

@ -4,7 +4,6 @@ import * as React from 'react';
export default class Amap2demo_image extends React.Component {
// @ts-ignore
private scene: Scene;
private imageLayer: any;
public componentWillUnmount() {
this.scene.destroy();
@ -18,7 +17,6 @@ export default class Amap2demo_image extends React.Component {
style: 'light',
center: [121.434765, 31.256735],
zoom: 12,
viewMode: '3D',
}),
});
this.scene = scene;
@ -44,13 +42,6 @@ export default class Amap2demo_image extends React.Component {
const imageLayer = new PointLayer()
.source(data, {
// .source([
// {
// longitude: 121.434765,
// latitude: 31.256735,
// name: ''
// }
// ], {
parser: {
type: 'json',
x: 'longitude',
@ -58,23 +49,19 @@ export default class Amap2demo_image extends React.Component {
},
})
.shape('name', ['00', '01', '02'])
.rotate('name', () => Math.random() * Math.PI)
// .rotate('name', () => Math.random() * Math.PI)
// .rotate(Math.PI/2)
.style({
layerType: 'fillImage',
rotation: 0,
})
.active({
color: '#00f',
mix: 0.6,
})
.size(30);
// .style({
// // layerType: 'fillImage',
// rotation: 0,
// })
// .active({
// color: '#00f',
// mix: 0.6,
// })
// .size(30);
.size(25);
scene.addLayer(imageLayer);
setTimeout(() => {
console.log('remove layer');
scene.removeLayer(imageLayer);
}, 2000);
});
});
}

8
stories/Map/components/amap2demo_polygon.tsx
View File

@ -51,10 +51,10 @@ export default class Amap2demo_polygon extends React.Component {
.shape('fill')
.color('red')
.style({
// opacityLinear: {
// enable: true,
// dir: 'in',
// },
opacityLinear: {
enable: true,
dir: 'in',
},
});
scene.addLayer(layer);

9
stories/Map/components/amapdemo_extrude.tsx
View File

@ -25,7 +25,6 @@ export default class Amapdemo_extrude extends React.Component {
this.scene = scene;
scene.on('loaded', () => {
console.log('event test');
fetch(
'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
)
@ -39,19 +38,23 @@ export default class Amapdemo_extrude extends React.Component {
y: 'w',
},
})
.shape('squareColumn') // cylinder triangleColumn hexagonColumn squareColumn
// .shape('squareColumn') // cylinder triangleColumn hexagonColumn squareColumn
.shape('cylinder') // cylinder triangleColumn hexagonColumn squareColumn
.size('t', function(level) {
return [1, 1, level * 2 + 20];
// return [10, 10, level * 2 + 20];
})
.active(true)
.color('#0ff')
.style({
opacity: 0.8,
// opacity: 0.8,
opacityLinear: {
enable: true, // true - false
dir: 'up', // up - down
},
lightEnable: false,
// sourceColor: '#f00',
// targetColor: "#0f0"
});
scene.addLayer(pointLayer);
});

27
stories/Object/components/ocean.tsx
View File

@ -17,31 +17,6 @@ export default class Amap2demo_polygon extends React.Component {
}),
});
this.scene = scene;
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.4,
},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[111.26953125, 33.52307880890422],
[111.26953125, 34.03445260967645],
[112.03857421875, 34.03445260967645],
[112.03857421875, 33.52307880890422],
[111.26953125, 33.52307880890422],
],
],
],
},
},
],
};
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
@ -51,7 +26,7 @@ export default class Amap2demo_polygon extends React.Component {
const lakeLayer = new PolygonLayer({ autoFit: true })
.source(lakeData)
.shape('ocean')
.color('#1E90FF')
.color('#f00')
.style({
watercolor: '#6D99A8',
// watercolor: '#0f0',

1
stories/Object/components/radar.tsx
View File

@ -37,6 +37,7 @@ export default class Amap2demo_polygon extends React.Component {
.shape('radar')
.size(100)
.color('#d00')
.active(true)
.style({
// rotation: 90
speed: 5,

25
stories/Object/components/water.tsx
View File

@ -17,31 +17,6 @@ export default class Amap2demo_polygon extends React.Component {
}),
});
this.scene = scene;
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.4,
},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[111.26953125, 33.52307880890422],
[111.26953125, 34.03445260967645],
[112.03857421875, 34.03445260967645],
[112.03857421875, 33.52307880890422],
[111.26953125, 33.52307880890422],
],
],
],
},
},
],
};
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',

2
stories/mask/components/point.tsx
View File

@ -113,7 +113,7 @@ export default class MaskPoints extends React.Component {
zIndex: 3,
mask: true,
maskInside: true,
maskOpacity: 0.2,
// maskOpacity: 0.1,
maskColor: '#ff0',
maskfence: maskData2,
})