feat: 增加线图层顶点高度 scale #

packages/layers/src/core/interface.ts

@@ -19,4 +19,5 @@ export interface ILineLayerStyleOptions {
   thetaOffset?: number; // 可选参数、设置弧线的偏移量
 
   globalArcHeight?: number; // 可选参数、地球模式下 3D 弧线的高度
+  vertexHeightScale?: number; // 可选参数、lineLayer vertex height scale
 }

packages/layers/src/line/models/line.ts

@@ -33,6 +33,7 @@ export default class LineModel extends BaseModel {
       dashArray = [10, 5, 0, 0],
       lineTexture = false,
       iconStep = 100,
+      vertexHeightScale = 20.0,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     if (dashArray.length === 2) {
       dashArray.push(0, 0);
@@ -101,6 +102,9 @@ export default class LineModel extends BaseModel {
       u_linearColor: useLinearColor,
       u_sourceColor: sourceColorArr,
       u_targetColor: targetColorArr,
+
+      // 顶点高度 scale
+      u_vertexScale: vertexHeightScale
     };
   }
   public getAnimateUniforms(): IModelUniform {
@@ -112,20 +116,6 @@ export default class LineModel extends BaseModel {
   }
 
   public initModels(): IModel[] {
-    // const { createTexture2D } = this.rendererService;
-    // this.texture = createTexture2D({
-    //   height: 0,
-    //   width: 0,
-    // });
-    // let url = 'https://gw-office.alipayobjects.com/bmw-prod/e91c3630-b79e-45a3-a2b9-feee4b4ccd41.svg'
-    // this.loadImage(url).then((img) => {
-    //   this.texture = createTexture2D({
-    //     data: img as HTMLImageElement,
-    //     width: (img as HTMLImageElement).width,
-    //     height: (img as HTMLImageElement).height,
-    //   });
-    //   this.layerService.renderLayers();
-    // })
     this.updateTexture();
     this.iconService.on('imageUpdate', this.updateTexture);
 

packages/layers/src/line/shaders/line_vert.glsl

@@ -21,6 +21,8 @@ uniform vec4 u_dash_array: [10.0, 5., 0, 0];
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 uniform float u_icon_step: 100;
 
+uniform float u_vertexScale: 1.0;
+
 #pragma include "projection"
 #pragma include "picking"
 
@@ -105,11 +107,11 @@ void main() {
 
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0));
 
-  float h = float((a_Position.z)); // 线顶点的高度 - 兼容不存在第三个数值的情况
+  float h = float((a_Position.z)) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     // gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y, 1.0));
-    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y / 8.0, 1.0)); // 额外除 8.0 是为了和gaode1.x的高度兼容
+    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y / 8.0 + h, 1.0)); // 额外除 8.0 是为了和gaode1.x的高度兼容
   } else {
     float lineHeight = a_Size.y;
     // 兼容 mapbox 在线高度上的效果表现基本一致
@@ -118,7 +120,7 @@ void main() {
     }
     
 
-    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight + h * 20.0, 1.0));
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight + h, 1.0));
   }
 
   setPickingColor(a_PickingColor);

stories/Map/components/amap2demo_lineHeight.tsx

@@ -33,6 +33,9 @@ export default class Amap2demo_lineHeight extends React.Component {
             .source(data)
             .size(1)
             .shape('line')
+            .style({
+              vertexHeightScale: 30
+            })
             .color('#ccc');
 
           scene.addLayer(layer);