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

Polygonside (#1069) 

* feat: polygon extrude mode support set linear color

* style: lint style
This commit is contained in:
YiQianYao 2022-04-21 13:58:42 +08:00 committed by GitHub
parent ef0aadd339
commit a37b33a988
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 207 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,11 +63,13 @@ export default class ExtrudeModel extends BaseModel {
}
// 转化渐变色
let useLinearColor = 0; // 默认不生效
let sourceColorArr = [1, 1, 1, 1];
let targetColorArr = [1, 1, 1, 1];
if (sourceColor && targetColor) {
sourceColorArr = rgb2arr(sourceColor);
targetColorArr = rgb2arr(targetColor);
useLinearColor = 1;
}
return {
@ -76,6 +78,9 @@ export default class ExtrudeModel extends BaseModel {
u_cellTypeLayout: this.getCellTypeLayout(),
u_raisingHeight: Number(raisingHeight),
u_opacity: isNumber(opacity) ? opacity : 1.0,
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr,
u_texture: this.texture,
@ -143,46 +148,36 @@ export default class ExtrudeModel extends BaseModel {
}
protected registerBuiltinAttributes() {
const {
mapTexture,
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
const bbox = this.layer.getSource().extent;
const [minLng, minLat, maxLng, maxLat] = bbox;
const lngLen = maxLng - minLng;
const latLen = maxLat - minLat;
if (mapTexture) {
const bbox = this.layer.getSource().extent;
const [minLng, minLat, maxLng, maxLat] = bbox;
const lngLen = maxLng - minLng;
const latLen = maxLat - minLat;
this.styleAttributeService.registerStyleAttribute({
name: 'uvs',
type: AttributeType.Attribute,
descriptor: {
name: 'a_uvs',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.STATIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 3,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
normal: number[],
) => {
const lng = vertex[0];
const lat = vertex[1];
return [
(lng - minLng) / lngLen,
(lat - minLat) / latLen,
vertex[4],
];
},
this.styleAttributeService.registerStyleAttribute({
name: 'uvs',
type: AttributeType.Attribute,
descriptor: {
name: 'a_uvs',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.STATIC_DRAW,
data: [],
type: gl.FLOAT,
},
});
}
size: 3,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
normal: number[],
) => {
const lng = vertex[0];
const lat = vertex[1];
return [(lng - minLng) / lngLen, (lat - minLat) / latLen, vertex[4]];
},
},
});
// point layer size;
this.styleAttributeService.registerStyleAttribute({
name: 'normal',

19
packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl
View File

@ -1,12 +1,25 @@
uniform float u_opacity: 1.0;
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;
uniform float u_linearColor: 0;
varying vec4 v_Color;
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
#pragma include "picking"
void main() {
float opacity = styleMappingMat[0][0];
gl_FragColor = v_Color;
// gl_FragColor.a *= u_opacity;
float opacity = styleMappingMat[0][0];
float isSide = styleMappingMat[0][3];
float sidey = styleMappingMat[3][0];
float lightWeight = styleMappingMat[3][1];
if(isSide < 1.0 && u_linearColor == 1.0) {
vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
linearColor.rgb *= lightWeight;
gl_FragColor = linearColor;
} else {
gl_FragColor = v_Color;
}
gl_FragColor.a *= opacity;
gl_FragColor = filterColor(gl_FragColor);
}

20
packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl
View File

@ -1,13 +1,25 @@
uniform float u_opacity: 1.0;
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;
uniform float u_linearColor: 0;
varying vec4 v_Color;
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
#pragma include "picking"
varying float v_lightWeight;
void main() {
float opacity = styleMappingMat[0][0];
gl_FragColor = v_Color;
// gl_FragColor.a *= u_opacity;
float isSide = styleMappingMat[0][3];
float sidey = styleMappingMat[3][0];
float lightWeight = styleMappingMat[3][1];
if(isSide < 1.0 && u_linearColor == 1.0) {
vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
linearColor.rgb *= lightWeight;
gl_FragColor = linearColor;
} else {
gl_FragColor = v_Color;
}
gl_FragColor.a *= opacity;
gl_FragColor = filterColorAlpha(gl_FragColor, v_lightWeight);
gl_FragColor = filterColorAlpha(gl_FragColor, lightWeight);
}

12
packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_vert.glsl
View File

@ -8,6 +8,7 @@ attribute vec4 a_Color;
attribute vec3 a_Position;
attribute vec3 a_Normal;
attribute float a_Size;
attribute vec3 a_uvs;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
@ -24,16 +25,16 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
#pragma include "light"
#pragma include "picking"
varying float v_lightWeight;
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, // opacity - strokeOpacity - strokeWidth - isSide
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
0.0, 0.0, 0.0, 0.0 // sidey
);
styleMappingMat[0][3] = a_Position.z;
styleMappingMat[3][0] = a_uvs[2];
float rowCount = u_cellTypeLayout[0][0]; // 当前的数据纹理有几行
float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
@ -75,9 +76,10 @@ void main() {
}
float lightWeight = calc_lighting(pos);
v_lightWeight = lightWeight;
// v_Color = a_Color;
v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
styleMappingMat[3][1] = lightWeight;
setPickingColor(a_PickingColor);
}

9
packages/layers/src/polygon/shaders/extrude/polygon_extrude_vert.glsl
View File

@ -8,6 +8,7 @@ attribute vec4 a_Color;
attribute vec3 a_Position;
attribute vec3 a_Normal;
attribute float a_Size;
attribute vec3 a_uvs;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
@ -27,11 +28,13 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
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, // opacity - strokeOpacity - strokeWidth - isSide
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
0.0, 0.0, 0.0, 0.0 // sidey
);
styleMappingMat[0][3] = a_Position.z;
styleMappingMat[3][0] = a_uvs[2];
float rowCount = u_cellTypeLayout[0][0]; // 当前的数据纹理有几行
float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
@ -81,5 +84,7 @@ void main() {
// v_Color = a_Color;
v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
styleMappingMat[3][1] = lightWeight;
setPickingColor(a_PickingColor);
}

5
packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl
View File

@ -9,18 +9,17 @@ varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
void main() {
float opacity = styleMappingMat[0][0];
float isSide = styleMappingMat[0][3];
float lightWeight = styleMappingMat[3][1];
float topU = styleMappingMat[2][2];
float topV = styleMappingMat[2][3];
float sidey = styleMappingMat[3][0];
if(isSide < 1.0) {
gl_FragColor = mix(u_targetColor, u_sourceColor, sidey);
gl_FragColor.rgb *= lightWeight;
} else {
gl_FragColor = texture2D(u_texture, vec2(topU, topV));
}
// gl_FragColor = v_Color;
gl_FragColor.a *= opacity;

6
packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl
View File

@ -4,7 +4,6 @@ precision highp float;
#define diffuseRatio 0.3
#define specularRatio 0.2
attribute vec4 a_Color;
attribute vec3 a_Position;
attribute vec3 a_Normal;
attribute float a_Size;
@ -84,9 +83,8 @@ void main() {
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
}
// float lightWeight = calc_lighting(pos);
// v_Color = a_Color;
// v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
float lightWeight = calc_lighting(pos);
styleMappingMat[3][1] = lightWeight;
setPickingColor(a_PickingColor);
}

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

@ -117,132 +117,133 @@ export default class Amap2demo_polygon_extrude extends React.Component {
// .active(true);
// scene.addLayer(layer);
// @ts-ignore
let lineDown, lineUp, textLayer;
scene.on('loaded', () => {
// @ts-ignore
let lineDown, lineUp, textLayer;
fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
.then((res) => res.json())
.then((data) => {
let texts: any[] = [];
fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
.then((res) => res.json())
.then((data) => {
let texts: any[] = [];
data.features.map((option: any) => {
const { name, center } = option.properties;
const [lng, lat] = center;
texts.push({ name, lng, lat });
data.features.map((option: any) => {
const { name, center } = option.properties;
const [lng, lat] = center;
texts.push({ name, lng, lat });
});
textLayer = new PointLayer({ zIndex: 2 })
.source(texts, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('name', 'text')
.size(14)
.color('#0ff')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#0ff', // 描边颜色
strokeWidth: 0.2, // 描边宽度
raisingHeight: 200000 + 150000 + 10000,
textAllowOverlap: true,
});
scene.addLayer(textLayer);
lineDown = new LineLayer()
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000,
});
lineUp = new LineLayer({ zIndex: 1 })
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000 + 150000,
});
scene.addLayer(lineDown);
scene.addLayer(lineUp);
});
textLayer = new PointLayer({ zIndex: 2 })
.source(texts, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('name', 'text')
.size(14)
.color('#0ff')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#0ff', // 描边颜色
strokeWidth: 0.2, // 描边宽度
raisingHeight: 200000 + 150000 + 10000,
textAllowOverlap: true,
});
scene.addLayer(textLayer);
fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
.then((res) => res.json())
.then((data) => {
const lineLayer = new LineLayer()
.source(data)
.shape('wall')
.size(150000)
.style({
heightfixed: true,
opacity: 0.6,
sourceColor: '#0DCCFF',
targetColor: 'rbga(255,255,255, 0)',
});
scene.addLayer(lineLayer);
lineDown = new LineLayer()
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000,
const provincelayer = new PolygonLayer({})
.source(data)
.size(150000)
.shape('extrude')
.color('#0DCCFF')
.active({
color: 'rgb(100,230,255)',
})
.style({
heightfixed: true,
pickLight: true,
raisingHeight: 200000,
opacity: 0.8,
});
scene.addLayer(provincelayer);
provincelayer.on('mousemove', () => {
provincelayer.style({
raisingHeight: 200000 + 100000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000 + 100000,
});
// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000 + 100000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000 + 100000,
});
});
lineUp = new LineLayer({ zIndex: 1 })
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000 + 150000,
});
scene.addLayer(lineDown);
scene.addLayer(lineUp);
});
fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
.then((res) => res.json())
.then((data) => {
const lineLayer = new LineLayer()
.source(data)
.shape('wall')
.size(150000)
.style({
heightfixed: true,
opacity: 0.6,
sourceColor: '#0DCCFF',
targetColor: 'rbga(255,255,255, 0)',
});
scene.addLayer(lineLayer);
const provincelayer = new PolygonLayer({})
.source(data)
.size(150000)
.shape('extrude')
.color('#0DCCFF')
.active({
color: 'rgb(100,230,255)',
})
.style({
heightfixed: true,
pickLight: true,
raisingHeight: 200000,
opacity: 0.8,
});
scene.addLayer(provincelayer);
provincelayer.on('mousemove', () => {
provincelayer.style({
raisingHeight: 200000 + 100000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000 + 100000,
});
// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000 + 100000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000 + 100000,
provincelayer.on('unmousemove', () => {
provincelayer.style({
raisingHeight: 200000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000,
});
// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000,
});
});
});
provincelayer.on('unmousemove', () => {
provincelayer.style({
raisingHeight: 200000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000,
});
// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000,
});
});
});
});
}
public render() {

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

@ -32,15 +32,16 @@ export default class Amap2demo_polygon_extrude extends React.Component {
.size(150000)
.shape('extrude')
.color('#0DCCFF')
// .active({
// color: 'rgb(100,230,255)',
// })
.active({
color: 'rgb(255,255,255)',
mix: 0.5,
})
.style({
heightfixed: true,
pickLight: true,
raisingHeight: 200000,
mapTexture:
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SOUKQJpw1FYAAAAAAAAAAAAAARQnAQ',
// mapTexture:
// 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SOUKQJpw1FYAAAAAAAAAAAAAARQnAQ',
// mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
// opacity: 0.8,
sourceColor: '#f00',