feat: simpleLine 支持 linearColor

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

@@ -95,6 +95,7 @@ export default class SimpleLineModel extends BaseModel {
   }
 
   public buildModels(): IModel[] {
+    
     return [
       this.layer.buildLayerModel({
         moduleName: 'line',
@@ -108,6 +109,7 @@ export default class SimpleLineModel extends BaseModel {
     ];
   }
   protected registerBuiltinAttributes() {
+    let c = 0
     this.styleAttributeService.registerStyleAttribute({
       name: 'distance',
       type: AttributeType.Attribute,

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

@@ -25,6 +25,7 @@ void main() {
   } else { // 使用 color 方法传入的颜色
      gl_FragColor = v_color;
   }
+
   // anti-alias
   // float blur = 1.0 - smoothstep(u_blur, 1., length(v_normal.xy));
   gl_FragColor.a *= opacity; // 全局透明度

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

@@ -17,8 +17,6 @@ uniform float u_vertexScale: 1.0;
 
 varying vec4 v_color;
 
-uniform float u_linearColor: 0;
-
 uniform float u_opacity: 1.0;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
@@ -56,8 +54,7 @@ void main() {
   v_color = a_Color;
 
   // 设置数据集的参数
-  styleMappingMat[3][0] = d_distance_ratio; // 当前点位距离占线总长的比例
-  styleMappingMat[3][1] = a_Distance;       // 当前顶点的距离
+  styleMappingMat[3][0] = a_Distance / a_Total_Distance; // 当前点位距离占线总长的比例
   
 
   vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));

packages/layers/src/utils/extrude_polyline.ts

@@ -237,7 +237,8 @@ export default class ExtrudePolyline {
     this.started = false;
     this.normal = null;
     this.totalDistance = 0;
-
+    // 去除数组里重复的点
+    // points = getArrayUnique(points);
     const total = points.length;
     let count = complex.startIndex;
     for (let i = 1; i < total; i++) {
@@ -247,7 +248,11 @@ export default class ExtrudePolyline {
       const amt = this.simpleSegment(complex, count, last, cur, next as vec3);
       count += amt;
     }
-
+    if (this.dash) {
+      for (let i = 0; i < complex.positions.length / 6; i++) {
+        complex.positions[i * 6 + 5] = this.totalDistance;
+      }
+    }
     complex.startIndex = complex.positions.length / 6;
     return complex;
   }
@@ -478,6 +483,7 @@ export default class ExtrudePolyline {
     }
     return count;
   }
+
   private simpleSegment(
     complex: any,
     index: number,
@@ -489,34 +495,53 @@ export default class ExtrudePolyline {
     const indices = complex.indices;
     const positions = complex.positions;
     const normals = complex.normals;
+    const flatCur = aProjectFlat([cur[0], cur[1]]) as [number, number];
+    const flatLast = aProjectFlat([last[0], last[1]]) as [number, number];
+    // @ts-ignore
+    direction(lineA, flatCur, flatLast);
+    let segmentDistance = 0;
+    if (this.dash) {
+      // @ts-ignore
+      segmentDistance = this.lineSegmentDistance(flatCur, flatLast);
+      this.totalDistance += segmentDistance;
+    }
 
-    const segmentDistance = 0;
-
+    if (!this.normal) {
+      this.normal = vec2.create();
+      computeNormal(this.normal, lineA);
+    }
     if (!this.started) {
       this.started = true;
 
+      // if the end cap is type square, we can just push the verts out a bit
+    
       this.extrusions(
         positions,
         normals,
         last,
-        [0, 0],
-        1,
+        this.normal,
+        this.thickness,
         this.totalDistance - segmentDistance,
       );
+      
     }
 
     indices.push(index + 0, index + 1, index + 2);
 
     if (!next) {
+      computeNormal(this.normal, lineA);
+     
       this.extrusions(
         positions,
         normals,
         cur,
-        [0, 0],
+        this.normal,
         this.thickness,
         this.totalDistance,
       );
+      
 
+      // this.extrusions(positions, normals, cur, this.normal, this.thickness);
       indices.push(
         ...(this.lastFlip === 1
           ? [index, index + 2, index + 3]
@@ -524,9 +549,37 @@ export default class ExtrudePolyline {
       );
       count += 2;
     } else {
-      let flip = vec2.dot(tangent, [0, 0]) < 0 ? -1 : 1;
+      const flatNext = aProjectFlat([next[0], next[1]]) as [number, number];
+      if (isPointEqual(flatCur, flatNext)) {
+        vec2.add(
+          flatNext,
+          flatCur,
+          vec2.normalize(flatNext, vec2.subtract(flatNext, flatCur, flatLast)),
+        );
+      }
+      direction(lineB, flatNext, flatCur);
 
-      this.extrusions(positions, normals, cur, [0, 1], 1, this.totalDistance);
+      // stores tangent & miter
+
+      const [miterLen, miter] = computeMiter(
+        tangent,
+        vec2.create(),
+        lineA,
+        lineB,
+        this.thickness,
+      );
+      // normal(tmp, lineA)
+
+      // get orientation
+      let flip = vec2.dot(tangent, this.normal) < 0 ? -1 : 1;
+      this.extrusions(
+        positions,
+        normals,
+        cur,
+        miter,
+        miterLen,
+        this.totalDistance,
+      );
       indices.push(
         ...(this.lastFlip === 1
           ? [index, index + 2, index + 3]
@@ -534,7 +587,11 @@ export default class ExtrudePolyline {
       );
 
       flip = -1;
+
+      // the miter is now the normal for our next join
+      vec2.copy(this.normal, miter);
       count += 2;
+      
       this.lastFlip = flip;
     }
     return count;

stories/Map/components/gridTile2.tsx

@@ -299,7 +299,9 @@ export default class GridTile2 extends React.Component {
         .color('rgb(22, 119, 255)')
         .style({
           vertexHeightScale: 2000,
-          opacity: 0.4,
+          // opacity: 0.4,
+          sourceColor: '#f00',
+              targetColor: '#0f0',
         });
       scene.addLayer(layer);
     };