Merge pull request #772 from antvis/shihui_dev

Shihui dev
2021-09-17 11:16:38 +08:00 · 2021-09-17 11:16:38 +08:00 · bc36b0a520
parent 44d7047c68 36739cf2d4
commit bc36b0a520
30 changed files with 166 additions and 197 deletions
--- a/latest.sh
+++ b/latest.sh
@ -1,11 +1,11 @@
-npm dist-tag add @antv/l7-component@2.5.16  latest
-npm dist-tag add @antv/l7-core@2.5.16  latest
-npm dist-tag add @antv/l7@2.5.16  latest
-npm dist-tag add @antv/l7-layers@2.5.16  latest
-npm dist-tag add @antv/l7-map@2.5.16  latest
-npm dist-tag add @antv/l7-maps@2.5.16  latest
-npm dist-tag add @antv/l7-renderer@2.5.16  latest
-npm dist-tag add @antv/l7-scene@2.5.16  latest
-npm dist-tag add @antv/l7-source@2.5.16  latest
-npm dist-tag add @antv/l7-three@2.5.16  latest
-npm dist-tag add @antv/l7-utils@2.5.16  latest
+npm dist-tag add @antv/l7-component@2.5.19  latest
+npm dist-tag add @antv/l7-core@2.5.19  latest
+npm dist-tag add @antv/l7@2.5.19  latest
+npm dist-tag add @antv/l7-layers@2.5.19  latest
+npm dist-tag add @antv/l7-map@2.5.19  latest
+npm dist-tag add @antv/l7-maps@2.5.19  latest
+npm dist-tag add @antv/l7-renderer@2.5.19  latest
+npm dist-tag add @antv/l7-scene@2.5.19  latest
+npm dist-tag add @antv/l7-source@2.5.19  latest
+npm dist-tag add @antv/l7-three@2.5.19  latest
+npm dist-tag add @antv/l7-utils@2.5.19  latest
--- a/lerna.json
+++ b/lerna.json
@ -14,7 +14,7 @@
      "message": "chore: publish"
    }
  },
-  "version": "2.5.19",
+  "version": "2.5.21",
  "npmClient": "yarn",
  "useWorkspaces": true,
  "publishConfig": {
--- a/packages/component/package.json
+++ b/packages/component/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-component",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -25,8 +25,8 @@
  "author": "lzxue",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7-core": "^2.5.19",
-    "@antv/l7-utils": "^2.5.19",
+    "@antv/l7-core": "^2.5.21",
+    "@antv/l7-utils": "^2.5.21",
    "@babel/runtime": "^7.7.7",
    "eventemitter3": "^4.0.0",
    "inversify": "^5.0.1",
--- a/packages/component/src/control/layer.ts
+++ b/packages/component/src/control/layer.ts
@ -135,7 +135,7 @@ export default class Layers extends Control {
      this.addLayer(baseLayers[name], name, false);
    });
    Object.keys(overlayers).forEach((name: any, index: number) => {
-      overlayers[name].once('inited', this.update);
+      // overlayers[name].once('inited', this.update);
      this.addLayer(overlayers[name], name, true);
    });
  }
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-core",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -24,7 +24,7 @@
  "license": "ISC",
  "dependencies": {
    "@antv/async-hook": "^2.1.0",
-    "@antv/l7-utils": "^2.5.19",
+    "@antv/l7-utils": "^2.5.21",
    "@babel/runtime": "^7.7.7",
    "@mapbox/tiny-sdf": "^1.1.1",
    "ajv": "^6.10.2",
--- a/packages/l7/package.json
+++ b/packages/l7/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -25,12 +25,12 @@
  "author": "antv",
  "license": "MIT",
  "dependencies": {
-    "@antv/l7-component": "^2.5.19",
-    "@antv/l7-core": "^2.5.19",
-    "@antv/l7-layers": "^2.5.19",
-    "@antv/l7-maps": "^2.5.19",
-    "@antv/l7-scene": "^2.5.19",
-    "@antv/l7-utils": "^2.5.19",
+    "@antv/l7-component": "^2.5.21",
+    "@antv/l7-core": "^2.5.21",
+    "@antv/l7-layers": "^2.5.21",
+    "@antv/l7-maps": "^2.5.21",
+    "@antv/l7-scene": "^2.5.21",
+    "@antv/l7-utils": "^2.5.21",
    "@babel/runtime": "^7.7.7"
  },
  "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
--- a/packages/l7/src/version.ts
+++ b/packages/l7/src/version.ts
@ -1,2 +1,2 @@
-const version = '2.5.19';
+const version = '2.5.20';
 export { version };
--- a/packages/layers/package.json
+++ b/packages/layers/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-layers",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "L7's collection of built-in layers",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -24,9 +24,9 @@
  "license": "ISC",
  "dependencies": {
    "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "^2.5.19",
-    "@antv/l7-source": "^2.5.19",
-    "@antv/l7-utils": "^2.5.19",
+    "@antv/l7-core": "^2.5.21",
+    "@antv/l7-source": "^2.5.21",
+    "@antv/l7-utils": "^2.5.21",
    "@babel/runtime": "^7.7.7",
    "@mapbox/martini": "^0.2.0",
    "@turf/meta": "^6.0.2",
--- a/packages/layers/src/line/shaders/line_arc_3d_frag.glsl
+++ b/packages/layers/src/line/shaders/line_arc_3d_frag.glsl
@ -7,9 +7,8 @@ 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 vec2 v_normal;
 varying vec4 v_dash_array;
-varying float v_distance_ratio;
 varying vec4 v_color;

 uniform float u_line_texture: 0.0;
@ -17,10 +16,9 @@ uniform sampler2D u_texture;
 uniform vec2 u_textSize;
 varying float v_segmentIndex;
 uniform float segmentNumber;
-varying float v_arcDistrance;
-varying float v_pixelLen;
-varying float v_a;
-varying vec2 v_offset;
+
+varying vec4 v_dataset; // 数据集
+
 varying vec2 v_iconMapUV;

 uniform float u_time;
@ -37,6 +35,7 @@ varying mat4 styleMappingMat;
 void main() {
  float opacity = styleMappingMat[0][0];
  float animateSpeed = 0.0; // 运动速度
+  float d_distance_ratio = v_dataset.g; // 当前点位距离占线总长的比例

  if(u_linearColor == 1.0) { // 使用渐变颜色
    gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
@ -49,7 +48,7 @@ void main() {
  gl_FragColor.a *= opacity;
  if(u_line_type == LineTypeDash) {
   float flag = 0.;
-    float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+    float dashLength = mod(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)) {
      flag = 1.;
    }
@ -58,7 +57,7 @@ void main() {

  if(u_aimate.x == Animate) {
      animateSpeed = u_time / u_aimate.y;
-      float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
+      float alpha =1.0 - fract( mod(1.0- d_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);

      alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
      // alpha = smoothstep(0., 1., alpha);
@ -69,15 +68,15 @@ 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 = floor(v_arcDistrance/v_pixelLen);
+    float count = v_dataset.b; // // 贴图在弧线上重复的数量

    float u = fract(arcRadio * count - animateSpeed * count);
 
    if(u_aimate.x == Animate) {
      u = gl_FragColor.a/opacity;
    }
-    float v = length(v_offset)/(v_a); // 横向

+    float v = v_dataset.a;  // 线图层贴图部分的 v 坐标值
    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
    vec4 pattern = texture2D(u_texture, uv);

--- a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl
@ -12,8 +12,7 @@ uniform mat4 u_Mvp;
 uniform float segmentNumber;
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 varying vec4 v_color;
-varying vec2 v_normal;
-varying float v_distance_ratio;
+// varying vec2 v_normal;
 uniform float u_line_type: 0.0;
 uniform vec4 u_dash_array: [10.0, 5., 0, 0];
 varying vec4 v_dash_array;
@ -21,10 +20,9 @@ varying vec4 v_dash_array;
 uniform float u_icon_step: 100;
 uniform float u_line_texture: 0.0;
 varying float v_segmentIndex;
-varying float v_arcDistrance;
-varying float v_pixelLen;
-varying float v_a;
-varying vec2 v_offset;
+
+varying vec4 v_dataset; // 数据集
+
 attribute vec2 a_iconMapUV;
 varying vec2 v_iconMapUV;

@ -114,8 +112,9 @@ void main() {
  float segmentRatio = getSegmentRatio(segmentIndex);
  float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));

+  float d_distance_ratio;
   if(u_line_type == LineTypeDash) {
-    v_distance_ratio = segmentIndex / segmentNumber;
+    d_distance_ratio = segmentIndex / segmentNumber;
    // float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
    vec2 s = source;
    vec2 t = target;
@ -128,24 +127,29 @@ void main() {
    v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
  }
    if(u_aimate.x == Animate) {
-      v_distance_ratio = segmentIndex / segmentNumber;
+      d_distance_ratio = segmentIndex / segmentNumber;
  }
+  v_dataset.g = d_distance_ratio; // 当前点位距离占线总长的比例

  float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
  vec3 curr = getPos(source, target, segmentRatio);
  vec3 next = getPos(source, target, nextSegmentRatio);
  vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y);
-  v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
+  // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);


  v_segmentIndex = a_Position.x;
  if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式  
-    v_arcDistrance = length(source - target);
-    v_pixelLen = project_pixel(u_icon_step);
+
+    float arcDistrance = length(source - target);
+    float pixelLen =  project_pixel(u_icon_step);
+    v_dataset.b = floor(arcDistrance/pixelLen); // 贴图在弧线上重复的数量

    vec2 projectOffset = project_pixel(offset);
-    v_offset = projectOffset + projectOffset * sign(a_Position.y);
-    v_a = project_pixel(a_Size);
+    float lineOffsetWidth = length(projectOffset + projectOffset * sign(a_Position.y)); // 线横向偏移的距离
+    float linePixelSize = project_pixel(a_Size);  // 定点位置偏移，按地图等级缩放后的距离
+    v_dataset.a = lineOffsetWidth/linePixelSize;  // 线图层贴图部分的 v 坐标值
+
    v_iconMapUV = a_iconMapUV;
  }
  
--- a/packages/layers/src/line/shaders/line_arc_frag.glsl
+++ b/packages/layers/src/line/shaders/line_arc_frag.glsl
@ -7,9 +7,8 @@ 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 vec2 v_normal;
 varying vec4 v_dash_array;
-varying float v_distance_ratio;
 varying vec4 v_color;

 uniform float u_time;
@ -20,13 +19,10 @@ uniform sampler2D u_texture;
 uniform vec2 u_textSize;

 uniform float segmentNumber;
-varying float v_segmentIndex;
-varying float v_arcDistrance;
-varying float v_pixelLen;
-varying float v_a;
-varying vec2 v_offset;
 varying vec2 v_iconMapUV;

+varying vec4 v_dataset; // 数据集 - 用于合并单个的 varying 变量
+
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据

 uniform float u_linearColor: 0;
@ -38,21 +34,22 @@ uniform vec4 u_targetColor;
 void main() {
  float opacity = styleMappingMat[0][0];
  float animateSpeed = 0.0; // 运动速度
+  float d_segmentIndex = v_dataset.r;   // 当前顶点在弧线中所处的分段位置
+  float d_distance_ratio = v_dataset.b; // 当前顶点在弧线中所处的分段比例

+  // 设置弧线的底色
  if(u_linearColor == 1.0) { // 使用渐变颜色
-    gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
+    gl_FragColor = mix(u_sourceColor, u_targetColor, d_segmentIndex/segmentNumber);
  } else { // 使用 color 方法传入的颜色
     gl_FragColor = v_color;
  }
  
-  // gl_FragColor = v_color;
-  
  // float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
  // float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
  gl_FragColor.a *= opacity;
  if(u_line_type == LineTypeDash) {
   float flag = 0.;
-    float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+    float dashLength = mod(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)) {
      flag = 1.;
    }
@ -61,25 +58,26 @@ void main() {

  if(u_aimate.x == Animate) {
      animateSpeed = u_time / u_aimate.y;
-      float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
+      float alpha =1.0 - fract( mod(1.0- d_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
      alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
      // alpha = smoothstep(0., 1., alpha);
      alpha = clamp(alpha, 0.0, 1.0);
      gl_FragColor.a *= alpha;
  }

+  // 当存在贴图时在底色上贴上贴图
  if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
-    float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / segmentNumber));
-    // float arcRadio = smoothstep( 0.0, 1.0, v_distance_ratio);
-    // float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
-    float count = floor(v_arcDistrance/v_pixelLen);
+    float arcRadio = smoothstep( 0.0, 1.0, (d_segmentIndex / segmentNumber));
+    // float arcRadio = smoothstep( 0.0, 1.0, d_distance_ratio);

-    float u = 1.0 - fract(arcRadio * count + animateSpeed);
+    float d_texCount = v_dataset.g; // 贴图在弧线上重复的数量
+
+    float u = 1.0 - fract(arcRadio * d_texCount + animateSpeed);

    if(u_aimate.x == Animate) {
      u = gl_FragColor.a/opacity;
    }
-    float v = length(v_offset)/(v_a); // 横向
+    float v = v_dataset.a; // 横向 v
    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;

    vec4 pattern = texture2D(u_texture, uv);
@ -102,5 +100,4 @@ void main() {
     gl_FragColor = filterColor(gl_FragColor);
  }
  // gl_FragColor = filterColor(gl_FragColor);
-
 }
--- a/packages/layers/src/line/shaders/line_arc_great_circle_frag.glsl
+++ b/packages/layers/src/line/shaders/line_arc_great_circle_frag.glsl
@ -7,7 +7,7 @@ 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 vec2 v_normal;
 varying vec4 v_dash_array;
 varying float v_distance_ratio;
 varying vec4 v_color;
@ -19,11 +19,9 @@ uniform float u_line_texture: 0.0;
 uniform sampler2D u_texture;
 uniform vec2 u_textSize;
 uniform float segmentNumber;
-varying float v_segmentIndex;
-varying float v_arcDistrance;
-varying float v_pixelLen;
-varying vec2 v_offset;
-varying float v_a;
+
+varying vec4 v_dataset; // 数据集
+
 varying vec2 v_iconMapUV;

 uniform float u_linearColor: 0;
@ -39,10 +37,11 @@ varying mat4 styleMappingMat;
 void main() {
  float opacity = styleMappingMat[0][0];
  float animateSpeed = 0.0;
-  // gl_FragColor = v_color;
+  float d_segmentIndex = v_dataset.g;
  
+  // 设置弧线的底色
  if(u_linearColor == 1.0) { // 使用渐变颜色
-    gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
+    gl_FragColor = mix(u_sourceColor, u_targetColor, d_segmentIndex/segmentNumber);
  } else { // 使用 color 方法传入的颜色
     gl_FragColor = v_color;
  }
@ -59,6 +58,7 @@ void main() {
    gl_FragColor.a *=flag;
  }

+  // 设置弧线的动画模式
  if(u_aimate.x == Animate) {
      animateSpeed = u_time / u_aimate.y;
      float alpha =1.0 - fract( mod(1.0- smoothstep(0.0, 1.0, v_distance_ratio), u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
@ -67,22 +67,23 @@ void main() {
      gl_FragColor.a *= alpha;
  }

-  if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式
-    float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
-    // float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
-    float count = floor(v_arcDistrance/v_pixelLen);
+  // 设置弧线的贴图
+  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 = v_dataset.b; // 贴图在弧线上重复的数量
    float u = fract(arcRadio * count - animateSpeed * count);
    // float u = fract(arcRadio * count - animateSpeed);
    if(u_aimate.x == Animate) {
      u = gl_FragColor.a/opacity;
    }

-    float v = length(v_offset)/(v_a); // 横向
+    float v = v_dataset.a; // 线图层贴图部分的 v 坐标值

    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
    vec4 pattern = texture2D(u_texture, uv);
    
-
+    // 设置贴图和底色的叠加模式
    if(u_textureBlend == 0.0) { // normal
      pattern.a = 0.0;
      gl_FragColor = filterColor(gl_FragColor + pattern);
--- a/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
@ -12,7 +12,7 @@ uniform mat4 u_Mvp;
 uniform float segmentNumber;
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 varying vec4 v_color;
-varying vec2 v_normal;
+// varying vec2 v_normal;

 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
@ -21,11 +21,8 @@ varying vec4 v_dash_array;

 uniform float u_icon_step: 100;
 uniform float u_line_texture: 0.0;
-varying float v_segmentIndex;
-varying float v_arcDistrance;
-varying float v_pixelLen;
-varying vec2 v_offset;
-varying float v_a;
+
+varying vec4 v_dataset; // 数据集

 attribute vec2 a_iconMapUV;
 varying vec2 v_iconMapUV;
@ -183,27 +180,28 @@ void main() {
  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);
+  // 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));

-  v_segmentIndex = a_Position.x;
+  v_dataset.g = a_Position.x; // 该顶点在弧线上的分段排序
  if(LineTexture == u_line_texture) { // 开启贴图模式  
-    // v_arcDistrance = length(source - target);
    // float mapZoomScale = u_CoordinateSystem !== COORDINATE_SYSTEM_P20_2?10000000.0:1.0;
-    v_arcDistrance = length(source - target);
+    float d_arcDistrance = length(source - target);
    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap
-      v_arcDistrance = v_arcDistrance * 1000000.0;
+      d_arcDistrance = d_arcDistrance * 1000000.0;
    }
    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox
-    //   v_arcDistrance *= 10.0;
-      v_arcDistrance = project_pixel_allmap(v_arcDistrance);
+      d_arcDistrance = project_pixel_allmap(d_arcDistrance);
    }
-    v_pixelLen = project_pixel(u_icon_step)/8.0;
+    float d_pixelLen = project_pixel(u_icon_step)/8.0;
+    v_dataset.b = floor(d_arcDistrance/d_pixelLen); // 贴图在弧线上重复的数量
+
+    float lineOffsetWidth = length(offset + offset * sign(a_Position.y)); // 线横向偏移的距离
+    float linePixelSize = project_pixel(a_Size);  // 定点位置偏移，按地图等级缩放后的距离
+    v_dataset.a = lineOffsetWidth/linePixelSize;  // 线图层贴图部分的 v 坐标值

-    v_a = project_pixel(a_Size);
-    v_offset = offset + offset * sign(a_Position.y);
    v_iconMapUV = a_iconMapUV;
  }

--- a/packages/layers/src/line/shaders/line_arc_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_vert.glsl
@ -12,9 +12,8 @@ uniform mat4 u_Mvp;
 uniform float segmentNumber;
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 varying vec4 v_color;
-varying vec2 v_normal;
+// 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];
 uniform float u_lineDir: 1.0;
@ -22,14 +21,11 @@ varying vec4 v_dash_array;

 uniform float u_icon_step: 100;
 uniform float u_line_texture: 0.0;
-varying float v_segmentIndex;
-varying float v_arcDistrance;
-varying float v_pixelLen;
-varying float v_a;
-varying vec2 v_offset;
 attribute vec2 a_iconMapUV;
 varying vec2 v_iconMapUV;

+varying vec4 v_dataset; // 数据集 - 用于合并单个的 varying 变量
+
 uniform float u_opacity: 1.0;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元

@ -116,16 +112,17 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) {
 void main() {
  v_color = a_Color;
  
-
-  vec2 source = a_Instance.rg;
-  vec2 target =  a_Instance.ba;
+  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_line_type == LineTypeDash) {
-      v_distance_ratio = segmentIndex / segmentNumber;
+      d_distance_ratio = segmentIndex / segmentNumber;
+
      vec2 s = source;
      vec2 t = target;
      
@ -139,34 +136,44 @@ void main() {
  }
  
  if(u_aimate.x == Animate) {
-      v_distance_ratio = segmentIndex / segmentNumber;
+      d_distance_ratio = segmentIndex / segmentNumber;
      if(u_lineDir != 1.0) {
-        v_distance_ratio = 1.0 - v_distance_ratio;
+        d_distance_ratio = 1.0 - d_distance_ratio;
      }
  }

+  v_dataset.b = d_distance_ratio;
+
  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);
+  // 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));

-  v_segmentIndex = a_Position.x + 1.0;
+
+  float d_segmentIndex = a_Position.x + 1.0; // 当前顶点在弧线中所处的分段位置
+  v_dataset.r = d_segmentIndex;
+
  if(LineTexture == u_line_texture) { // 开启贴图模式

-    v_arcDistrance = length(source - target);
+    float arcDistrance = length(source - target); // 起始点和终点的距离
    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap
-      v_arcDistrance *= 1000000.0;
+      arcDistrance *= 1000000.0;
    }
    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox
-      // v_arcDistrance *= 8.0;
-      v_arcDistrance = project_pixel_allmap(v_arcDistrance);
+      // arcDistrance *= 8.0;
+      arcDistrance = project_pixel_allmap(arcDistrance);
    }
    v_iconMapUV = a_iconMapUV;
-    v_pixelLen = project_pixel(u_icon_step);
-    v_a = project_pixel(a_Size);
-    v_offset = offset + offset * sign(a_Position.y);
+
+    float pixelLen = project_pixel(u_icon_step); // 贴图沿弧线方向的长度 - 随地图缩放改变
+    float texCount = floor(arcDistrance/pixelLen); // 贴图在弧线上重复的数量
+    v_dataset.g = texCount;
+
+    float lineOffsetWidth = length(offset + offset * sign(a_Position.y)); // 线横向偏移的距离
+    float linePixelSize = project_pixel(a_Size); // 定点位置偏移
+    v_dataset.a = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
  }
  

--- a/packages/layers/src/line/shaders/line_frag.glsl
+++ b/packages/layers/src/line/shaders/line_frag.glsl
@ -19,7 +19,6 @@ uniform float u_dash_offset : 0.0;
 uniform float u_dash_ratio : 0.1;
 varying vec4 v_dash_array;

-varying float v_v;
 varying vec4 v_dataset; // 数据集 - distance_ratio/distance/pixelLen/texV

 varying vec2 v_iconMapUV;
@ -70,7 +69,7 @@ void main() {
    float aDistance = v_dataset.g;      // 当前顶点的距离
    float d_texPixelLen = v_dataset.b;  // 贴图的像素长度，根据地图层级缩放
    float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);
-    float v = v_dataset.a;
+    float v = v_dataset.a;  // 线图层贴图部分的 v 坐标值

    v = max(smoothstep(0.95, 1.0, v), v);
    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
@ -96,7 +95,6 @@ void main() {
  // if(rV < r || rV > 1.0 - r) {
  //   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  // } 
-  // float v = v_v;
  // if(v > 0.9) {
  //   gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0);
  // } else if(v < 0.1) {
--- a/packages/layers/src/line/shaders/line_vert.glsl
+++ b/packages/layers/src/line/shaders/line_vert.glsl
@ -29,8 +29,7 @@ varying vec4 v_dash_array;
 varying vec2 v_normal;

 varying vec4 v_dataset; // 数据集 - distance_ratio/distance/pixelLen/texV
-
-varying float v_v; // 线图层 - 贴图部分的 v 坐标（线的宽度方向）
+// texV 线图层 - 贴图部分的 v 坐标（线的宽度方向）
 varying vec2 v_iconMapUV;
 uniform float u_linearColor: 0;

@ -94,14 +93,13 @@ void main() {

  float lineOffsetWidth = length(offset + offset * sign(a_Miter)); // 线横向偏移的距离（向两侧偏移的和）
  float linePixelSize = project_pixel(a_Size.x) * 2.0;  // 定点位置偏移，按地图等级缩放后的距离 单侧 * 2
-  v_v = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
  float texV = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值

  // 设置数据集的参数
  v_dataset.r = d_distance_ratio; // 当前点位距离占线总长的比例
  v_dataset.g = a_Distance;       // 当前顶点的距离
  v_dataset.b = d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
-  v_dataset.a = texV;
+  v_dataset.a = texV;             // 线图层贴图部分的 v 坐标值

  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));

--- a/packages/layers/src/point/shaders/image_frag.glsl
+++ b/packages/layers/src/point/shaders/image_frag.glsl
@ -7,7 +7,6 @@ uniform float u_opacity : 1;

 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据

-varying float v_size;
 #pragma include "picking"
 void main(){
      float opacity = styleMappingMat[0][0];
--- a/packages/layers/src/point/shaders/image_vert.glsl
+++ b/packages/layers/src/point/shaders/image_vert.glsl
@ -9,7 +9,6 @@ uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 uniform float u_stroke_width : 1;
 uniform vec2 u_offsets;
-varying float v_size;

 uniform float u_opacity : 1;

@ -64,7 +63,7 @@ void main() {
   v_color = a_Color;
   v_uv = a_Uv;
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
-   v_size = a_Size;
+   
  //  vec2 offset = project_pixel(u_offsets);
  vec2 offset = project_pixel(textrueOffsets);

--- a/packages/layers/src/point/shaders/normal_vert.glsl
+++ b/packages/layers/src/point/shaders/normal_vert.glsl
@ -6,8 +6,6 @@ attribute float a_Size;
 attribute vec4 a_Color;
 varying vec4 v_color;

-
-
 uniform float u_opacity : 1;
 uniform vec2 u_offsets;

--- a/packages/map/package.json
+++ b/packages/map/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-map",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "l7 map",
  "keywords": [],
  "author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
  },
  "homepage": "https://github.com/antvis/L7#readme",
  "dependencies": {
-    "@antv/l7-utils": "^2.5.19",
+    "@antv/l7-utils": "^2.5.21",
    "@babel/runtime": "^7.7.7",
    "@mapbox/point-geometry": "^0.1.0",
    "@mapbox/unitbezier": "^0.0.0",
--- a/packages/maps/package.json
+++ b/packages/maps/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-maps",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -27,9 +27,9 @@
  "license": "ISC",
  "dependencies": {
    "@amap/amap-jsapi-loader": "^0.0.3",
-    "@antv/l7-core": "^2.5.19",
-    "@antv/l7-map": "^2.5.19",
-    "@antv/l7-utils": "^2.5.19",
+    "@antv/l7-core": "^2.5.21",
+    "@antv/l7-map": "^2.5.21",
+    "@antv/l7-utils": "^2.5.21",
    "@babel/runtime": "^7.7.7",
    "@types/amap-js-api": "^1.4.6",
    "@types/mapbox-gl": "^1.11.2",
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-renderer",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -26,7 +26,7 @@
    "gl": "^4.4.0"
  },
  "dependencies": {
-    "@antv/l7-core": "^2.5.19",
+    "@antv/l7-core": "^2.5.21",
    "@babel/runtime": "^7.7.7",
    "inversify": "^5.0.1",
    "l7regl": "^0.0.14",
--- a/packages/scene/package.json
+++ b/packages/scene/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-scene",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -23,12 +23,12 @@
  "author": "xiaoiver",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7-component": "^2.5.19",
-    "@antv/l7-core": "^2.5.19",
-    "@antv/l7-layers": "^2.5.19",
-    "@antv/l7-maps": "^2.5.19",
-    "@antv/l7-renderer": "^2.5.19",
-    "@antv/l7-utils": "^2.5.19",
+    "@antv/l7-component": "^2.5.21",
+    "@antv/l7-core": "^2.5.21",
+    "@antv/l7-layers": "^2.5.21",
+    "@antv/l7-maps": "^2.5.21",
+    "@antv/l7-renderer": "^2.5.21",
+    "@antv/l7-utils": "^2.5.21",
    "@babel/runtime": "^7.7.7",
    "inversify": "^5.0.1",
    "mapbox-gl": "^1.2.1",
--- a/packages/source/package.json
+++ b/packages/source/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-source",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -26,8 +26,8 @@
  "license": "ISC",
  "dependencies": {
    "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "^2.5.19",
-    "@antv/l7-utils": "^2.5.19",
+    "@antv/l7-core": "^2.5.21",
+    "@antv/l7-utils": "^2.5.21",
    "@babel/runtime": "^7.7.7",
    "@mapbox/geojson-rewind": "^0.4.0",
    "@turf/helpers": "^6.1.4",
--- a/packages/three/package.json
+++ b/packages/three/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-three",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "three for L7 ",
  "keywords": [
    "3D",
@ -44,7 +44,7 @@
  },
  "homepage": "https://github.com/antvis/L7#readme",
  "dependencies": {
-    "@antv/l7": "^2.5.19",
+    "@antv/l7": "^2.5.21",
    "@babel/runtime": "^7.7.7",
    "inversify": "^5.0.1",
    "reflect-metadata": "^0.1.13",
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-utils",
-  "version": "2.5.19",
+  "version": "2.5.21",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
--- a/stories/Components/components/Scale.tsx
+++ b/stories/Components/components/Scale.tsx
@ -81,7 +81,7 @@ export default class ScaleComponent extends React.Component {
    pointLayer.on('mouseout', (e) => {
      console.log(2, e);
    });
-    // const scaleControl = new Scale();
+    const scaleControl = new Scale();
    const layers = {
      点图层: pointLayer,
      面图层: layer,
@ -91,37 +91,12 @@ export default class ScaleComponent extends React.Component {
      position: 'bottomright',
    });

-    // scene.addControl(scaleControl);
+    scene.addControl(scaleControl);
    scene.addControl(layerControl);
-    // const zoomControl = new Zoom({
-    //   position: 'bottomright',
-    // });
-    // scene.addControl(zoomControl);
-
-    setTimeout(() => {
-      const pointLayer3 = new PointLayer({
-        name: '02',
-        enablePropagation: true,
-      })
-        .source(pointsData, {
-          cluster: true,
-        })
-        .shape('circle')
-        .scale('point_count', {
-          type: 'quantile',
-        })
-        .size('point_count', [3])
-        .animate(false)
-        .active(false)
-        .color('red')
-        .style({
-          opacity: 0.5,
-          strokeWidth: 1,
+    const zoomControl = new Zoom({
+      position: 'bottomright',
    });
-      scene.addLayer(pointLayer3);
-
-      layerControl.addVisualLayer(pointLayer3, 'pointLayer3');
-    }, 2000);
+    scene.addControl(zoomControl);
  }

  public render() {
--- a/stories/District/Layer/province.tsx
+++ b/stories/District/Layer/province.tsx
@ -219,7 +219,7 @@ export default class Country extends React.Component {
        data,
        geoDataLevel: 1,
        joinBy: ['adcode', 'code'],
-        adcode: [province],
+        adcode: [],
        stroke: '#7096B3',
        depth: 2,
        showBorder: false,
@ -244,7 +244,7 @@ export default class Country extends React.Component {
    return (
      <>
        <Select
-          defaultValue="黑龙江省"
+          defaultValue="北京市"
          style={{
            width: 120,
            zIndex: 2,
@ -252,10 +252,7 @@ export default class Country extends React.Component {
            right: '10px',
            top: '10px',
          }}
-          // onChange={this.handleProvinceChange}
-          onChange={() => {
-            console.log('change');
-          }}
+          onChange={this.handleProvinceChange}
        >
          {ProvinceData.map((province, i) => {
            return (
@ -283,7 +280,6 @@ export default class Country extends React.Component {
    this.setState({
      province: value,
    });
-    console.log('value', value);
    this.provinceLayer.updateDistrict([value]);
  };
 }
--- a/stories/Map/components/amap2demo_arcLine.tsx
+++ b/stories/Map/components/amap2demo_arcLine.tsx
@ -44,7 +44,7 @@ export default class Amap2demo_arcLine extends React.Component {
            .style({
              opacity: 0.8,
              blur: 0.99,
-              segmentNumber: 3,
+              // segmentNumber: 3,
              // lineType: 'dash',
              // dashArray: [5, 5],
            });
--- a/stories/Map/components/amap2demo_lineDash.tsx
+++ b/stories/Map/components/amap2demo_lineDash.tsx
@ -19,7 +19,7 @@ export default class Amap2demo_lineDash extends React.Component {
        zoom: 10,
        rotation: 0,
        style: 'amap://styles/wine',
-        viewMode: '2D',
+        // viewMode: '2D',
      }),
    });
    this.scene = scene;