增加线图层在配置箭头的时候支持配置线尾部宽度 (#1060)

* feat: 线图层的箭头模式支持配置尾部宽度

* style: lint style

packages/layers/src/core/interface.ts

@@ -11,6 +11,7 @@ interface ILineArrow {
   enable: boolean;
   arrowWidth: number;
   arrowHeight: number;
+  tailWidth: number;
 }
 
 export interface ILineLayerStyleOptions {

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

@@ -49,6 +49,7 @@ export default class LineModel extends BaseModel {
         enable: false,
         arrowWidth: 2,
         arrowHeight: 3,
+        tailWidth: 1,
       },
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     if (dashArray.length === 2) {
@@ -98,7 +99,6 @@ export default class LineModel extends BaseModel {
               height: 1,
             });
     }
-
     return {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
@@ -134,6 +134,7 @@ export default class LineModel extends BaseModel {
       u_arrow: Number(arrow.enable),
       u_arrowHeight: arrow.arrowHeight || 3,
       u_arrowWidth: arrow.arrowWidth || 2,
+      u_tailWidth: arrow.tailWidth === undefined ? 1 : arrow.tailWidth,
     };
   }
   public getAnimateUniforms(): IModelUniform {
@@ -216,10 +217,10 @@ export default class LineModel extends BaseModel {
 
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
-      name: 'distance',
+      name: 'distanceAndIndex',
       type: AttributeType.Attribute,
       descriptor: {
-        name: 'a_Distance',
+        name: 'a_DistanceAndIndex',
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.STATIC_DRAW,

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

@@ -11,7 +11,7 @@ attribute vec2 a_iconMapUV;
 
 // dash line
 attribute float a_Total_Distance;
-attribute vec2 a_Distance;
+attribute vec2 a_DistanceAndIndex;
 
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
@@ -35,6 +35,7 @@ uniform float u_linearColor: 0;
 uniform float u_arrow: 0.0;
 uniform float u_arrowHeight: 3.0;
 uniform float u_arrowWidth: 2.0;
+uniform float u_tailWidth: 1.0;
 
 uniform float u_opacity: 1.0;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
@@ -65,17 +66,17 @@ vec2 calculateArrow(vec2 offset) {
 
   vec2 arrowOffset = vec2(0.0);
   /*
-  * a_Distance.y 用于标记当前顶点属于哪一组（两个顶点一组，构成线的其实是矩形，最简需要四个顶点、两组顶点构成）
+  * a_DistanceAndIndex.y 用于标记当前顶点属于哪一组（两个顶点一组，构成线的其实是矩形，最简需要四个顶点、两组顶点构成）
   */
-  if(a_Distance.y == 0.0) {
+  if(a_DistanceAndIndex.y == 0.0) {
     // 箭头尖部
     offset = vec2(0.0);
-  } else if(a_Distance.y == 1.0) {
+  } else if(a_DistanceAndIndex.y == 1.0) {
     // 箭头两侧
     arrowOffset = rotation_matrix*(offset * arrowHeight);
     offset += arrowOffset; // 沿线偏移
     offset = offset * arrowWidth; // 垂直线向外偏移（是构建箭头两侧的顶点）
-  } else if(a_Distance.y == 2.0 || a_Distance.y == 3.0 || a_Distance.y == 4.0) {
+  } else if(a_DistanceAndIndex.y == 2.0 || a_DistanceAndIndex.y == 3.0 || a_DistanceAndIndex.y == 4.0) {
     // 偏移其余的点位（将长度让位给箭头）
     arrowOffset = rotation_matrix*(offset * arrowHeight) * arrowWidth;
     offset += arrowOffset;// 沿线偏移
@@ -122,12 +123,19 @@ void main() {
   v_color = a_Color;
 
   vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
-
+  
   vec2 offset = project_pixel(size.xy);
+
+  float lineDistance = a_DistanceAndIndex.x;
+  float currentLinePointRatio = lineDistance / a_Total_Distance;
  
   if(u_arrow > 0.0) {
       //  计算箭头
     offset = calculateArrow(offset);
+
+    if(a_DistanceAndIndex.y > 4.0) {
+      offset *= mix(1.0, u_tailWidth, currentLinePointRatio);
+    }
   }
 
   float lineOffsetWidth = length(offset + offset * sign(a_Miter)); // 线横向偏移的距离（向两侧偏移的和）
@@ -135,8 +143,8 @@ void main() {
   float texV = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
 
   // 设置数据集的参数
-  styleMappingMat[3][0] = a_Distance.x / a_Total_Distance;; // 当前点位距离占线总长的比例
-  styleMappingMat[3][1] = a_Distance.x;       // 当前顶点的距离
+  styleMappingMat[3][0] = currentLinePointRatio; // 当前点位距离占线总长的比例
+  styleMappingMat[3][1] = lineDistance;       // 当前顶点的距离
   styleMappingMat[3][2] = d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
   styleMappingMat[3][3] = texV;             // 线图层贴图部分的 v 坐标值
 

stories/Object/components/arrow.tsx

@@ -74,7 +74,8 @@ export default class Demo extends React.Component {
         arrow: {
           enable: true,
           arrowWidth: 2,
-          arrowHeight: 3,
+          // arrowHeight: 3,
+          tailWidth: 0,
         },
       });