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

feat: 补完所有线图层纹理能力，修复arc/arc3d/great_line虚线bug

This commit is contained in:
2912401452 2021-06-08 14:32:49 +08:00
parent e7096f0430
commit 2474707c29
23 changed files with 563 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,7 +130,7 @@ export interface ILayer {
scale(field: string | number | IScaleOptions, cfg?: IScale): ILayer;
size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
texture?(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
texture(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
label(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
animate(option: Partial<IAnimateOption> | boolean): ILayer;

2
packages/core/src/services/layer/StyleAttributeService.ts
View File

@ -1,4 +1,4 @@
import { inject, injectable } from 'inversify';
import { inject, injectable, optional } from 'inversify';
import { TYPES } from '../../types';
import { gl } from '../renderer/gl';
import { IAttribute } from '../renderer/IAttribute';

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

@ -11,4 +11,5 @@ export interface ILineLayerStyleOptions {
forward?: boolean;
lineTexture?: boolean;
iconStep?: number;
textureBlend?: string; // 可选参数、供给纹理贴图使用
}

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

@ -23,6 +23,7 @@ export default class ArcModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
opacity,
textureBlend = 'normal',
lineType = 'solid',
dashArray = [10, 5],
forward = true,
@ -39,7 +40,8 @@ export default class ArcModel extends BaseModel {
}
return {
u_opacity: opacity || 1,
u_opacity: opacity === undefined ? 1 : opacity,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber: 30,
u_line_type: lineStyleObj[lineType || 'solid'],
u_dash_array: dashArray,

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

@ -6,6 +6,7 @@ import {
ILayerConfig,
IModel,
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
@ -17,22 +18,39 @@ const lineStyleObj: { [key: string]: number } = {
dash: 1.0,
};
export default class Arc3DModel extends BaseModel {
protected texture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
textureBlend = 'normal',
lineType = 'solid',
dashArray = [10, 5],
lineTexture = false,
iconStep = 100,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (dashArray.length === 2) {
dashArray.push(0, 0);
}
if (this.rendererService.getDirty()) {
this.texture.bind();
}
return {
u_opacity: opacity || 1,
u_opacity: opacity === undefined ? 1 : opacity,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber: 30,
u_line_type: lineStyleObj[lineType as string] || 0.0,
u_dash_array: dashArray,
u_texture: this.texture, // 贴图
u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
};
}
public getAnimateUniforms(): IModelUniform {
const { animateOption } = this.layer.getLayerConfig() as ILayerConfig;
return {
@ -42,9 +60,19 @@ export default class Arc3DModel extends BaseModel {
}
public initModels(): IModel[] {
this.updateTexture();
this.iconService.on('imageUpdate', this.updateTexture);
return this.buildModels();
}
public clearModels() {
if (this.texture) {
this.texture.destroy();
}
this.iconService.off('imageUpdate', this.updateTexture);
}
public buildModels(): IModel[] {
return [
this.layer.buildLayerModel({
@ -103,5 +131,50 @@ export default class Arc3DModel extends BaseModel {
},
},
});
this.styleAttributeService.registerStyleAttribute({
name: 'uv',
type: AttributeType.Attribute,
descriptor: {
name: 'a_iconMapUV',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 2,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const iconMap = this.iconService.getIconMap();
const { texture } = feature;
const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };
return [x, y];
},
},
});
}
private updateTexture = () => {
const { createTexture2D } = this.rendererService;
if (this.texture) {
this.texture.update({
data: this.iconService.getCanvas(),
});
this.layer.render();
return;
}
this.texture = createTexture2D({
data: this.iconService.getCanvas(),
mag: gl.NEAREST,
min: gl.NEAREST,
premultiplyAlpha: false,
width: 1024,
height: this.iconService.canvasHeight || 128,
});
};
}

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

@ -6,12 +6,14 @@ import {
ILayerConfig,
IModel,
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
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_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';
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
@ -19,20 +21,35 @@ const lineStyleObj: { [key: string]: number } = {
};
export default class GreatCircleModel extends BaseModel {
protected texture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
textureBlend = 'normal',
lineType = 'solid',
dashArray = [10, 5],
lineTexture = false,
iconStep = 100,
} = this.layer.getLayerConfig() as Partial<ILineLayerStyleOptions>;
// console.log('opacity', opacity)
if (dashArray.length === 2) {
dashArray.push(0, 0);
}
if (this.rendererService.getDirty()) {
this.texture.bind();
}
return {
u_opacity: opacity || 1,
u_opacity: opacity === undefined ? 1 : opacity,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber: 30,
u_line_type: lineStyleObj[lineType as string] || 0.0,
u_dash_array: dashArray,
u_texture: this.texture, // 贴图
u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
};
}
public getAnimateUniforms(): IModelUniform {
@ -44,9 +61,19 @@ export default class GreatCircleModel extends BaseModel {
}
public initModels(): IModel[] {
this.updateTexture();
this.iconService.on('imageUpdate', this.updateTexture);
return this.buildModels();
}
public clearModels() {
if (this.texture) {
this.texture.destroy();
}
this.iconService.off('imageUpdate', this.updateTexture);
}
public buildModels(): IModel[] {
return [
this.layer.buildLayerModel({
@ -105,5 +132,51 @@ export default class GreatCircleModel extends BaseModel {
},
},
});
this.styleAttributeService.registerStyleAttribute({
name: 'uv',
type: AttributeType.Attribute,
descriptor: {
name: 'a_iconMapUV',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 2,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const iconMap = this.iconService.getIconMap();
const { texture } = feature;
// console.log('icon feature', feature)
const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };
return [x, y];
},
},
});
}
private updateTexture = () => {
const { createTexture2D } = this.rendererService;
if (this.texture) {
this.texture.update({
data: this.iconService.getCanvas(),
});
this.layer.render();
return;
}
this.texture = createTexture2D({
data: this.iconService.getCanvas(),
mag: gl.NEAREST,
min: gl.NEAREST,
premultiplyAlpha: false,
width: 1024,
height: this.iconService.canvasHeight || 128,
});
};
}

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

@ -24,6 +24,7 @@ export default class LineModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
opacity,
textureBlend = 'normal',
lineType = 'solid',
dashArray = [10, 5, 0, 0],
lineTexture = false,
@ -38,7 +39,8 @@ export default class LineModel extends BaseModel {
}
return {
u_opacity: opacity || 1.0,
u_opacity: opacity === undefined ? 1 : opacity,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
u_line_type: lineStyleObj[lineType],
u_dash_array: dashArray,

64
packages/layers/src/line/shaders/line_arc_3d_frag.glsl
View File

@ -1,8 +1,10 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
#define LineTexture 1.0
uniform float u_opacity;
uniform float u_textureBlend;
uniform float u_blur : 0.9;
uniform float u_line_type: 0.0;
varying vec2 v_normal;
@ -10,12 +12,24 @@ varying vec4 v_dash_array;
varying float v_distance_ratio;
varying vec4 v_color;
uniform float u_line_texture: 0.0;
uniform sampler2D u_texture;
uniform vec2 u_textSize;
varying float v_segmentIndex;
uniform float segmentNumber;
varying float v_arcDistrance;
varying float v_pixelLen;
varying float v_a;
varying vec2 v_offset;
varying vec2 v_iconMapUV;
uniform float u_time;
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
#pragma include "picking"
void main() {
float animateSpeed = 0.0; // 运动速度
gl_FragColor = v_color;
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
// float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
@ -30,21 +44,47 @@ void main() {
}
if(u_aimate.x == Animate) {
animateSpeed = u_time / u_aimate.y;
float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
alpha = smoothstep(0., 1., alpha);
// alpha = smoothstep(0., 1., alpha);
alpha = clamp(alpha, 0.0, 1.0);
gl_FragColor.a *= alpha;
}
// if(u_line_texture == LineTexture) { // while load texture
// //v_u; // 水平
// float v = length(v_offset)/(v_a); // 横向
// vec2 uv= v_iconMapUV / u_textSize + vec2(v_u, v) / u_textSize * 64.;
// // gl_FragColor = vec4(v_u, v, 0.0, 1.0);
// // gl_FragColor = vec4(1.0, 0.0, 0.0, v_u);
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
// } else {
// gl_FragColor = filterColor(gl_FragColor);
// }
gl_FragColor = filterColor(gl_FragColor);
if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
// float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / segmentNumber));
float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
float count = floor(v_arcDistrance/v_pixelLen);
float u = fract(arcRadio * count - animateSpeed * count);
if(u_aimate.x == Animate) {
u = gl_FragColor.a/u_opacity;
}
float v = length(v_offset)/(v_a); // 横向
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
vec4 pattern = texture2D(u_texture, uv);
if(u_textureBlend == 0.0) { // normal
pattern.a = 0.0;
gl_FragColor = filterColor(gl_FragColor + pattern);
} else { // replace
pattern.a *= u_opacity;
if(gl_FragColor.a <= 0.0) {
pattern.a = 0.0;
}
gl_FragColor = filterColor(pattern);
}
// gl_FragColor = filterColor(gl_FragColor + pattern);
} else {
gl_FragColor = filterColor(gl_FragColor);
}
// gl_FragColor = filterColor(gl_FragColor);
}

34
packages/layers/src/line/shaders/line_arc_3d_vert.glsl
View File

@ -1,6 +1,7 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
#define LineTexture 1.0
attribute vec3 a_Position;
attribute vec4 a_Instance;
attribute vec4 a_Color;
@ -17,6 +18,16 @@ uniform float u_line_type: 0.0;
uniform vec4 u_dash_array: [10.0, 5., 0, 0];
varying vec4 v_dash_array;
uniform float u_icon_step: 100;
uniform float u_line_texture: 0.0;
varying float v_segmentIndex;
varying float v_arcDistrance;
varying float v_pixelLen;
varying float v_a;
varying vec2 v_offset;
attribute vec2 a_iconMapUV;
varying vec2 v_iconMapUV;
#pragma include "projection"
#pragma include "project"
#pragma include "picking"
@ -73,7 +84,15 @@ void main() {
if(u_line_type == LineTypeDash) {
v_distance_ratio = segmentIndex / segmentNumber;
float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
// float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
vec2 s = source;
vec2 t = target;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
s = unProjCustomCoord(source);
t = unProjCustomCoord(target);
}
float total_Distance = pixelDistance(s, t) / 2.0 * PI;
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
}
if(u_aimate.x == Animate) {
@ -86,6 +105,19 @@ void main() {
vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y);
v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式
v_segmentIndex = a_Position.x;
v_arcDistrance = length(source - target);
v_pixelLen = project_pixel(u_icon_step);
vec2 projectOffset = project_pixel(offset);
v_offset = projectOffset + projectOffset * sign(a_Position.y);
v_a = project_pixel(a_Size);
v_iconMapUV = a_iconMapUV;
}
// gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * (vec4(curr.xy + project_pixel(offset), curr.z, 1.0));

31
packages/layers/src/line/shaders/line_arc_frag.glsl
View File

@ -4,6 +4,7 @@
#define LineTexture 1.0
uniform float u_opacity;
uniform float u_textureBlend;
uniform float u_blur : 0.9;
uniform float u_line_type: 0.0;
varying vec2 v_normal;
@ -48,25 +49,39 @@ void main() {
animateSpeed = u_time / u_aimate.y;
float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
alpha = smoothstep(0., 1., alpha);
// alpha = smoothstep(0., 1., alpha);
alpha = clamp(alpha, 0.0, 1.0);
gl_FragColor.a *= alpha;
}
if(u_line_texture == LineTexture) { // while load texture
float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / segmentNumber));
// float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
float count = floor(v_arcDistrance/v_pixelLen);
float u = 1.0 - fract(arcRadio * count + animateSpeed);
float alpha = 1.0;
if(u_aimate.x == Animate) {
u = gl_FragColor.a;
alpha = gl_FragColor.a;
u = gl_FragColor.a/u_opacity;
}
float v = length(v_offset)/(v_a); // 横向
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
vec4 pattern = texture2D(u_texture, uv);
if(u_textureBlend == 0.0) { // normal
pattern.a = 0.0;
gl_FragColor = filterColor(gl_FragColor + pattern);
} else { // replace
pattern.a *= u_opacity;
if(gl_FragColor.a <= 0.0) {
pattern.a = 0.0;
}
gl_FragColor = filterColor(pattern);
}
gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
gl_FragColor.a *= alpha;
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
// gl_FragColor = filterColor(texture2D(u_texture, uv));
} else {
gl_FragColor = filterColor(gl_FragColor);

91
packages/layers/src/line/shaders/line_arc_great_circle_frag.glsl Normal file
View File

@ -0,0 +1,91 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
#define LineTexture 1.0
uniform float u_opacity;
uniform float u_textureBlend;
uniform float u_blur : 0.9;
uniform float u_line_type: 0.0;
varying vec2 v_normal;
varying vec4 v_dash_array;
varying float v_distance_ratio;
varying vec4 v_color;
uniform float u_time;
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
uniform float u_line_texture: 0.0;
uniform sampler2D u_texture;
uniform vec2 u_textSize;
uniform float segmentNumber;
varying float v_segmentIndex;
varying float v_arcDistrance;
varying float v_pixelLen;
varying vec2 v_offset;
varying float v_a;
varying vec2 v_iconMapUV;
#pragma include "picking"
void main() {
float animateSpeed = 0.0;
gl_FragColor = v_color;
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
// float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
gl_FragColor.a *= u_opacity;
if(u_line_type == LineTypeDash) {
float flag = 0.;
float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength < v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
flag = 1.;
}
gl_FragColor.a *=flag;
}
if(u_aimate.x == Animate) {
animateSpeed = u_time / u_aimate.y;
// float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
// float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
float alpha =1.0 - fract( mod(1.0- smoothstep(0.0, 1.0, v_distance_ratio), u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
alpha = smoothstep(0., 1., alpha);
// alpha = clamp(alpha, 0.1, 1.0);
// if(alpha < 0.01) alpha = 0.0;
gl_FragColor.a *= alpha;
}
if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式
float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
// float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
float count = floor(v_arcDistrance/v_pixelLen);
// float u = fract(arcRadio * count);
float u = fract(arcRadio * count - animateSpeed * count);
// float u = fract(arcRadio * count - animateSpeed);
if(u_aimate.x == Animate) {
u = gl_FragColor.a;
}
float v = length(v_offset)/(v_a); // 横向
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
vec4 pattern = texture2D(u_texture, uv);
if(u_textureBlend == 0.0) { // normal
pattern.a = 0.0;
gl_FragColor = filterColor(gl_FragColor + pattern);
} else { // replace
pattern.a *= u_opacity;
if(gl_FragColor.a <= 0.0) {
pattern.a = 0.0;
}
gl_FragColor = filterColor(pattern);
}
// gl_FragColor = filterColor(gl_FragColor + pattern);
} else {
gl_FragColor = filterColor(gl_FragColor);
}
// gl_FragColor = filterColor(gl_FragColor);
}

34
packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
View File

@ -1,6 +1,8 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
#define LineTexture 1.0
attribute vec4 a_Color;
attribute vec3 a_Position;
attribute vec4 a_Instance;
@ -17,6 +19,17 @@ uniform float u_line_type: 0.0;
uniform vec4 u_dash_array: [10.0, 5., 0, 0];
varying vec4 v_dash_array;
uniform float u_icon_step: 100;
uniform float u_line_texture: 0.0;
varying float v_segmentIndex;
varying float v_arcDistrance;
varying float v_pixelLen;
varying vec2 v_offset;
varying float v_a;
attribute vec2 a_iconMapUV;
varying vec2 v_iconMapUV;
#pragma include "projection"
#pragma include "project"
#pragma include "picking"
@ -119,7 +132,16 @@ void main() {
float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
if(u_line_type == LineTypeDash) {
v_distance_ratio = segmentIndex / segmentNumber;
float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba);
vec2 s = source;
vec2 t = target;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
s = unProjCustomCoord(source);
t = unProjCustomCoord(target);
}
float total_Distance = pixelDistance(s, t) / 2.0 * PI;
total_Distance = total_Distance*8.0;
// float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba);
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
}
if(u_aimate.x == Animate) {
@ -134,6 +156,16 @@ void main() {
// vec4 project_pos = project_position(vec4(curr.xy, 0, 1.0));
// gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0));
if(LineTexture == u_line_texture) { // 开启贴图模式
v_segmentIndex = a_Position.x;
v_arcDistrance = length(source - target);
v_pixelLen = project_pixel(u_icon_step)/8.0;
v_a = project_pixel(a_Size);
v_offset = offset + offset * sign(a_Position.y);
v_iconMapUV = a_iconMapUV;
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * (vec4(curr.xy + offset, curr.z, 1.0));
} else {

12
packages/layers/src/line/shaders/line_arc_vert.glsl
View File

@ -94,7 +94,15 @@ void main() {
float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
if(u_line_type == LineTypeDash) {
v_distance_ratio = segmentIndex / segmentNumber;
float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
vec2 s = source;
vec2 t = target;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
s = unProjCustomCoord(source);
t = unProjCustomCoord(target);
}
float total_Distance = pixelDistance(s, t) / 2.0 * PI;
// float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
}
if(u_aimate.x == Animate) {
@ -106,6 +114,7 @@ void main() {
vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0));
vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0));
v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
//unProjCustomCoord
vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
@ -122,6 +131,7 @@ void main() {
// gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
// gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
} else {
gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));

17
packages/layers/src/line/shaders/line_frag.glsl
View File

@ -5,6 +5,7 @@
uniform float u_blur : 0.99;
uniform float u_line_type: 0.0;
uniform float u_opacity : 1.0;
uniform float u_textureBlend;
varying vec4 v_color;
varying vec2 v_normal;
@ -56,13 +57,25 @@ void main() {
// gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, dashLength)));
}
if(u_line_texture == LineTexture) { // while load texture
if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
float u = fract(mod(v_distance, v_pixelLen)/v_pixelLen - animateSpeed);
float v = length(v_offset)/(v_a*2.0);
v = max(smoothstep(0.95, 1.0, v), v);
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, vec2(u, v)));
gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
vec4 pattern = texture2D(u_texture, uv);
if(u_textureBlend == 0.0) { // normal
pattern.a = 0.0;
gl_FragColor = filterColor(gl_FragColor + pattern);
} else { // replace
pattern.a *= u_opacity;
if(gl_FragColor.a <= 0.0) {
pattern.a = 0.0;
}
gl_FragColor = filterColor(pattern);
}
} else {
gl_FragColor = filterColor(gl_FragColor);
}

3
packages/layers/src/plugins/DataMappingPlugin.ts
View File

@ -117,7 +117,8 @@ export default class DataMappingPlugin implements ILayerPlugin {
coordinates: record.coordinates,
...preRecord,
};
// console.log('encodeRecord', encodeRecord)
// console.log('attributes', attributes)
attributes
.filter((attribute) => attribute.scale !== undefined)
.forEach((attribute: IStyleAttribute) => {

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

@ -45,6 +45,8 @@ export default class Amap2demo_arcLine extends React.Component {
.style({
opacity: 0.8,
blur: 0.99,
lineType: 'dash',
dashArray: [5, 5],
});
// .forward(false)
scene.addLayer(layer);

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

@ -38,7 +38,7 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
lat2: 52.802761415419674,
},
];
//// @ts-ignore
const layer = new LineLayer({
blend: 'normal',
})
@ -53,18 +53,23 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
})
.size(10)
.shape('arc3d')
// .texture('02')
.texture('02')
.color('#8C1EB2')
.style({
// forward: false,
// lineTexture: true, // 开启线的贴图功能
// iconStep: 100, // 设置贴图纹理的间距
// // opacity: 0
lineTexture: true, // 开启线的贴图功能
iconStep: 10, // 设置贴图纹理的间距
// opacity: 0,
opacity: 0.8,
// opacity: 0.2,
lineType: 'dash',
dashArray: [5, 5],
textureBlend: 'replace',
// textureBlend: 'normal',
});
// .animate({
// duration: 50,
// interval: 0.3,
// trailLength: 0.1,
// interval: 0.2,
// trailLength: 0.02,
// });
scene.addLayer(layer);
});

14
stories/Map/components/amap2demo_arcLineTex.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_arcLineTex extends React.Component {
@ -14,6 +14,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
// map: new GaodeMapV1({
map: new GaodeMap({
pitch: 40,
center: [107.77791556935472, 35.443286920228644],
@ -38,7 +39,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
lat2: 52.802761415419674,
},
];
// @ts-ignore
const layer = new LineLayer({
blend: 'normal',
})
@ -58,8 +59,13 @@ export default class Amap2demo_arcLineTex extends React.Component {
.style({
forward: false,
lineTexture: true, // 开启线的贴图功能
iconStep: 100, // 设置贴图纹理的间距
opacity: 0,
iconStep: 30, // 设置贴图纹理的间距
// opacity: 0.5,
// opacity: 0.2,
// lineType: 'dash',
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
})
.animate({
duration: 50,

102
stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx Normal file
View File

@ -0,0 +1,102 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_arcLine_greatCircle extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
center: [107.77791556935472, 35.443286920228644],
zoom: 2.9142882493605033,
viewMode: '3D',
}),
});
this.scene = scene;
scene.on('loaded', () => {
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
// "https://gw-office.alipayobjects.com/bmw-prod/ae2a8580-da3d-43ff-add4-ae9c1bfc75bb.svg"
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
);
const layer = new LineLayer({ blend: 'normal' })
.source(
[
{
lng1: 75.9375,
lat1: 37.71859032558816,
lng2: 123.3984375,
lat2: 39.639537564366684,
},
],
{
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
},
)
.size(20)
.shape('greatcircle')
.color('#ff0000')
.texture('02')
.style({
// opacity: 0.0,
// textureBlend: 'replace',
// textureBlend: 'normal',
blur: 0.99,
// lineTexture: true, // 开启线的贴图功能
iconStep: 5, // 设置贴图纹理的间距
// lineType: 'dash',
// dashArray: [5, 5],
});
// .animate({
// duration: 5,
// interval: 0.2,
// trailLength: 0.4,
// });
// .animate(true);
scene.addLayer(layer);
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

21
stories/Map/components/amap2demo_lineStreet.tsx
View File

@ -41,22 +41,27 @@ export default class Amap2demo_lineStreet extends React.Component {
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
// @ts-ignore
const layer = new LineLayer({})
.source(data)
.size(5)
.shape('line')
.texture('02')
.texture('01')
.color('#25d8b7')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间，延时
trailLength: 2, // 流线长度
})
// .animate({
// interval: 1, // 间隔
// duration: 1, // 持续时间，延时
// trailLength: 2, // 流线长度
// })
.style({
// opacity: 0.5,
opacity: 0.5,
// opacity: 0,
lineTexture: true, // 开启线的贴图功能
iconStep: 50, // 设置贴图纹理的间距
// lineType: 'dash',
// dashArray: [5, 5],
textureBlend: 'replace',
// textureBlend: 'normal',
});
scene.addLayer(layer);
});

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

@ -33,7 +33,7 @@ export default class Amap2demo_road extends React.Component {
'road',
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ',
);
// @ts-ignore
const layer = new LineLayer()
.source(data)
.size(10)

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

@ -33,7 +33,7 @@ export default class Amap2demo_road2 extends React.Component {
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
// @ts-ignore
const layer = new LineLayer({})
.source(data)
.size(5)

4
stories/Map/map.stories.tsx
View File

@ -17,6 +17,7 @@ import Amap2demo_polygon_extrude from './components/amap2demo_polygon_extrude'
import Amap2demo_arcLine from "./components/amap2demo_arcLine"
import Amap2demo_arcLine3d from "./components/amap2demo_arcLine3d"
import Amap2demo_arcLine_greatCircle from "./components/amap2demo_arcLine_greatCircle"
import Amap2demo_arcLine_greatCircleTex from "./components/amap2demo_arcLine_greatCircleTex"
import Amap2demo_lineHeight from "./components/amap2demo_lineHeight"
import Amap2demo_lineDash from "./components/amap2demo_lineDash"
import Amap2demo_arcLineDir from "./components/amap2demo_arcLineDir"
@ -65,7 +66,8 @@ storiesOf('地图方法', module)
.add('高德地图2.0 line_arc', () => <Amap2demo_arcLine />)
.add('高德地图2.0 line_arc3d', () => <Amap2demo_arcLine3d />)
.add('高德地图2.0 line_arc3d_greatCircle', () => <Amap2demo_arcLine_greatCircle />)
.add('高德地图2.0 line_arc_greatCircle', () => <Amap2demo_arcLine_greatCircle />)
.add('高德地图2.0 line_arc_greatCircleTex', () => <Amap2demo_arcLine_greatCircleTex />)
.add('高德地图2.0 lineHeight', () => <Amap2demo_lineHeight />)
.add('高德地图2.0 lineDash', () => <Amap2demo_lineDash />)