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

Shihuidev (#921) 

fix: 修复线纹理在 mapbox 下表现不一致
This commit is contained in:
YiQianYao 2022-01-06 19:30:41 +08:00 committed by GitHub
parent bfd4d73457
commit 4ff2d88eab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/src/shaders/projection.glsl
View File

@ -157,13 +157,30 @@ float project_pixel_texture(float pixel) {
return pixel * 2.0;
}
float project_pixel(float pixel) {
// 在不论什么底图下需要统一处理的时候使用
float project_float_pixel(float pixel) {
if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
// mapbox P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
return pixel * pow(2.0, (19.0 - u_Zoom));
}
if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
// P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
// amap P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
return pixel * pow(2.0, (19.0 - u_Zoom));
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
// P20_2 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减3
// amap2 P20_2 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减3
return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom));
}
return pixel;
}
float project_pixel(float pixel) {
if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
// amap P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
return pixel * pow(2.0, (19.0 - u_Zoom));
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
// amap2 P20_2 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减3
return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom));
}
return pixel;

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

@ -80,20 +80,20 @@ void main() {
if(u_textureBlend == 0.0) { // normal
pattern.a = 0.0;
gl_FragColor = filterColor(gl_FragColor + pattern);
gl_FragColor += pattern;
} else { // replace
pattern.a *= opacity;
if(gl_FragColor.a <= 0.0) {
pattern.a = 0.0;
}
gl_FragColor = filterColor(pattern);
gl_FragColor = pattern;
}
} else {
}
float v = styleMappingMat[3].a;
float borderWidth = min(0.5, u_borderWidth);
// 绘制 border
if(borderWidth > 0.0) {
if(borderWidth > 0.01) {
float borderOuterWidth = borderWidth/2.0;
if(v >= 1.0 - borderWidth || v <= borderWidth) {
@ -114,9 +114,4 @@ void main() {
}
gl_FragColor = filterColor(gl_FragColor);
}
}

2
packages/layers/src/line/shaders/line_vert.glsl
View File

@ -72,7 +72,7 @@ void main() {
float d_texPixelLen; // 贴图的像素长度，根据地图层级缩放
v_iconMapUV = a_iconMapUV;
d_texPixelLen = project_pixel(u_icon_step);
d_texPixelLen = project_float_pixel(u_icon_step);
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
d_texPixelLen *= 10.0;
}

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

@ -94,13 +94,13 @@ void main() {
float originSize = a_Size.x; // 固定高度
if(u_heightfixed < 1.0) { // 高度随 zoom 调整
originSize = project_pixel(a_Size.x);
originSize = project_float_pixel(a_Size.x);
}
float wallHeight = originSize * miter;
float lightWeight = calc_lighting(vec4(project_pos.xy, wallHeight, 1.0));
v_blur = min(project_pixel(2.0) / originSize, 0.05);
v_blur = min(project_float_pixel(2.0) / originSize, 0.05);
// v_lightWeight = lightWeight;
v_color = vec4(a_Color.rgb * lightWeight, a_Color.w);

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

@ -13,11 +13,11 @@ export default class Amap2demo_lineStreet extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new GaodeMap({
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 16,
viewMode: '3D',
style: 'dark',
}),
});
this.scene = scene;
@ -30,7 +30,7 @@ export default class Amap2demo_lineStreet extends React.Component {
.then((data) => {
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
scene.addImage(
'01',
@ -45,22 +45,25 @@ export default class Amap2demo_lineStreet extends React.Component {
.source(data)
.size(5)
.shape('line')
.texture('01')
.texture('00')
.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, // 设置贴图纹理的间距
iconStep: 20, // 设置贴图纹理的间距
// lineType: 'dash',
// dashArray: [5, 5],
textureBlend: 'replace',
// textureBlend: 'replace',
// textureBlend: 'normal',
borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
borderColor: '#fff', // 默认为 #ccc
});
scene.addLayer(layer);
});