From 4fe59b9874f5cf4ad369027ded0978597d6fcd6a Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Fri, 10 Dec 2021 12:08:22 +0800 Subject: [PATCH] Shihuidev (#873) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 增加着色器的拾取计算控制、完善 arcmini * feat: 完善 enableShaderPick/disableShaderPick 功能 * style: lint style * feat: 补充调用高德地图公交线路查询 demo * style: lint style * feat: 优化弧线的纹理动画 * style: lint style * feat: 去除greatCircle 的纹理动画优化 * feat: 扩展点图层圆柱效果 * feat: 增加几何体的径向渐变配置 * style: lint style * fix: 修复bug 图层触发的事件跟图层设置的zIndex无关，只跟插入图层先后顺序有关 * style: lint style * feat: 补全挤出几何体拾取颜色的光照配置 * style: lint style * fix: 修复圆柱 cull 问题 mapbox amap 不同 * feat: 图层销毁时的内存泄漏 * style: lint style * feat: 平面弧线新增弧线偏移量的数据映射能力 * style: lint style * fix: 修复重复销毁bug * style: lint style * feat: 修复 texture 重复销毁问题 * style: lint style * fix: 修复图层叠加模式下的拾取失效问题 * style: lint style * fix: 修复纹理贴图在 zoom 大于 12 时存在的问题 --- packages/core/src/shaders/projection.glsl | 24 +++++++++++++++++++ .../src/line/shaders/line_arc_3d_vert.glsl | 2 +- .../src/line/shaders/line_arc_vert.glsl | 2 +- .../Map/components/amap2demo_arcLine3DTex.tsx | 2 +- .../Map/components/amap2demo_arcLineTex.tsx | 8 +++---- 5 files changed, 31 insertions(+), 7 deletions(-) diff --git a/packages/core/src/shaders/projection.glsl b/packages/core/src/shaders/projection.glsl index e0e08a0901..37548b0671 100644 --- a/packages/core/src/shaders/projection.glsl +++ b/packages/core/src/shaders/projection.glsl @@ -133,6 +133,30 @@ float project_pixel_allmap(float pixel) { return pixel; } +// 适配纹理贴图的等像素大小 +float project_pixel_texture(float pixel) { + // mapbox zoom > 12 + if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { + return pixel * pow(0.5, u_Zoom); + } + + // amap2 zoom > 12 + if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { + return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom)); + } + + // amap zoom > 12 + if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) { + return pixel * pow(0.5, u_Zoom); + } + + // amap zoom < 12 + if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) { + return pixel * pow(2.0, (20.0 - u_Zoom)); + } + return pixel * 2.0; +} + float project_pixel(float pixel) { if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) { // P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1 diff --git a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl index 697221985f..15efcd9e1c 100644 --- a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl @@ -162,7 +162,7 @@ void main() { if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式 float arcDistrance = length(source - target); - float pixelLen = project_pixel(u_icon_step); + float pixelLen = project_pixel_texture(u_icon_step); styleMappingMat[3].b = floor(arcDistrance/pixelLen); // 贴图在弧线上重复的数量 vec2 projectOffset = project_pixel(offset); diff --git a/packages/layers/src/line/shaders/line_arc_vert.glsl b/packages/layers/src/line/shaders/line_arc_vert.glsl index a0e73b3880..fb013885ee 100644 --- a/packages/layers/src/line/shaders/line_arc_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_vert.glsl @@ -173,7 +173,7 @@ void main() { } v_iconMapUV = a_iconMapUV; - float pixelLen = project_pixel(u_icon_step); // 贴图沿弧线方向的长度 - 随地图缩放改变 + float pixelLen = project_pixel_texture(u_icon_step); // 贴图沿弧线方向的长度 - 随地图缩放改变 float texCount = floor(arcDistrance/pixelLen); // 贴图在弧线上重复的数量 styleMappingMat[3].g = texCount; diff --git a/stories/Map/components/amap2demo_arcLine3DTex.tsx b/stories/Map/components/amap2demo_arcLine3DTex.tsx index bd758c2ad3..dc2a79aeca 100644 --- a/stories/Map/components/amap2demo_arcLine3DTex.tsx +++ b/stories/Map/components/amap2demo_arcLine3DTex.tsx @@ -89,7 +89,7 @@ export default class Amap2demo_arcLine3DTex extends React.Component { .color('#8C1EB2') .style({ lineTexture: true, // 开启线的贴图功能 - iconStep: 10, // 设置贴图纹理的间距 + iconStep: 4, // 设置贴图纹理的间距 // opacity: 0, // opacity: ['testOpacity', ((d: any) => d*2)], // opacity: 'testOpacity', diff --git a/stories/Map/components/amap2demo_arcLineTex.tsx b/stories/Map/components/amap2demo_arcLineTex.tsx index 5025965b02..0688a8ea6c 100644 --- a/stories/Map/components/amap2demo_arcLineTex.tsx +++ b/stories/Map/components/amap2demo_arcLineTex.tsx @@ -13,12 +13,12 @@ export default class Amap2demo_arcLineTex extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new Mapbox({ + map: new GaodeMap({ pitch: 40, - center: [107.77791556935472, 35.443286920228644], - zoom: 2.9142882493605033, + center: [65.6, 45], + zoom: 12.1, viewMode: '3D', - style: 'dark', + // style: 'dark', }), }); this.scene = scene;