From 4ff2d88eab25765651112207594fda1110b64c17 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Thu, 6 Jan 2022 19:30:41 +0800 Subject: [PATCH] Shihuidev (#921) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix: 修复线纹理在 mapbox 下表现不一致 --- packages/core/src/shaders/projection.glsl | 23 +++++++++++++--- .../layers/src/line/shaders/line_frag.glsl | 13 +++------ .../layers/src/line/shaders/line_vert.glsl | 2 +- .../layers/src/line/shaders/wall_vert.glsl | 4 +-- .../Map/components/amap2demo_lineStreet.tsx | 27 ++++++++++--------- 5 files changed, 42 insertions(+), 27 deletions(-) diff --git a/packages/core/src/shaders/projection.glsl b/packages/core/src/shaders/projection.glsl index 37548b0671..6247820975 100644 --- a/packages/core/src/shaders/projection.glsl +++ b/packages/core/src/shaders/projection.glsl @@ -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; diff --git a/packages/layers/src/line/shaders/line_frag.glsl b/packages/layers/src/line/shaders/line_frag.glsl index ce91d9e8c7..1d835ace42 100644 --- a/packages/layers/src/line/shaders/line_frag.glsl +++ b/packages/layers/src/line/shaders/line_frag.glsl @@ -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); - } - - - - } diff --git a/packages/layers/src/line/shaders/line_vert.glsl b/packages/layers/src/line/shaders/line_vert.glsl index bdc0fb8981..8eea260de9 100644 --- a/packages/layers/src/line/shaders/line_vert.glsl +++ b/packages/layers/src/line/shaders/line_vert.glsl @@ -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; } diff --git a/packages/layers/src/line/shaders/wall_vert.glsl b/packages/layers/src/line/shaders/wall_vert.glsl index ded6103785..a5e9012b09 100644 --- a/packages/layers/src/line/shaders/wall_vert.glsl +++ b/packages/layers/src/line/shaders/wall_vert.glsl @@ -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); diff --git a/stories/Map/components/amap2demo_lineStreet.tsx b/stories/Map/components/amap2demo_lineStreet.tsx index 49f5329ff4..38b4b3b6ea 100644 --- a/stories/Map/components/amap2demo_lineStreet.tsx +++ b/stories/Map/components/amap2demo_lineStreet.tsx @@ -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); });