@antv/l7-layers 2.9.37-alpha.2 → 2.9.37-alpha.3

package/lib/line/shaders/line_arc_great_circle_vert.glsl

@@ -0,0 +1,214 @@
+#define LineTypeSolid 0.0
+#define LineTypeDash 1.0
+#define Animate 0.0
+#define LineTexture 1.0
+
+attribute vec4 a_Color;
+attribute vec3 a_Position;
+attribute vec4 a_Instance;
+attribute float a_Size;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+uniform float segmentNumber;
+uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+varying vec4 v_color;
+
+varying float v_distance_ratio;
+uniform float u_line_type: 0.0;
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
+varying vec4 v_dash_array;
+
+uniform float u_icon_step: 100;
+uniform float u_line_texture: 0.0;
+
+attribute vec2 a_iconMapUV;
+varying vec2 v_iconMapUV;
+
+uniform float u_opacity: 1.0;
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+
+#pragma include "projection"
+#pragma include "project"
+#pragma include "picking"
+
+float maps (float value, float start1, float stop1, float start2, float stop2) {
+    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
+}
+
+float getSegmentRatio(float index) {
+    return index / (segmentNumber - 1.);
+}
+
+float paraboloid(vec2 source, vec2 target, float ratio) {
+    vec2 x = mix(source, target, ratio);
+    vec2 center = mix(source, target, 0.5);
+    float dSourceCenter = distance(source, center);
+    float dXCenter = distance(x, center);
+    return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter);
+}
+
+vec3 getPos(vec2 source, vec2 target, float segmentRatio) {
+     float vertex_height = paraboloid(source, target, segmentRatio);
+
+    return vec3(
+    mix(source, target, segmentRatio),
+    sqrt(max(0.0, vertex_height))
+    );
+}
+vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {
+  // normalized direction of the line
+  vec2 dir_screenspace = normalize(line_clipspace);
+  // rotate by 90 degrees
+   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
+  vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size)/ 2.0;
+  return offset;
+}
+vec2 getNormal(vec2 line_clipspace, float offset_direction) {
+  // normalized direction of the line
+  vec2 dir_screenspace = normalize(line_clipspace);
+  // rotate by 90 degrees
+   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
+   return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction);
+}
+float getAngularDist (vec2 source, vec2 target) {
+  vec2 delta = source - target;
+  vec2 sin_half_delta = sin(delta / 2.0);
+  float a =
+    sin_half_delta.y * sin_half_delta.y +
+    cos(source.y) * cos(target.y) *
+    sin_half_delta.x * sin_half_delta.x;
+  return 2.0 * atan(sqrt(a), sqrt(1.0 - a));
+}
+
+vec2 midPoint(vec2 source, vec2 target) {
+  vec2 center = target - source;
+  float r = length(center);
+  float theta = atan(center.y, center.x);
+  float thetaOffset = 0.314;
+  float r2 = r / 2.0 / cos(thetaOffset);
+  float theta2 = theta + thetaOffset;
+  vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y);
+  return mid;
+}
+float bezier3(vec3 arr, float t) {
+  float ut = 1. - t;
+  return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t;
+}
+
+vec2 interpolate (vec2 source, vec2 target, float angularDist, float t) {
+  // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    vec2 mid = midPoint(source, target);
+    vec3 x = vec3(source.x, mid.x, target.x);
+    vec3 y = vec3(source.y, mid.y, target.y);
+    return vec2(bezier3(x ,t), bezier3(y,t));
+  }else {
+    if(abs(angularDist - PI) < 0.001) {
+      return (1.0 - t) * source + t * target;
+    }
+    float a = sin((1.0 - t) * angularDist) / sin(angularDist);
+    float b = sin(t * angularDist) / sin(angularDist);
+    vec2 sin_source = sin(source);
+    vec2 cos_source = cos(source);
+    vec2 sin_target = sin(target);
+    vec2 cos_target = cos(target);
+    float x = a * cos_source.y * cos_source.x + b * cos_target.y * cos_target.x;
+    float y = a * cos_source.y * sin_source.x + b * cos_target.y * sin_target.x;
+    float z = a * sin_source.y + b * sin_target.y;
+    return vec2(atan(y, x), atan(z, sqrt(x * x + y * y)));
+  }
+}
+
+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);
+  vec2 target = radians(a_Instance.ba);
+  float angularDist = getAngularDist(source, target);
+  float segmentIndex = a_Position.x;
+  float segmentRatio = getSegmentRatio(segmentIndex);
+  float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
+
+  if(u_line_type == LineTypeDash) {
+    v_distance_ratio = segmentIndex / segmentNumber;
+    vec2 s = source;
+    vec2 t = target;
+    
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      s = unProjCustomCoord(source);
+      t = unProjCustomCoord(target);
+    }
+    float total_Distance = pixelDistance(s, t) / 2.0 * PI;
+    total_Distance = total_Distance*16.0; // total_Distance*16.0 调整默认的效果
+    v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / total_Distance;
+  }
+
+  if(u_animate.x == Animate) {
+      v_distance_ratio = segmentIndex / segmentNumber;
+  }
+
+  float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
+  v_distance_ratio = segmentIndex / segmentNumber;
+  vec4 curr = project_position(vec4(degrees(interpolate(source, target, angularDist, segmentRatio)), 0.0, 1.0));
+  vec4 next = project_position(vec4(degrees(interpolate(source, target, angularDist, nextSegmentRatio)), 0.0, 1.0));
+  // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
+  vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
+  //  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; // 该顶点在弧线上的分段排序
+  if(LineTexture == u_line_texture) { // 开启贴图模式  
+    // float mapZoomScale = u_CoordinateSystem !== COORDINATE_SYSTEM_P20_2?10000000.0:1.0;
+    float d_arcDistrance = length(source - target);
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap
+      d_arcDistrance = d_arcDistrance * 1000000.0;
+    }
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox
+      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); // 贴图在弧线上重复的数量
+
+    float lineOffsetWidth = length(offset + offset * sign(a_Position.y)); // 线横向偏移的距离
+    float linePixelSize = project_pixel(a_Size);  // 定点位置偏移，按地图等级缩放后的距离
+    styleMappingMat[3].a = lineOffsetWidth/linePixelSize;  // 线图层贴图部分的 v 坐标值
+
+    v_iconMapUV = a_iconMapUV;
+  }
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(curr.xy + offset, curr.z, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0));
+  }
+  setPickingColor(a_PickingColor);
+}
+

package/lib/line/shaders/line_arc_vert.glsl

@@ -0,0 +1,178 @@
+#define Animate 0.0
+#define LineTexture 1.0
+
+attribute vec4 a_Color;
+attribute vec3 a_Position;
+attribute vec4 a_Instance;
+attribute float a_Size;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+uniform float segmentNumber;
+uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+varying vec4 v_color;
+
+uniform float u_lineDir: 1.0;
+
+uniform float u_thetaOffset: 0.314;
+uniform float u_icon_step: 100;
+uniform float u_line_texture: 0.0;
+attribute vec2 a_iconMapUV;
+varying vec2 v_iconMapUV;
+
+uniform float u_opacity: 1.0;
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+#pragma include "styleMappingCalThetaOffset"
+
+#pragma include "projection"
+#pragma include "project"
+#pragma include "picking"
+
+float bezier3(vec3 arr, float t) {
+  float ut = 1. - t;
+  return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t;
+}
+vec2 midPoint(vec2 source, vec2 target, float arcThetaOffset) {
+  vec2 center = target - source;
+  float r = length(center);
+  float theta = atan(center.y, center.x);
+  float thetaOffset = arcThetaOffset;
+  float r2 = r / 2.0 / cos(thetaOffset);
+  float theta2 = theta + thetaOffset;
+  vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y);
+  if(u_lineDir == 1.0) { // 正向
+    return mid;
+  } else { // 逆向
+    // (mid + vmin)/2 = (s + t)/2
+    vec2 vmid = source + target - mid;
+    return vmid;
+  }
+  // return mid;
+}
+float getSegmentRatio(float index) {
+    // dash: index / (segmentNumber - 1.);
+    // normal: smoothstep(0.0, 1.0, index / (segmentNumber - 1.));
+    return smoothstep(0.0, 1.0, index / (segmentNumber - 1.));
+    //  return index / (segmentNumber - 1.);
+}
+vec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) {
+  // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation
+  vec2 mid = midPoint(source, target, arcThetaOffset);
+  vec3 x = vec3(source.x, mid.x, target.x);
+  vec3 y = vec3(source.y, mid.y, target.y);
+  return vec2(bezier3(x ,t), bezier3(y,t));
+}
+vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {
+  // normalized direction of the line
+  vec2 dir_screenspace = normalize(line_clipspace);
+  // rotate by 90 degrees
+   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
+  vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0;
+  return offset;
+}
+vec2 getNormal(vec2 line_clipspace, float offset_direction) {
+  // normalized direction of the line
+  vec2 dir_screenspace = normalize(line_clipspace);
+  // rotate by 90 degrees
+   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
+   return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(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;
+  float segmentRatio = getSegmentRatio(segmentIndex);
+
+  float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
+  float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
+  float d_distance_ratio;
+  
+  if(u_animate.x == Animate) {
+      d_distance_ratio = segmentIndex / segmentNumber;
+      if(u_lineDir != 1.0) {
+        d_distance_ratio = 1.0 - d_distance_ratio;
+      }
+  }
+
+   styleMappingMat[3].b = d_distance_ratio;
+
+  // 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;
+
+  if(LineTexture == u_line_texture) { // 开启贴图模式
+
+    float arcDistrance = length(source - target); // 起始点和终点的距离
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap
+      arcDistrance *= 1000000.0;
+    }
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox
+      // arcDistrance *= 8.0;
+      arcDistrance = project_pixel_allmap(arcDistrance);
+    }
+    v_iconMapUV = a_iconMapUV;
+
+    float pixelLen = project_pixel_texture(u_icon_step); // 贴图沿弧线方向的长度 - 随地图缩放改变
+    float texCount = floor(arcDistrance/pixelLen); // 贴图在弧线上重复的数量
+     styleMappingMat[3].g = texCount;
+
+    float lineOffsetWidth = length(offset + offset * sign(a_Position.y)); // 线横向偏移的距离
+    float linePixelSize = project_pixel(a_Size); // 定点位置偏移
+     styleMappingMat[3].a = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
+  }
+  
+
+  // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    // gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
+    gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
+  }
+  setPickingColor(a_PickingColor);
+}

package/lib/line/shaders/line_bezier_vert.glsl

@@ -0,0 +1,85 @@
+#define LineTypeSolid 0.0
+#define LineTypeDash 1.0
+#define Animate 0.0
+attribute vec4 a_Color;
+attribute vec3 a_Position;
+attribute vec4 a_Instance;
+attribute float a_Size;
+uniform mat4 u_ModelMatrix;
+uniform float segmentNumber;
+uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+varying vec4 v_color;
+varying vec2 v_normal;
+
+varying float v_distance_ratio;
+uniform float u_line_type: 0.0;
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
+varying vec4 v_dash_array;
+#pragma include "projection"
+#pragma include "project"
+#pragma include "picking"
+
+float bezier3(vec3 arr, float t) {
+  float ut = 1. - t;
+  return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t;
+}
+vec2 midPoint(vec2 source, vec2 target) {
+  vec2 center = target - source;
+  float r = length(center);
+  float theta = atan(center.y, center.x);
+  float thetaOffset = 0.314;
+  float r2 = r / 2.0 / cos(thetaOffset);
+  float theta2 = theta + thetaOffset;
+  vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y);
+  return mid;
+}
+float getSegmentRatio(float index) {
+    return smoothstep(0.0, 1.0, index / (segmentNumber - 1.));
+}
+vec2 interpolate (vec2 source, vec2 target, float t) {
+  // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation
+  vec2 mid = midPoint(source, target);
+  vec3 x = vec3(source.x, mid.x, target.x);
+  vec3 y = vec3(source.y, mid.y, target.y);
+  return vec2(bezier3(x ,t), bezier3(y,t));
+}
+vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {
+  // normalized direction of the line
+  vec2 dir_screenspace = normalize(line_clipspace);
+  // rotate by 90 degrees
+   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
+  vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0;
+  return offset * vec2(1.0, -1.0);
+}
+vec2 getNormal(vec2 line_clipspace, float offset_direction) {
+  // normalized direction of the line
+  vec2 dir_screenspace = normalize(line_clipspace);
+  // rotate by 90 degrees
+   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
+   return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction);
+}
+
+void main() {
+  v_color = a_Color;
+  vec2 source = a_Instance.rg;
+  vec2 target =  a_Instance.ba;
+  float segmentIndex = a_Position.x;
+  float segmentRatio = getSegmentRatio(segmentIndex);
+  float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
+  float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
+  if(u_line_type == LineTypeDash) {
+      v_distance_ratio = segmentIndex / segmentNumber;
+      float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
+      v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
+    }
+  if(u_animate.x == Animate) {
+      v_distance_ratio = segmentIndex / segmentNumber;
+  }
+  vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0));
+  vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0));
+  v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
+  vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
+
+  gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
+  setPickingColor(a_PickingColor);
+}

package/lib/line/shaders/line_frag.glsl

@@ -0,0 +1,99 @@
+#define Animate 0.0
+#define LineTexture 1.0
+uniform float u_opacity : 1.0;
+uniform float u_textureBlend;
+
+uniform float u_borderWidth: 0.0;
+
+uniform vec3 u_blur;
+uniform vec4 u_borderColor;
+varying vec4 v_color;
+
+// line texture
+uniform float u_line_texture;
+uniform sampler2D u_texture;
+uniform vec2 u_textSize;
+
+varying vec2 v_iconMapUV;
+
+#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; // 当前点位距离占线总长的比例
+  gl_FragColor = v_color;
+  // anti-alias
+  // float blur = 1.0 - smoothstep(u_blur, 1., length(v_normal.xy));
+  gl_FragColor.a *= 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);
+      alpha = (alpha + u_animate.w -1.0) / u_animate.w;
+      alpha = smoothstep(0., 1., alpha);
+      gl_FragColor.a *= alpha;
+  }
+
+  if(u_line_texture == LineTexture) { // while load texture
+    float aDistance = styleMappingMat[3].g;      // 当前顶点的距离
+    float d_texPixelLen = styleMappingMat[3].b;  // 贴图的像素长度，根据地图层级缩放
+    float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);
+    float v = styleMappingMat[3].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;
+        if(gl_FragColor.a <= 0.0) {
+          pattern.a = 0.0;
+        }
+        gl_FragColor = pattern;
+    }
+  } 
+
+  float v = styleMappingMat[3].a;
+  float borderWidth = min(0.5, u_borderWidth);
+  // 绘制 border
+  if(borderWidth > 0.01) {
+    float borderOuterWidth = borderWidth/2.0;
+
+    if(v >= 1.0 - borderWidth || v <= borderWidth) {
+      if(v > borderWidth) {
+        float linear = smoothstep(0.0, 1.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);
+        gl_FragColor.rgb = mix(u_borderColor.rgb, gl_FragColor.rgb, linear);
+      }
+    }
+
+    if(v < borderOuterWidth) {
+      gl_FragColor.a = mix(0.0, gl_FragColor.a, v/borderOuterWidth);
+    } else if(v > 1.0 - borderOuterWidth) {
+      gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - borderOuterWidth))/borderOuterWidth);
+    }
+  }
+
+  // blur
+  float blurV = styleMappingMat[3][3];
+  if(blurV < 0.5) {
+    gl_FragColor.a *= mix(u_blur.r, u_blur.g, blurV/0.5);
+  } else {
+    gl_FragColor.a *= mix(u_blur.g, u_blur.b, (blurV - 0.5)/0.5);
+  }
+  
+  gl_FragColor = filterColor(gl_FragColor);
+}