@antv/l7-layers 2.16.0 → 2.16.1

package/es/line/models/arc.js

@@ -7,49 +7,68 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConst
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 import { AttributeType, gl } from '@antv/l7-core';
 import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from "../../core/BaseModel";
-import { LineArcTriangulation } from "../../core/triangulation";
-// arc dash line
+import { LineArcTriangulation } from "../../core/triangulation"; // arc dash line
+
 /* babel-plugin-inline-import '../shaders/dash/arc_dash_frag.glsl' */
 var arc_dash_frag = "\nuniform float u_opacity;\n\nvarying vec4 v_dash_array;\nvarying vec4 v_color;\n\nuniform float segmentNumber;\n\nvarying mat4 styleMappingMat; // \u4F20\u9012\u4ECE\u7247\u5143\u4E2D\u4F20\u9012\u7684\u6620\u5C04\u6570\u636E\n\n#pragma include \"picking\"\n\nvoid main() {\n  float opacity = styleMappingMat[0][0];\n  float d_distance_ratio = styleMappingMat[3].b; // \u5F53\u524D\u9876\u70B9\u5728\u5F27\u7EBF\u4E2D\u6240\u5904\u7684\u5206\u6BB5\u6BD4\u4F8B\n\n  gl_FragColor = v_color;\n  gl_FragColor.a *= opacity;\n\n  float flag = 0.;\n  float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);\n  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)) {\n    flag = 1.;\n  };\n  gl_FragColor.a *=flag;\n  \n  gl_FragColor = filterColor(gl_FragColor);\n}";
+
 /* babel-plugin-inline-import '../shaders/dash/arc_dash_vert.glsl' */
 var arc_dash_vert = "\nattribute vec4 a_Color;\nattribute vec3 a_Position;\nattribute vec4 a_Instance;\nattribute float a_Size;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nuniform float segmentNumber;\nvarying vec4 v_color;\n\n\nuniform vec4 u_dash_array: [10.0, 5., 0, 0];\nuniform float u_lineDir: 1.0;\nvarying vec4 v_dash_array;\n\nuniform float u_thetaOffset: 0.314;\n\nuniform float u_opacity: 1.0;\nvarying mat4 styleMappingMat; // \u7528\u4E8E\u5C06\u5728\u9876\u70B9\u7740\u8272\u5668\u4E2D\u8BA1\u7B97\u597D\u7684\u6837\u5F0F\u503C\u4F20\u9012\u7ED9\u7247\u5143\n\n#pragma include \"styleMapping\"\n#pragma include \"styleMappingCalOpacity\"\n#pragma include \"styleMappingCalThetaOffset\"\n\n#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"picking\"\n\nfloat bezier3(vec3 arr, float t) {\n  float ut = 1. - t;\n  return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t;\n}\nvec2 midPoint(vec2 source, vec2 target, float arcThetaOffset) {\n  vec2 center = target - source;\n  float r = length(center);\n  float theta = atan(center.y, center.x);\n  float thetaOffset = arcThetaOffset;\n  float r2 = r / 2.0 / cos(thetaOffset);\n  float theta2 = theta + thetaOffset;\n  vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y);\n  if(u_lineDir == 1.0) { // \u6B63\u5411\n    return mid;\n  } else { // \u9006\u5411\n    // (mid + vmin)/2 = (s + t)/2\n    vec2 vmid = source + target - mid;\n    return vmid;\n  }\n  // return mid;\n}\nfloat getSegmentRatio(float index) {\n  // dash: index / (segmentNumber - 1.);\n  // normal: smoothstep(0.0, 1.0, index / (segmentNumber - 1.));\n  return index / (segmentNumber - 1.);\n}\nvec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) {\n  // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation\n  vec2 mid = midPoint(source, target, arcThetaOffset);\n  vec3 x = vec3(source.x, mid.x, target.x);\n  vec3 y = vec3(source.y, mid.y, target.y);\n  return vec2(bezier3(x ,t), bezier3(y,t));\n}\nvec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {\n  // normalized direction of the line\n  vec2 dir_screenspace = normalize(line_clipspace);\n  // rotate by 90 degrees\n   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);\n  vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0;\n  return offset;\n}\nvec2 getNormal(vec2 line_clipspace, float offset_direction) {\n  // normalized direction of the line\n  vec2 dir_screenspace = normalize(line_clipspace);\n  // rotate by 90 degrees\n   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);\n   return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction);\n}\n\nvoid main() {\n  v_color = a_Color;\n\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n  styleMappingMat = mat4(\n    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty\n    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA\n    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]\n    0.0, 0.0, 0.0, 0.0  // dataset \u6570\u636E\u96C6\n  );\n\n  float rowCount = u_cellTypeLayout[0][0];    // \u5F53\u524D\u7684\u6570\u636E\u7EB9\u7406\u6709\u51E0\u884C\n  float columnCount = u_cellTypeLayout[0][1]; // \u5F53\u770B\u5230\u6570\u636E\u7EB9\u7406\u6709\u51E0\u5217\n  float columnWidth = 1.0/columnCount;  // \u5217\u5BBD\n  float rowHeight = 1.0/rowCount;       // \u884C\u9AD8\n  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets\n  float id = a_vertexId; // \u7B2Cn\u4E2A\u9876\u70B9\n  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // \u8D77\u59CB\u70B9\u5728\u7B2C\u51E0\u884C\n  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // \u8D77\u59CB\u70B9\u5728\u7B2C\u51E0\u5217\n  \n  // cell \u56FA\u5B9A\u987A\u5E8F opacity -> strokeOpacity -> strokeWidth -> stroke -> thetaOffset... \n  // \u6309\u987A\u5E8F\u4ECE cell \u4E2D\u53D6\u503C\u3001\u82E5\u6CA1\u6709\u5219\u81EA\u52A8\u5F80\u4E0B\u53D6\u503C\n  float textureOffset = 0.0; // \u5728 cell \u4E2D\u53D6\u503C\u7684\u504F\u79FB\u91CF\n\n  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);\n  styleMappingMat[0][0] = opacityAndOffset.r;\n  textureOffset = opacityAndOffset.g;\n\n  vec2 thetaOffsetAndOffset = calThetaOffsetAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);\n  styleMappingMat[0][1] = thetaOffsetAndOffset.r;\n  textureOffset = thetaOffsetAndOffset.g;\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n\n  \n  vec2 source = a_Instance.rg;  // \u8D77\u59CB\u70B9\n  vec2 target =  a_Instance.ba; // \u7EC8\u70B9\n  float segmentIndex = a_Position.x;\n  float segmentRatio = getSegmentRatio(segmentIndex);\n\n  float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));\n  float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);\n\n  vec2 s = source;\n  vec2 t = target;\n  \n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    s = unProjCustomCoord(source);\n    t = unProjCustomCoord(target);\n  }\n  float total_Distance = pixelDistance(s, t) / 2.0 * PI;\n  v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / total_Distance;\n\n  styleMappingMat[3].b = segmentIndex / segmentNumber;\n\n  // styleMappingMat[0][1] - arcThetaOffset\n  vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, styleMappingMat[0][1]), 0.0, 1.0));\n  vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, styleMappingMat[0][1]), 0.0, 1.0));\n  // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);\n  //unProjCustomCoord\n  \n  vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));\n  \n\n  // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    // gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));\n    gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));\n  } else {\n    gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));\n  }\n  gl_PointSize = 5.0;\n  setPickingColor(a_PickingColor);\n}\n"; // arc normal line
+
 /* babel-plugin-inline-import '../shaders/line_arc_frag.glsl' */
 var arc_line_frag = "\n#define Animate 0.0\n#define LineTexture 1.0\n\nuniform float u_opacity;\nuniform float u_textureBlend;\nuniform float u_blur : 0.9;\nuniform float u_line_type: 0.0;\n// varying vec2 v_normal;\nvarying vec4 v_dash_array;\nvarying vec4 v_color;\n\nuniform float u_time;\nuniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];\n\nuniform float u_line_texture;\nuniform sampler2D u_texture;\nuniform vec2 u_textSize;\n\nuniform float segmentNumber;\nvarying vec2 v_iconMapUV;\n\nvarying mat4 styleMappingMat; // \u4F20\u9012\u4ECE\u7247\u5143\u4E2D\u4F20\u9012\u7684\u6620\u5C04\u6570\u636E\n\n#pragma include \"picking\"\n\nvoid main() {\n  float opacity = styleMappingMat[0][0];\n  float animateSpeed = 0.0; // \u8FD0\u52A8\u901F\u5EA6\n  float d_segmentIndex = styleMappingMat[3].r;   // \u5F53\u524D\u9876\u70B9\u5728\u5F27\u7EBF\u4E2D\u6240\u5904\u7684\u5206\u6BB5\u4F4D\u7F6E\n  float d_distance_ratio = styleMappingMat[3].b; // \u5F53\u524D\u9876\u70B9\u5728\u5F27\u7EBF\u4E2D\u6240\u5904\u7684\u5206\u6BB5\u6BD4\u4F8B\n\n  gl_FragColor = v_color;\n  \n  gl_FragColor.a *= opacity;\n\n  if(u_animate.x == Animate && u_line_texture != LineTexture) {\n      animateSpeed = u_time / u_animate.y;\n      float alpha =1.0 - fract( mod(1.0- d_distance_ratio, u_animate.z)* (1.0/ u_animate.z) + u_time / u_animate.y);\n      alpha = (alpha + u_animate.w -1.0) / u_animate.w;\n      // alpha = smoothstep(0., 1., alpha);\n      alpha = clamp(alpha, 0.0, 1.0);\n      gl_FragColor.a *= alpha;\n  }\n\n  // \u5F53\u5B58\u5728\u8D34\u56FE\u65F6\u5728\u5E95\u8272\u4E0A\u8D34\u4E0A\u8D34\u56FE\n  if(u_line_texture == LineTexture) { // while load texture\n    float arcRadio = smoothstep( 0.0, 1.0, (d_segmentIndex / segmentNumber));\n    // float arcRadio = smoothstep( 0.0, 1.0, d_distance_ratio);\n\n    float count = styleMappingMat[3].g; // \u8D34\u56FE\u5728\u5F27\u7EBF\u4E0A\u91CD\u590D\u7684\u6570\u91CF\n\n    float time = 0.0;\n    if(u_animate.x == Animate) {\n      time = u_time / u_animate.y;\n    }\n    float redioCount = arcRadio * count;\n\n    float u = fract(redioCount - time);\n    float v = styleMappingMat[3].a; // \u6A2A\u5411 v\n    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;\n\n    vec4 pattern = texture2D(u_texture, uv);\n\n    if(u_animate.x == Animate) {\n      float currentPlane = floor(redioCount - time);\n      float textureStep = floor(count * u_animate.z);\n      float a = mod(currentPlane, textureStep);\n      if(a < textureStep - 1.0) {\n        pattern = vec4(0.0);\n      }\n    }\n\n    if(u_textureBlend == 0.0) { // normal\n      pattern.a = 0.0;\n      gl_FragColor = filterColor(gl_FragColor + pattern);\n    } else { // replace\n        pattern.a *= opacity;\n        if(gl_FragColor.a <= 0.0) {\n          pattern.a = 0.0;\n        }\n        gl_FragColor = filterColor(pattern);\n    }\n    \n  } else {\n     gl_FragColor = filterColor(gl_FragColor);\n  }\n}";
+
 /* babel-plugin-inline-import '../shaders/line_arc_vert.glsl' */
 var arc_line_vert = "#define Animate 0.0\n#define LineTexture 1.0\n\nattribute vec4 a_Color;\nattribute vec3 a_Position;\nattribute vec4 a_Instance;\nattribute float a_Size;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nuniform float segmentNumber;\nuniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];\nvarying vec4 v_color;\n\nuniform float u_lineDir: 1.0;\n\nuniform float u_thetaOffset: 0.314;\nuniform float u_icon_step: 100;\nuniform float u_line_texture: 0.0;\nattribute vec2 a_iconMapUV;\nvarying vec2 v_iconMapUV;\n\nuniform float u_opacity: 1.0;\nvarying mat4 styleMappingMat; // \u7528\u4E8E\u5C06\u5728\u9876\u70B9\u7740\u8272\u5668\u4E2D\u8BA1\u7B97\u597D\u7684\u6837\u5F0F\u503C\u4F20\u9012\u7ED9\u7247\u5143\n\n#pragma include \"styleMapping\"\n#pragma include \"styleMappingCalOpacity\"\n#pragma include \"styleMappingCalThetaOffset\"\n\n#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"picking\"\n\nfloat bezier3(vec3 arr, float t) {\n  float ut = 1. - t;\n  return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t;\n}\nvec2 midPoint(vec2 source, vec2 target, float arcThetaOffset) {\n  vec2 center = target - source;\n  float r = length(center);\n  float theta = atan(center.y, center.x);\n  float thetaOffset = arcThetaOffset;\n  float r2 = r / 2.0 / cos(thetaOffset);\n  float theta2 = theta + thetaOffset;\n  vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y);\n  if(u_lineDir == 1.0) { // \u6B63\u5411\n    return mid;\n  } else { // \u9006\u5411\n    // (mid + vmin)/2 = (s + t)/2\n    vec2 vmid = source + target - mid;\n    return vmid;\n  }\n  // return mid;\n}\nfloat getSegmentRatio(float index) {\n    // dash: index / (segmentNumber - 1.);\n    // normal: smoothstep(0.0, 1.0, index / (segmentNumber - 1.));\n    return smoothstep(0.0, 1.0, index / (segmentNumber - 1.));\n    //  return index / (segmentNumber - 1.);\n}\nvec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) {\n  // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation\n  vec2 mid = midPoint(source, target, arcThetaOffset);\n  vec3 x = vec3(source.x, mid.x, target.x);\n  vec3 y = vec3(source.y, mid.y, target.y);\n  return vec2(bezier3(x ,t), bezier3(y,t));\n}\nvec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {\n  // normalized direction of the line\n  vec2 dir_screenspace = normalize(line_clipspace);\n  // rotate by 90 degrees\n   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);\n  vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0;\n  return offset;\n}\nvec2 getNormal(vec2 line_clipspace, float offset_direction) {\n  // normalized direction of the line\n  vec2 dir_screenspace = normalize(line_clipspace);\n  // rotate by 90 degrees\n   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);\n   return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction);\n}\n\nvoid main() {\n  v_color = a_Color;\n\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n  styleMappingMat = mat4(\n    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty\n    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA\n    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]\n    0.0, 0.0, 0.0, 0.0  // dataset \u6570\u636E\u96C6\n  );\n\n  float rowCount = u_cellTypeLayout[0][0];    // \u5F53\u524D\u7684\u6570\u636E\u7EB9\u7406\u6709\u51E0\u884C\n  float columnCount = u_cellTypeLayout[0][1]; // \u5F53\u770B\u5230\u6570\u636E\u7EB9\u7406\u6709\u51E0\u5217\n  float columnWidth = 1.0/columnCount;  // \u5217\u5BBD\n  float rowHeight = 1.0/rowCount;       // \u884C\u9AD8\n  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets\n  float id = a_vertexId; // \u7B2Cn\u4E2A\u9876\u70B9\n  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // \u8D77\u59CB\u70B9\u5728\u7B2C\u51E0\u884C\n  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // \u8D77\u59CB\u70B9\u5728\u7B2C\u51E0\u5217\n  \n  // cell \u56FA\u5B9A\u987A\u5E8F opacity -> strokeOpacity -> strokeWidth -> stroke -> thetaOffset... \n  // \u6309\u987A\u5E8F\u4ECE cell \u4E2D\u53D6\u503C\u3001\u82E5\u6CA1\u6709\u5219\u81EA\u52A8\u5F80\u4E0B\u53D6\u503C\n  float textureOffset = 0.0; // \u5728 cell \u4E2D\u53D6\u503C\u7684\u504F\u79FB\u91CF\n\n  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);\n  styleMappingMat[0][0] = opacityAndOffset.r;\n  textureOffset = opacityAndOffset.g;\n\n  vec2 thetaOffsetAndOffset = calThetaOffsetAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);\n  styleMappingMat[0][1] = thetaOffsetAndOffset.r;\n  textureOffset = thetaOffsetAndOffset.g;\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n\n  \n  vec2 source = a_Instance.rg;  // \u8D77\u59CB\u70B9\n  vec2 target =  a_Instance.ba; // \u7EC8\u70B9\n  float segmentIndex = a_Position.x;\n  float segmentRatio = getSegmentRatio(segmentIndex);\n\n  float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));\n  float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);\n  float d_distance_ratio;\n  \n  if(u_animate.x == Animate) {\n      d_distance_ratio = segmentIndex / segmentNumber;\n      if(u_lineDir != 1.0) {\n        d_distance_ratio = 1.0 - d_distance_ratio;\n      }\n  }\n\n   styleMappingMat[3].b = d_distance_ratio;\n\n  // styleMappingMat[0][1] - arcThetaOffset\n  float arcThetaOffset = styleMappingMat[0][1];\n  vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, arcThetaOffset), 0.0, 1.0));\n  vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, arcThetaOffset), 0.0, 1.0));\n  // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);\n  //unProjCustomCoord\n  \n  vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));\n\n\n  float d_segmentIndex = a_Position.x + 1.0; // \u5F53\u524D\u9876\u70B9\u5728\u5F27\u7EBF\u4E2D\u6240\u5904\u7684\u5206\u6BB5\u4F4D\u7F6E\n  styleMappingMat[3].r = d_segmentIndex;\n\n  if(LineTexture == u_line_texture) { // \u5F00\u542F\u8D34\u56FE\u6A21\u5F0F\n\n    float arcDistrance = length(source - target); // \u8D77\u59CB\u70B9\u548C\u7EC8\u70B9\u7684\u8DDD\u79BB\n    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap\n      arcDistrance *= 1000000.0;\n    }\n    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox\n      // arcDistrance *= 8.0;\n      arcDistrance = project_pixel_allmap(arcDistrance);\n    }\n    v_iconMapUV = a_iconMapUV;\n\n    float pixelLen = project_pixel_texture(u_icon_step); // \u8D34\u56FE\u6CBF\u5F27\u7EBF\u65B9\u5411\u7684\u957F\u5EA6 - \u968F\u5730\u56FE\u7F29\u653E\u6539\u53D8\n    float texCount = floor(arcDistrance/pixelLen); // \u8D34\u56FE\u5728\u5F27\u7EBF\u4E0A\u91CD\u590D\u7684\u6570\u91CF\n     styleMappingMat[3].g = texCount;\n\n    float lineOffsetWidth = length(offset + offset * sign(a_Position.y)); // \u7EBF\u6A2A\u5411\u504F\u79FB\u7684\u8DDD\u79BB\n    float linePixelSize = project_pixel(a_Size); // \u5B9A\u70B9\u4F4D\u7F6E\u504F\u79FB\n     styleMappingMat[3].a = lineOffsetWidth/linePixelSize; // \u7EBF\u56FE\u5C42\u8D34\u56FE\u90E8\u5206\u7684 v \u5750\u6807\u503C\n  }\n  \n\n  // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    // gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));\n    gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));\n  } else {\n    gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));\n  }\n  setPickingColor(a_PickingColor);\n}\n"; // arc linear line
+
 /* babel-plugin-inline-import '../shaders/linear/arc_linear_frag.glsl' */
 var arc_linear_frag = "#define Animate 0.0\n#define LineTexture 1.0\n\nuniform float u_opacity;\nuniform float u_textureBlend;\nuniform float u_blur : 0.9;\nuniform float u_line_type: 0.0;\n// varying vec2 v_normal;\nvarying vec4 v_dash_array;\nvarying vec4 v_color;\n\nuniform float u_time;\nuniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];\n\nuniform float u_line_texture;\nuniform sampler2D u_texture;\nuniform vec2 u_textSize;\n\nuniform float segmentNumber;\nvarying vec2 v_iconMapUV;\n\nvarying mat4 styleMappingMat; // \u4F20\u9012\u4ECE\u7247\u5143\u4E2D\u4F20\u9012\u7684\u6620\u5C04\u6570\u636E\n\nuniform float u_linearColor: 0;\nuniform vec4 u_sourceColor;\nuniform vec4 u_targetColor;\n\n#pragma include \"picking\"\n\nvoid main() {\n  float opacity = styleMappingMat[0][0];\n  float d_segmentIndex = styleMappingMat[3].r;   // \u5F53\u524D\u9876\u70B9\u5728\u5F27\u7EBF\u4E2D\u6240\u5904\u7684\u5206\u6BB5\u4F4D\u7F6E\n\n  // \u8BBE\u7F6E\u5F27\u7EBF\u7684\u5E95\u8272\n  gl_FragColor = mix(u_sourceColor, u_targetColor, d_segmentIndex/segmentNumber);\n  gl_FragColor.a *= opacity;\n  gl_FragColor = filterColor(gl_FragColor);\n}";
+
 /* babel-plugin-inline-import '../shaders/linear/arc_linear_vert.glsl' */
 var arc_linear_vert = "\nattribute vec4 a_Color;\nattribute vec3 a_Position;\nattribute vec4 a_Instance;\nattribute float a_Size;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nuniform float segmentNumber;\nvarying vec4 v_color;\n\nuniform float u_lineDir: 1.0;\n\nuniform float u_thetaOffset: 0.314;\n\nuniform float u_opacity: 1.0;\nvarying mat4 styleMappingMat; // \u7528\u4E8E\u5C06\u5728\u9876\u70B9\u7740\u8272\u5668\u4E2D\u8BA1\u7B97\u597D\u7684\u6837\u5F0F\u503C\u4F20\u9012\u7ED9\u7247\u5143\n\n#pragma include \"styleMapping\"\n#pragma include \"styleMappingCalOpacity\"\n#pragma include \"styleMappingCalThetaOffset\"\n\n#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"picking\"\n\nfloat bezier3(vec3 arr, float t) {\n  float ut = 1. - t;\n  return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t;\n}\nvec2 midPoint(vec2 source, vec2 target, float arcThetaOffset) {\n  vec2 center = target - source;\n  float r = length(center);\n  float theta = atan(center.y, center.x);\n  float thetaOffset = arcThetaOffset;\n  float r2 = r / 2.0 / cos(thetaOffset);\n  float theta2 = theta + thetaOffset;\n  vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y);\n  if(u_lineDir == 1.0) { // \u6B63\u5411\n    return mid;\n  } else { // \u9006\u5411\n    // (mid + vmin)/2 = (s + t)/2\n    vec2 vmid = source + target - mid;\n    return vmid;\n  }\n  // return mid;\n}\nfloat getSegmentRatio(float index) {\n    return smoothstep(0.0, 1.0, index / (segmentNumber - 1.));\n}\nvec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) {\n  // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation\n  vec2 mid = midPoint(source, target, arcThetaOffset);\n  vec3 x = vec3(source.x, mid.x, target.x);\n  vec3 y = vec3(source.y, mid.y, target.y);\n  return vec2(bezier3(x ,t), bezier3(y,t));\n}\nvec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {\n  // normalized direction of the line\n  vec2 dir_screenspace = normalize(line_clipspace);\n  // rotate by 90 degrees\n   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);\n  vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0;\n  return offset;\n}\nvec2 getNormal(vec2 line_clipspace, float offset_direction) {\n  // normalized direction of the line\n  vec2 dir_screenspace = normalize(line_clipspace);\n  // rotate by 90 degrees\n   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);\n   return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction);\n}\n\nvoid main() {\n  v_color = a_Color;\n\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n  styleMappingMat = mat4(\n    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty\n    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA\n    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]\n    0.0, 0.0, 0.0, 0.0  // dataset \u6570\u636E\u96C6\n  );\n\n  float rowCount = u_cellTypeLayout[0][0];    // \u5F53\u524D\u7684\u6570\u636E\u7EB9\u7406\u6709\u51E0\u884C\n  float columnCount = u_cellTypeLayout[0][1]; // \u5F53\u770B\u5230\u6570\u636E\u7EB9\u7406\u6709\u51E0\u5217\n  float columnWidth = 1.0/columnCount;  // \u5217\u5BBD\n  float rowHeight = 1.0/rowCount;       // \u884C\u9AD8\n  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets\n  float id = a_vertexId; // \u7B2Cn\u4E2A\u9876\u70B9\n  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // \u8D77\u59CB\u70B9\u5728\u7B2C\u51E0\u884C\n  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // \u8D77\u59CB\u70B9\u5728\u7B2C\u51E0\u5217\n  \n  // cell \u56FA\u5B9A\u987A\u5E8F opacity -> strokeOpacity -> strokeWidth -> stroke -> thetaOffset... \n  // \u6309\u987A\u5E8F\u4ECE cell \u4E2D\u53D6\u503C\u3001\u82E5\u6CA1\u6709\u5219\u81EA\u52A8\u5F80\u4E0B\u53D6\u503C\n  float textureOffset = 0.0; // \u5728 cell \u4E2D\u53D6\u503C\u7684\u504F\u79FB\u91CF\n\n  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);\n  styleMappingMat[0][0] = opacityAndOffset.r;\n  textureOffset = opacityAndOffset.g;\n\n  vec2 thetaOffsetAndOffset = calThetaOffsetAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);\n  styleMappingMat[0][1] = thetaOffsetAndOffset.r;\n  textureOffset = thetaOffsetAndOffset.g;\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n\n  \n  vec2 source = a_Instance.rg;  // \u8D77\u59CB\u70B9\n  vec2 target =  a_Instance.ba; // \u7EC8\u70B9\n  float segmentIndex = a_Position.x;\n  float segmentRatio = getSegmentRatio(segmentIndex);\n\n  float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));\n  float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);\n  float d_distance_ratio;\n\n   styleMappingMat[3].b = d_distance_ratio;\n\n  // styleMappingMat[0][1] - arcThetaOffset\n  vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, styleMappingMat[0][1]), 0.0, 1.0));\n  vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, styleMappingMat[0][1]), 0.0, 1.0));\n  // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);\n  //unProjCustomCoord\n  \n  vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));\n\n\n  float d_segmentIndex = a_Position.x + 1.0; // \u5F53\u524D\u9876\u70B9\u5728\u5F27\u7EBF\u4E2D\u6240\u5904\u7684\u5206\u6BB5\u4F4D\u7F6E\n  styleMappingMat[3].r = d_segmentIndex;\n\n  // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    // gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));\n    gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));\n  } else {\n    gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));\n  }\n  setPickingColor(a_PickingColor);\n}\n";
 var lineStyleObj = {
   solid: 0.0,
   dash: 1.0
 };
+
 var ArcModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(ArcModel, _BaseModel);
+
   var _super = _createSuper(ArcModel);
+
   function ArcModel() {
     var _this;
+
     _classCallCheck(this, ArcModel);
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
+
     _this = _super.call.apply(_super, [this].concat(args));
+
     _defineProperty(_assertThisInitialized(_this), "updateTexture", function () {
       var createTexture2D = _this.rendererService.createTexture2D;
+
       if (_this.texture) {
         _this.texture.update({
           data: _this.iconService.getCanvas()
         });
+
         _this.layer.render();
+
         return;
       }
+
       _this.texture = createTexture2D({
         data: _this.iconService.getCanvas(),
         mag: gl.NEAREST,
@@ -59,32 +78,35 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
         height: _this.iconService.canvasHeight || 128
       });
     });
+
     return _this;
   }
+
   _createClass(ArcModel, [{
     key: "getUninforms",
     value: function getUninforms() {
       var _ref = this.layer.getLayerConfig(),
-        _ref$opacity = _ref.opacity,
-        opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
-        sourceColor = _ref.sourceColor,
-        targetColor = _ref.targetColor,
-        _ref$textureBlend = _ref.textureBlend,
-        textureBlend = _ref$textureBlend === void 0 ? 'normal' : _ref$textureBlend,
-        _ref$lineType = _ref.lineType,
-        lineType = _ref$lineType === void 0 ? 'solid' : _ref$lineType,
-        _ref$dashArray = _ref.dashArray,
-        dashArray = _ref$dashArray === void 0 ? [10, 5] : _ref$dashArray,
-        _ref$forward = _ref.forward,
-        forward = _ref$forward === void 0 ? true : _ref$forward,
-        _ref$lineTexture = _ref.lineTexture,
-        lineTexture = _ref$lineTexture === void 0 ? false : _ref$lineTexture,
-        _ref$iconStep = _ref.iconStep,
-        iconStep = _ref$iconStep === void 0 ? 100 : _ref$iconStep,
-        _ref$segmentNumber = _ref.segmentNumber,
-        segmentNumber = _ref$segmentNumber === void 0 ? 30 : _ref$segmentNumber,
-        _ref$thetaOffset = _ref.thetaOffset,
-        thetaOffset = _ref$thetaOffset === void 0 ? 0.314 : _ref$thetaOffset;
+          _ref$opacity = _ref.opacity,
+          opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+          sourceColor = _ref.sourceColor,
+          targetColor = _ref.targetColor,
+          _ref$textureBlend = _ref.textureBlend,
+          textureBlend = _ref$textureBlend === void 0 ? 'normal' : _ref$textureBlend,
+          _ref$lineType = _ref.lineType,
+          lineType = _ref$lineType === void 0 ? 'solid' : _ref$lineType,
+          _ref$dashArray = _ref.dashArray,
+          dashArray = _ref$dashArray === void 0 ? [10, 5] : _ref$dashArray,
+          _ref$forward = _ref.forward,
+          forward = _ref$forward === void 0 ? true : _ref$forward,
+          _ref$lineTexture = _ref.lineTexture,
+          lineTexture = _ref$lineTexture === void 0 ? false : _ref$lineTexture,
+          _ref$iconStep = _ref.iconStep,
+          iconStep = _ref$iconStep === void 0 ? 100 : _ref$iconStep,
+          _ref$segmentNumber = _ref.segmentNumber,
+          segmentNumber = _ref$segmentNumber === void 0 ? 30 : _ref$segmentNumber,
+          _ref$thetaOffset = _ref.thetaOffset,
+          thetaOffset = _ref$thetaOffset === void 0 ? 0.314 : _ref$thetaOffset;
+
       if (this.dataTextureTest && this.dataTextureNeedUpdate({
         opacity: opacity,
         thetaOffset: thetaOffset
@@ -94,10 +116,12 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
           thetaOffset: thetaOffset
         });
         var encodeData = this.layer.getEncodedData();
+
         var _this$calDataFrame = this.calDataFrame(this.cellLength, encodeData, this.cellProperties),
-          data = _this$calDataFrame.data,
-          width = _this$calDataFrame.width,
-          height = _this$calDataFrame.height;
+            data = _this$calDataFrame.data,
+            width = _this$calDataFrame.width,
+            height = _this$calDataFrame.height;
+
         this.rowCount = height; // 当前数据纹理有多少行
 
         this.dataTexture = this.cellLength > 0 && data.length > 0 ? this.createTexture2D({
@@ -116,22 +140,27 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
           height: 1
         });
       }
+
       if (dashArray.length === 2) {
         dashArray.push(0, 0);
-      }
+      } // 转化渐变色
+
 
-      // 转化渐变色
       var useLinearColor = 0; // 默认不生效
+
       var sourceColorArr = [0, 0, 0, 0];
       var targetColorArr = [0, 0, 0, 0];
+
       if (sourceColor && targetColor) {
         sourceColorArr = rgb2arr(sourceColor);
         targetColorArr = rgb2arr(targetColor);
         useLinearColor = 1;
       }
+
       if (this.rendererService.getDirty()) {
         this.texture.bind();
       }
+
       return {
         u_dataTexture: this.dataTexture,
         // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
@@ -162,7 +191,8 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
     key: "getAnimateUniforms",
     value: function getAnimateUniforms() {
       var _ref2 = this.layer.getLayerConfig(),
-        animateOption = _ref2.animateOption;
+          animateOption = _ref2.animateOption;
+
       return {
         u_animate: this.animateOption2Array(animateOption),
         u_time: this.layer.getLayerAnimateTime()
@@ -173,26 +203,32 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
     value: function () {
       var _initModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              this.updateTexture();
-              this.iconService.on('imageUpdate', this.updateTexture);
-              return _context.abrupt("return", this.buildModels());
-            case 3:
-            case "end":
-              return _context.stop();
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                this.updateTexture();
+                this.iconService.on('imageUpdate', this.updateTexture);
+                return _context.abrupt("return", this.buildModels());
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
           }
         }, _callee, this);
       }));
+
       function initModels() {
         return _initModels.apply(this, arguments);
       }
+
       return initModels;
     }()
   }, {
     key: "clearModels",
     value: function clearModels() {
       var _this$texture, _this$dataTexture;
+
       (_this$texture = this.texture) === null || _this$texture === void 0 ? void 0 : _this$texture.destroy();
       (_this$dataTexture = this.dataTexture) === null || _this$dataTexture === void 0 ? void 0 : _this$dataTexture.destroy();
       this.iconService.off('imageUpdate', this.updateTexture);
@@ -201,9 +237,10 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
     key: "getShaders",
     value: function getShaders() {
       var _ref3 = this.layer.getLayerConfig(),
-        sourceColor = _ref3.sourceColor,
-        targetColor = _ref3.targetColor,
-        lineType = _ref3.lineType;
+          sourceColor = _ref3.sourceColor,
+          targetColor = _ref3.targetColor,
+          lineType = _ref3.lineType;
+
       if (lineType === 'dash') {
         return {
           frag: arc_dash_frag,
@@ -211,6 +248,7 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
           type: 'Dash'
         };
       }
+
       if (sourceColor && targetColor) {
         // 分离 linear 功能
         return {
@@ -231,40 +269,49 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
     value: function () {
       var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var _ref4, _ref4$segmentNumber, segmentNumber, _this$getShaders, frag, vert, type, model;
+
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _ref4 = this.layer.getLayerConfig(), _ref4$segmentNumber = _ref4.segmentNumber, segmentNumber = _ref4$segmentNumber === void 0 ? 30 : _ref4$segmentNumber;
-              _this$getShaders = this.getShaders(), frag = _this$getShaders.frag, vert = _this$getShaders.vert, type = _this$getShaders.type; //
-              _context2.next = 4;
-              return this.layer.buildLayerModel({
-                moduleName: 'lineArc2d' + type,
-                vertexShader: vert,
-                fragmentShader: frag,
-                triangulation: LineArcTriangulation,
-                depth: {
-                  enable: false
-                },
-                segmentNumber: segmentNumber
-              });
-            case 4:
-              model = _context2.sent;
-              return _context2.abrupt("return", [model]);
-            case 6:
-            case "end":
-              return _context2.stop();
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _ref4 = this.layer.getLayerConfig(), _ref4$segmentNumber = _ref4.segmentNumber, segmentNumber = _ref4$segmentNumber === void 0 ? 30 : _ref4$segmentNumber;
+                _this$getShaders = this.getShaders(), frag = _this$getShaders.frag, vert = _this$getShaders.vert, type = _this$getShaders.type; //
+
+                _context2.next = 4;
+                return this.layer.buildLayerModel({
+                  moduleName: 'lineArc2d' + type,
+                  vertexShader: vert,
+                  fragmentShader: frag,
+                  triangulation: LineArcTriangulation,
+                  depth: {
+                    enable: false
+                  },
+                  segmentNumber: segmentNumber
+                });
+
+              case 4:
+                model = _context2.sent;
+                return _context2.abrupt("return", [model]);
+
+              case 6:
+              case "end":
+                return _context2.stop();
+            }
           }
         }, _callee2, this);
       }));
+
       function buildModels() {
         return _buildModels.apply(this, arguments);
       }
+
       return buildModels;
     }()
   }, {
     key: "registerBuiltinAttributes",
     value: function registerBuiltinAttributes() {
       var _this2 = this;
+
       this.styleAttributeService.registerStyleAttribute({
         name: 'size',
         type: AttributeType.Attribute,
@@ -279,7 +326,7 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
           size: 1,
           update: function update(feature) {
             var _feature$size = feature.size,
-              size = _feature$size === void 0 ? 1 : _feature$size;
+                size = _feature$size === void 0 ? 1 : _feature$size;
             return Array.isArray(size) ? [size[0]] : [size];
           }
         }
@@ -315,19 +362,24 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
           size: 2,
           update: function update(feature) {
             var iconMap = _this2.iconService.getIconMap();
+
             var texture = feature.texture;
+
             var _ref5 = iconMap[texture] || {
-                x: 0,
-                y: 0
-              },
-              x = _ref5.x,
-              y = _ref5.y;
+              x: 0,
+              y: 0
+            },
+                x = _ref5.x,
+                y = _ref5.y;
+
             return [x, y];
           }
         }
       });
     }
   }]);
+
   return ArcModel;
 }(BaseModel);
+
 export { ArcModel as default };