Merge pull request #203 from antvis/arline

fix: 弧线显示有虚线存在

.storybook/config.ts

@@ -1,5 +1,5 @@
 // tslint:disable-next-line:no-submodule-imports
-import '!style-loader!css-loader!sass-loader!./iframe.scss';
+// import '!style-loader!css-loader!sass-loader!./iframe.scss';
 import { addParameters, configure } from '@storybook/react';
 import { create } from '@storybook/theming';
 

examples/line/arc/demo/arcCircle.js

@@ -27,8 +27,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
       .shape('greatcircle')
       .color('#8C1EB2')
       .style({
-        opacity: 0.8,
-        blur: 0.99
+        opacity: 0.8
       });
     scene.addLayer(layer);
   });

package.json

@@ -119,7 +119,7 @@
   "scripts": {
     "start": "yarn run site:clean && yarn run site:develop",
     "site:develop": "cross-env BABEL_ENV=site gatsby develop --open -H 0.0.0.0",
-    "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths --no-uglify",
+    "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths",
     "site:clean": "gatsby clean",
     "site:deploy": "yarn run site:build && gh-pages -d public",
     "site:publish": "gh-pages -d public",

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

@@ -12,7 +12,7 @@ import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
 import line_arc_frag from '../shaders/line_arc_frag.glsl';
-import line_arc2d_vert from '../shaders/line_bezier_vert.glsl';
+import line_arc2d_vert from '../shaders/line_arc_vert.glsl';
 const lineStyleObj: { [key: string]: number } = {
   solid: 0.0,
   dash: 1.0,

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

@@ -10,8 +10,8 @@ import {
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
+import line_arc_vert from '../shaders/line_arc_3d_vert.glsl';
 import line_arc_frag from '../shaders/line_arc_frag.glsl';
-import line_arc_vert from '../shaders/line_arc_vert.glsl';
 const lineStyleObj: { [key: string]: number } = {
   solid: 0.0,
   dash: 1.0,

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

@@ -11,8 +11,8 @@ import {
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
-import line_arc2d_vert from '../shaders/line_arc2d_vert.glsl';
 import line_arc_frag from '../shaders/line_arc_frag.glsl';
+import line_arc2d_vert from '../shaders/line_arc_great_circle_vert.glsl';
 const lineStyleObj: { [key: string]: number } = {
   solid: 0.0,
   dash: 1.0,

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

@@ -0,0 +1,91 @@
+#define LineTypeSolid 0.0
+#define LineTypeDash 1.0
+#define Animate 0.0
+attribute vec3 a_Position;
+attribute vec4 a_Instance;
+attribute vec4 a_Color;
+attribute float a_Size;
+
+uniform mat4 u_ModelMatrix;
+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;
+uniform float u_line_type: 0.0;
+uniform vec2 u_dash_array: [10.0, 5.];
+
+varying vec2 v_dash_array;
+
+#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 smoothstep(0.0, 1.0, index / (segmentNumber - 1.0));
+}
+
+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 * 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;
+  vec2 source = project_position(vec4(a_Instance.rg, 0, 0)).xy;
+  vec2 target = project_position(vec4(a_Instance.ba, 0, 0)).xy;
+  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;
+    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_aimate.x == Animate) {
+      v_distance_ratio = segmentIndex / segmentNumber;
+  }
+
+  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);
+
+  gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
+  setPickingColor(a_PickingColor);
+}

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

@@ -18,7 +18,7 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 void main() {
   gl_FragColor = v_color;
   float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
-  gl_FragColor.a *= (blur * u_opacity);
+  gl_FragColor.a *= u_opacity * blur;
   if(u_line_type == LineTypeDash) {
     gl_FragColor.a *= blur  * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
   }

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

@@ -50,7 +50,7 @@ vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {
   // rotate by 90 degrees
    dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
   vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0;
-  return offset * vec2(1.0, -1.0);
+  return offset;
 }
 vec2 getNormal(vec2 line_clipspace, float offset_direction) {
   // normalized direction of the line

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

@@ -1,91 +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 vec4 a_Color;
 attribute float a_Size;
-
 uniform mat4 u_ModelMatrix;
 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;
 uniform float u_line_type: 0.0;
 uniform vec2 u_dash_array: [10.0, 5.];
-
 varying vec2 v_dash_array;
-
 #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 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.0));
+    return smoothstep(0.0, 1.0, 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 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);
-
+   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
   vec2 offset = dir_screenspace * offset_direction * 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);
+   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 = project_position(vec4(a_Instance.rg, 0, 0)).xy;
-  vec2 target = project_position(vec4(a_Instance.ba, 0, 0)).xy;
+  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));
-
-   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_aimate.x == Animate) {
+  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_aimate.x == Animate) {
       v_distance_ratio = segmentIndex / segmentNumber;
   }
-
-  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);
+  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 + project_pixel(offset), curr.z, 1.0));
+  gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
   setPickingColor(a_PickingColor);
 }

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

@@ -1,85 +0,0 @@
-#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_aimate: [ 0, 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 vec2 u_dash_array: [10.0, 5.];
-varying vec2 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 * 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_aimate.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);
-}

stories/Layers/components/Arc2DLine.tsx

@@ -23,28 +23,28 @@ export default class Arc2DLineDemo extends React.Component {
         zoom: 2,
       }),
     });
-    const lineLayer = new LineLayer()
+    const lineLayer = new LineLayer({
+      blend: 'normal',
+    })
       .source(await response.text(), {
         parser: {
           type: 'csv',
-          x: 'lng1',
-          y: 'lat1',
-          x1: 'lng2',
-          y1: 'lat2',
+          x1: 'lng1',
+          y1: 'lat1',
+          x: 'lng2',
+          y: 'lat2',
         },
       })
-      .size(4)
-      .shape('greatcircle')
-      .color('rgb(13,64,140)')
-      .animate({
-        interval: 0.5,
-        duration: 2,
-        trailLength: 0.4,
-      })
+      .size(3)
+      .shape('arc')
+      .color('#8C1EB2')
       .style({
-        opacity: 0.1,
+        opacity: 1,
       });
     scene.addLayer(lineLayer);
+    lineLayer.on('click', (e) => {
+      console.log(e);
+    });
     scene.render();
     this.scene = scene;
   }