@antv/l7-layers 2.16.0 → 2.16.2

package/es/line/shaders/dash/line_dash_frag.glsl

@@ -1,25 +1,22 @@
 #define LineTypeSolid 0.0
-uniform float u_opacity : 1.0;
-
 varying vec4 v_color;
 
 // dash
 varying vec4 v_dash_array;
+varying float v_d_distance_ratio;
 
 #pragma include "picking"
 
 uniform float u_time;
 uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ]; // 控制运动
 
-varying mat4 styleMappingMat;
 // [animate, duration, interval, trailLength],
 void main() {
-  float opacity = styleMappingMat[0][0];
-  float d_distance_ratio = styleMappingMat[3].r; // 当前点位距离占线总长的比例
+
   gl_FragColor = v_color;
-  gl_FragColor.a *= opacity; // 全局透明度
+
  
-  float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+  float dashLength = mod(v_d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
   if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength <  v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
     // 实线部分
   } else {

package/es/line/shaders/dash/line_dash_vert.glsl

@@ -25,49 +25,19 @@ uniform float u_vertexScale: 1.0;
 
 varying vec4 v_color;
 varying vec4 v_dash_array;
+varying float v_d_distance_ratio;
 
 uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
 
 void main() {
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0  // distance_ratio/distance/pixelLen/texV
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
 
   v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
-  v_color = a_Color;
+  v_color = vec4(a_Color.xyz, a_Color.w * u_opacity);
 
   vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
   vec2 offset = project_pixel(size.xy);
+  v_d_distance_ratio = a_DistanceAndIndex.x / a_Total_Distance;
 
-  // 设置数据集的参数
-  styleMappingMat[3][0] = a_DistanceAndIndex.x / a_Total_Distance; // 当前点位距离占线总长的比例
-  styleMappingMat[3][1] = a_DistanceAndIndex.x;       // 当前顶点的距离
 
   vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
 

package/es/line/shaders/flow/flow_line_frag.glsl

@@ -0,0 +1,13 @@
+#extension GL_OES_standard_derivatives : enable
+
+varying vec4 v_color;
+
+
+// line texture
+
+#pragma include "picking"
+
+void main() {
+gl_FragColor = v_color;
+gl_FragColor = filterColor(gl_FragColor);
+}

package/es/line/shaders/flow/flow_line_vert.glsl

@@ -0,0 +1,83 @@
+attribute vec4 a_Color;
+attribute vec2 a_Size;
+attribute vec4 a_Instance;
+attribute vec3 a_Normal;
+attribute vec3 a_Position;
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+
+#pragma include "projection"
+#pragma include "picking"
+varying vec4 v_color;
+uniform float u_gap_width: 1.0;
+uniform float u_stroke_width: 1.0;
+uniform float u_stroke_opacity: 1.0;
+
+
+void main() {
+
+// #ifdef USE_ATTRIBUTE_OPACITY
+//   float opacity  = a_Opacity;
+// #else
+//   float opacity = u_opacity;
+// #endif
+
+
+// #ifdef USE_ATTRIBUTE_OFFSETS
+//   vec2 offsets  = a_Offsets;
+// #else
+//   vec2 offsets = u_offsets;
+// #endif
+
+  // float opacity = u_opacity;
+// 透明度计算
+  vec2 source = a_Instance.rg;  // 起始点
+  vec2 target =  a_Instance.ba; // 终点
+  vec2 flowlineDir = normalize(target - source);
+  vec2 perpendicularDir = vec2(-flowlineDir.y, flowlineDir.x);
+
+
+  vec2 position = mix(source, target, a_Position.x);
+
+  float lengthCommon = length(target - source);    
+  vec2 offsetDistances = a_Size.x * project_pixel(a_Position.yz);
+  vec2 limitedOffsetDistances = clamp(   
+   offsetDistances,
+    -lengthCommon*.8, lengthCommon*.8
+  );
+
+  float startOffsetCommon = project_pixel(offsets[0]);
+  float endOffsetCommon = project_pixel(offsets[1]);
+  float endpointOffset = mix(
+    clamp(startOffsetCommon, 0.0, lengthCommon*.2),
+    -clamp(endOffsetCommon, 0.0, lengthCommon*.2),
+    a_Position.x
+  );
+
+  vec2 normalsCommon =  u_stroke_width * project_pixel(a_Normal.xy);
+
+  float gapCommon =  project_pixel(u_gap_width);
+  vec3 offsetCommon = vec3(
+    flowlineDir * (limitedOffsetDistances[1] + normalsCommon.y + endpointOffset * 1.05) -
+    perpendicularDir * (limitedOffsetDistances[0] + gapCommon + normalsCommon.x),
+    0.0
+  );
+
+
+  vec4 project_pos = project_position(vec4(position.xy, 0, 1.0));
+
+  vec4 fillColor = vec4(a_Color.rgb, a_Color.a * opacity);
+  v_color = mix(fillColor, vec4(u_stroke.xyz, u_stroke.w * fillColor.w * u_stroke_opacity), a_Normal.z);
+
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * vec4(project_pos.xy + offsetCommon.xy, 0., 1.0);
+  } else {
+     gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offsetCommon.xy, 0., 1.0));
+  }
+
+
+
+  setPickingColor(a_PickingColor);
+}

package/es/line/shaders/line_arc_3d_frag.glsl

@@ -3,33 +3,33 @@
 #define Animate 0.0
 #define LineTexture 1.0
 
-uniform float u_opacity;
 uniform float u_textureBlend;
 uniform float u_blur : 0.9;
 uniform float u_line_type: 0.0;
 // varying vec2 v_normal;
 varying vec4 v_dash_array;
 varying vec4 v_color;
+varying vec4 v_line_data;
 
 uniform float u_line_texture: 0.0;
 uniform sampler2D u_texture;
 uniform vec2 u_textSize;
 varying float v_segmentIndex;
 uniform float segmentNumber;
+uniform float u_opacity;
 
 varying vec2 v_iconMapUV;
 
 uniform float u_time;
 uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
 
-varying mat4 styleMappingMat;
 
 #pragma include "picking"
 
 void main() {
-  float opacity = styleMappingMat[0][0];
+  float opacity = u_opacity;
   float animateSpeed = 0.0; // 运动速度
-  float d_distance_ratio = styleMappingMat[3].g; // 当前点位距离占线总长的比例
+  float d_distance_ratio = v_line_data.g; // 当前点位距离占线总长的比例
   gl_FragColor = v_color;
 
   gl_FragColor.a *= opacity;
@@ -61,7 +61,7 @@ void main() {
   if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
     // float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / segmentNumber));
     float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
-    float count = styleMappingMat[3].b; // // 贴图在弧线上重复的数量
+    float count = v_line_data.b; // // 贴图在弧线上重复的数量
 
     float time = 0.0;
     if(u_animate.x == Animate) {
@@ -71,7 +71,7 @@ void main() {
 
     float u = fract(redioCount - time);
 
-    float v = styleMappingMat[3].a;  // 线图层贴图部分的 v 坐标值
+    float v = v_line_data.a;  // 线图层贴图部分的 v 坐标值
     vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
     vec4 pattern = texture2D(u_texture, uv);
 

package/es/line/shaders/line_arc_3d_vert.glsl

@@ -26,12 +26,7 @@ varying float v_segmentIndex;
 
 attribute vec2 a_iconMapUV;
 varying vec2 v_iconMapUV;
-
-uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
+varying vec4 v_line_data;
 
 #pragma include "projection"
 #pragma include "project"
@@ -99,31 +94,6 @@ vec3 lglt2xyz(vec2 lnglat) {
 }
 
 void main() {
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0  // dataset 数据集
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
 
   v_color = a_Color;
   vec2 source = project_position(vec4(a_Instance.rg, 0, 0)).xy;
@@ -148,7 +118,7 @@ void main() {
     if(u_animate.x == Animate) {
       d_distance_ratio = segmentIndex / segmentNumber;
   }
-  styleMappingMat[3].g = d_distance_ratio; // 当前点位距离占线总长的比例
+  v_line_data.g = d_distance_ratio; // 当前点位距离占线总长的比例
 
   float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
   vec3 curr = getPos(source, target, segmentRatio);
@@ -162,12 +132,12 @@ void main() {
 
     float arcDistrance = length(source - target);
     float pixelLen =  project_pixel_texture(u_icon_step);
-    styleMappingMat[3].b = floor(arcDistrance/pixelLen); // 贴图在弧线上重复的数量
+    v_line_data.b = floor(arcDistrance/pixelLen); // 贴图在弧线上重复的数量
 
     vec2 projectOffset = project_pixel(offset);
     float lineOffsetWidth = length(projectOffset + projectOffset * sign(a_Position.y)); // 线横向偏移的距离
     float linePixelSize = project_pixel(a_Size);  // 定点位置偏移，按地图等级缩放后的距离
-    styleMappingMat[3].a = lineOffsetWidth/linePixelSize;  // 线图层贴图部分的 v 坐标值
+    v_line_data.a = lineOffsetWidth/linePixelSize;  // 线图层贴图部分的 v 坐标值
 
     v_iconMapUV = a_iconMapUV;
   }

package/es/line/shaders/line_arc_frag.glsl

@@ -19,24 +19,20 @@ uniform vec2 u_textSize;
 
 uniform float segmentNumber;
 varying vec2 v_iconMapUV;
+varying vec4 v_lineData;
 
-varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 
 #pragma include "picking"
 
 void main() {
-  float opacity = styleMappingMat[0][0];
   float animateSpeed = 0.0; // 运动速度
-  float d_segmentIndex = styleMappingMat[3].r;   // 当前顶点在弧线中所处的分段位置
-  float d_distance_ratio = styleMappingMat[3].b; // 当前顶点在弧线中所处的分段比例
-
   gl_FragColor = v_color;
   
-  gl_FragColor.a *= opacity;
+  gl_FragColor.a *= u_opacity;
 
   if(u_animate.x == Animate && u_line_texture != LineTexture) {
       animateSpeed = u_time / u_animate.y;
-      float alpha =1.0 - fract( mod(1.0- d_distance_ratio, u_animate.z)* (1.0/ u_animate.z) + u_time / u_animate.y);
+      float alpha =1.0 - fract( mod(1.0- v_lineData.b, u_animate.z)* (1.0/ u_animate.z) + u_time / u_animate.y);
       alpha = (alpha + u_animate.w -1.0) / u_animate.w;
       // alpha = smoothstep(0., 1., alpha);
       alpha = clamp(alpha, 0.0, 1.0);
@@ -45,10 +41,10 @@ void main() {
 
   // 当存在贴图时在底色上贴上贴图
   if(u_line_texture == LineTexture) { // while load texture
-    float arcRadio = smoothstep( 0.0, 1.0, (d_segmentIndex / segmentNumber));
+    float arcRadio = smoothstep( 0.0, 1.0, (v_lineData.r / segmentNumber));
     // float arcRadio = smoothstep( 0.0, 1.0, d_distance_ratio);
 
-    float count = styleMappingMat[3].g; // 贴图在弧线上重复的数量
+    float count = v_lineData.g; // 贴图在弧线上重复的数量
 
     float time = 0.0;
     if(u_animate.x == Animate) {
@@ -57,7 +53,7 @@ void main() {
     float redioCount = arcRadio * count;
 
     float u = fract(redioCount - time);
-    float v = styleMappingMat[3].a; // 横向 v
+    float v = v_lineData.a; // 横向 v
     vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
 
     vec4 pattern = texture2D(u_texture, uv);
@@ -75,7 +71,7 @@ void main() {
       pattern.a = 0.0;
       gl_FragColor = filterColor(gl_FragColor + pattern);
     } else { // replace
-        pattern.a *= opacity;
+        pattern.a *= u_opacity;
         if(gl_FragColor.a <= 0.0) {
           pattern.a = 0.0;
         }

package/es/line/shaders/line_arc_great_circle_frag.glsl

@@ -25,17 +25,16 @@ varying vec2 v_iconMapUV;
 uniform float u_linearColor: 0;
 uniform vec4 u_sourceColor;
 uniform vec4 u_targetColor;
-
-varying mat4 styleMappingMat;
+varying vec4 v_line_data;
 
 #pragma include "picking"
 #pragma include "project"
 #pragma include "projection"
 
 void main() {
-  float opacity = styleMappingMat[0][0];
+  float opacity = u_opacity;
   float animateSpeed = 0.0;
-  float d_segmentIndex = styleMappingMat[3].g;
+  float d_segmentIndex = v_line_data.g;
   
   // 设置弧线的底色
   if(u_linearColor == 1.0) { // 使用渐变颜色
@@ -70,14 +69,14 @@ void main() {
   if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { 
     float arcRadio = smoothstep( 0.0, 1.0, (d_segmentIndex / (segmentNumber - 1.0)));
     // float arcRadio = d_segmentIndex / (segmentNumber - 1.0);
-    float count = styleMappingMat[3].b; // 贴图在弧线上重复的数量
+    float count = v_line_data.b; // 贴图在弧线上重复的数量
     float u = fract(arcRadio * count - animateSpeed * count);
     // float u = fract(arcRadio * count - animateSpeed);
     if(u_animate.x == Animate) {
       u = gl_FragColor.a/opacity;
     }
 
-    float v = styleMappingMat[3].a; // 线图层贴图部分的 v 坐标值
+    float v = v_line_data.a; // 线图层贴图部分的 v 坐标值
 
     vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
     vec4 pattern = texture2D(u_texture, uv);

package/es/line/shaders/line_arc_great_circle_vert.glsl

@@ -23,12 +23,8 @@ uniform float u_line_texture: 0.0;
 
 attribute vec2 a_iconMapUV;
 varying vec2 v_iconMapUV;
+varying vec4 v_line_data;
 
-uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
 
 #pragma include "projection"
 #pragma include "project"
@@ -123,31 +119,7 @@ vec2 interpolate (vec2 source, vec2 target, float angularDist, float t) {
 }
 
 void main() {
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0  // dataset 数据集
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
   
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
 
   v_color = a_Color;
   vec2 source = radians(a_Instance.rg);
@@ -184,7 +156,7 @@ void main() {
   //  vec4 project_pos = project_position(vec4(curr.xy, 0, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0));
 
-  styleMappingMat[3].g = a_Position.x; // 该顶点在弧线上的分段排序
+v_line_data.g = a_Position.x; // 该顶点在弧线上的分段排序
   if(LineTexture == u_line_texture) { // 开启贴图模式  
     // float mapZoomScale = u_CoordinateSystem !== COORDINATE_SYSTEM_P20_2?10000000.0:1.0;
     float d_arcDistrance = length(source - target);
@@ -195,11 +167,11 @@ void main() {
       d_arcDistrance = project_pixel_allmap(d_arcDistrance);
     }
     float d_pixelLen = project_pixel(u_icon_step)/8.0;
-    styleMappingMat[3].b = floor(d_arcDistrance/d_pixelLen); // 贴图在弧线上重复的数量
+v_line_data.b = floor(d_arcDistrance/d_pixelLen); // 贴图在弧线上重复的数量
 
     float lineOffsetWidth = length(offset + offset * sign(a_Position.y)); // 线横向偏移的距离
     float linePixelSize = project_pixel(a_Size);  // 定点位置偏移，按地图等级缩放后的距离
-    styleMappingMat[3].a = lineOffsetWidth/linePixelSize;  // 线图层贴图部分的 v 坐标值
+v_line_data.a = lineOffsetWidth/linePixelSize;  // 线图层贴图部分的 v 坐标值
 
     v_iconMapUV = a_iconMapUV;
   }

package/es/line/shaders/line_arc_vert.glsl

@@ -18,13 +18,11 @@ uniform float u_icon_step: 100;
 uniform float u_line_texture: 0.0;
 attribute vec2 a_iconMapUV;
 varying vec2 v_iconMapUV;
+varying vec4 v_lineData;
+varying vec2 v_distance_ratio;
 
 uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
-#pragma include "styleMappingCalThetaOffset"
 
 #pragma include "projection"
 #pragma include "project"
@@ -83,37 +81,6 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) {
 void main() {
   v_color = a_Color;
 
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0  // dataset 数据集
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke -> thetaOffset... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-
-  vec2 thetaOffsetAndOffset = calThetaOffsetAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][1] = thetaOffsetAndOffset.r;
-  textureOffset = thetaOffsetAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
-
-  
   vec2 source = a_Instance.rg;  // 起始点
   vec2 target =  a_Instance.ba; // 终点
   float segmentIndex = a_Position.x;
@@ -130,20 +97,17 @@ void main() {
       }
   }
 
-   styleMappingMat[3].b = d_distance_ratio;
+ v_lineData.b = d_distance_ratio;
+
+  vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, u_thetaOffset), 0.0, 1.0));
+  vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, u_thetaOffset), 0.0, 1.0));
 
-  // styleMappingMat[0][1] - arcThetaOffset
-  float arcThetaOffset = styleMappingMat[0][1];
-  vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, arcThetaOffset), 0.0, 1.0));
-  vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, arcThetaOffset), 0.0, 1.0));
-  // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
-  //unProjCustomCoord
   
   vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
 
 
   float d_segmentIndex = a_Position.x + 1.0; // 当前顶点在弧线中所处的分段位置
-  styleMappingMat[3].r = d_segmentIndex;
+ v_lineData.r = d_segmentIndex;
 
   if(LineTexture == u_line_texture) { // 开启贴图模式
 
@@ -159,11 +123,11 @@ void main() {
 
     float pixelLen = project_pixel_texture(u_icon_step); // 贴图沿弧线方向的长度 - 随地图缩放改变
     float texCount = floor(arcDistrance/pixelLen); // 贴图在弧线上重复的数量
-     styleMappingMat[3].g = texCount;
+    v_lineData.g = texCount;
 
     float lineOffsetWidth = length(offset + offset * sign(a_Position.y)); // 线横向偏移的距离
     float linePixelSize = project_pixel(a_Size); // 定点位置偏移
-     styleMappingMat[3].a = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
+    v_lineData.a = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
   }
   
 

package/es/line/shaders/line_frag.glsl

@@ -1,3 +1,4 @@
+#extension GL_OES_standard_derivatives : enable
 #define Animate 0.0
 #define LineTexture 1.0
 uniform float u_opacity : 1.0;
@@ -13,24 +14,22 @@ varying vec4 v_color;
 uniform float u_line_texture;
 uniform sampler2D u_texture;
 uniform vec2 u_textSize;
-
 varying vec2 v_iconMapUV;
+varying vec4 v_texture_data;
+
 
 #pragma include "picking"
 
 uniform float u_time;
 uniform vec4 u_animate: [ 1, 2., 1.0, 0.2 ]; // 控制运动
-
-varying mat4 styleMappingMat;
 // [animate, duration, interval, trailLength],
 void main() {
-  float opacity = styleMappingMat[0][0];
   float animateSpeed = 0.0; // 运动速度
-  float d_distance_ratio = styleMappingMat[3].r; // 当前点位距离占线总长的比例
+  float d_distance_ratio = v_texture_data.r; // 当前点位距离占线总长的比例
   gl_FragColor = v_color;
   // anti-alias
   // float blur = 1.0 - smoothstep(u_blur, 1., length(v_normal.xy));
-  gl_FragColor.a *= opacity; // 全局透明度
+  gl_FragColor.a *= u_opacity; // 全局透明度
   if(u_animate.x == Animate) {
       animateSpeed = u_time / u_animate.y;
        float alpha =1.0 - fract( mod(1.0- d_distance_ratio, u_animate.z)* (1.0/ u_animate.z) + animateSpeed);
@@ -40,23 +39,20 @@ void main() {
   }
 
   if(u_line_texture == LineTexture) { // while load texture
-    float aDistance = styleMappingMat[3].g;      // 当前顶点的距离
-    float d_texPixelLen = styleMappingMat[3].b;  // 贴图的像素长度，根据地图层级缩放
+    float aDistance = v_texture_data.g;      // 当前顶点的距离
+    float d_texPixelLen = v_texture_data.b;  // 贴图的像素长度，根据地图层级缩放
     float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);
-    float v = styleMappingMat[3].a;  // 线图层贴图部分的 v 坐标值
+    float v = v_texture_data.a;  // 线图层贴图部分的 v 坐标值
 
     // v = max(smoothstep(0.95, 1.0, v), v);
     vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
-    
-    // gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, vec2(u, v)));
-    // gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
      vec4 pattern = texture2D(u_texture, uv);
 
     if(u_textureBlend == 0.0) { // normal
       pattern.a = 0.0;
       gl_FragColor += pattern;
     } else { // replace
-        pattern.a *= opacity;
+        pattern.a *= u_opacity;
         if(gl_FragColor.a <= 0.0) {
           pattern.a = 0.0;
         }
@@ -64,15 +60,17 @@ void main() {
     }
   } 
 
-  float v = styleMappingMat[3].a;
+  float v = v_texture_data.a;
   float borderWidth = min(0.5, u_borderWidth);
   // 绘制 border
   if(borderWidth > 0.01) {
-    float borderOuterWidth = borderWidth/2.0;
+    float borderOuterWidth = borderWidth / 2.0;
+
 
     if(v >= 1.0 - borderWidth || v <= borderWidth) {
-      if(v > borderWidth) {
+      if(v > borderWidth) { // 外侧
         float linear = smoothstep(0.0, 1.0, (v - (1.0 - borderWidth))/borderWidth);
+        //  float linear = step(0.0, (v - (1.0 - borderWidth))/borderWidth);
         gl_FragColor.rgb = mix(gl_FragColor.rgb, u_borderColor.rgb, linear);
       } else if(v <= borderWidth) {
         float linear = smoothstep(0.0, 1.0, v/borderWidth);
@@ -88,7 +86,7 @@ void main() {
   }
 
   // blur
-  float blurV = styleMappingMat[3][3];
+  float blurV = v_texture_data.a;
   if(blurV < 0.5) {
     gl_FragColor.a *= mix(u_blur.r, u_blur.g, blurV/0.5);
   } else {