@antv/l7-layers 2.20.5 → 2.20.8

package/es/line/models/wall.js

@@ -1,5 +1,4 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
@@ -13,11 +12,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { AttributeType, gl } from '@antv/l7-core';
 import { rgb2arr } from '@antv/l7-utils';
 import BaseModel from "../../core/BaseModel";
+import { ShaderLocation } from "../../core/CommonStyleAttribute";
 import { LineTriangulation } from "../../core/triangulation";
 /* babel-plugin-inline-import '../shaders/wall/wall_frag.glsl' */
-var line_frag = "#define Animate 0.0\n#define LineTexture 1.0\n\n// line texture\nuniform float u_line_texture;\nuniform sampler2D u_texture;\nuniform vec2 u_textSize;\nuniform float u_linearColor: 0;\nuniform vec4 u_sourceColor;\nuniform vec4 u_targetColor;\nuniform float u_textureBlend;\nuniform float u_iconStepCount;\nuniform float u_time;\nuniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ]; // \u63A7\u5236\u8FD0\u52A8\n\nvarying vec2 v_iconMapUV;\nvarying float v_blur;\nvarying float v_radio;\nvarying vec4 v_color;\nvarying vec4 v_dataset;\n\n#pragma include \"picking\"\n\nvoid main() {\n  float animateSpeed = 0.0; // \u8FD0\u52A8\u901F\u5EA6\n  float d_distance_ratio = v_dataset.r; // \u5F53\u524D\u70B9\u4F4D\u8DDD\u79BB\u5360\u7EBF\u603B\u957F\u7684\u6BD4\u4F8B\n  float v = v_dataset.a;\n\n  if(u_linearColor == 1.0) { // \u4F7F\u7528\u6E10\u53D8\u989C\u8272\n    gl_FragColor = mix(u_sourceColor, u_targetColor, v);\n  } else { // \u4F7F\u7528 color \u65B9\u6CD5\u4F20\u5165\u7684\u989C\u8272\n     gl_FragColor = v_color;\n  }\n\n  gl_FragColor.a *= v_color.a; // \u5168\u5C40\u900F\u660E\u5EA6\n  if(u_animate.x == Animate) {\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) + animateSpeed);\n      alpha = (alpha + u_animate.w -1.0) / u_animate.w;\n      alpha = smoothstep(0., 1., alpha);\n      gl_FragColor.a *= alpha;\n  }\n\n  if(u_line_texture == LineTexture) { // while load texture\n    float aDistance = v_dataset.g;      // \u5F53\u524D\u9876\u70B9\u7684\u8DDD\u79BB\n    float d_texPixelLen = v_dataset.b;  // \u8D34\u56FE\u7684\u50CF\u7D20\u957F\u5EA6\uFF0C\u6839\u636E\u5730\u56FE\u5C42\u7EA7\u7F29\u653E\n    float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);\n    float v = v_dataset.a;  // \u7EBF\u56FE\u5C42\u8D34\u56FE\u90E8\u5206\u7684 v \u5750\u6807\u503C\n\n    // \u8BA1\u7B97\u7EB9\u7406\u95F4\u9694 start\n    float flag = 0.0;\n    if(u > 1.0/u_iconStepCount) {\n      flag = 1.0;\n    }\n    u = fract(u*u_iconStepCount);\n    // \u8BA1\u7B97\u7EB9\u7406\u95F4\u9694 end\n\n    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;\n    vec4 pattern = texture2D(u_texture, uv);\n\n    // Tip: \u5224\u65AD\u7EB9\u7406\u95F4\u9694\n    if(flag > 0.0) {\n      pattern = vec4(0.0);\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 *= v_color.a;\n        if(gl_FragColor.a <= 0.0) {\n          pattern.a = 0.0;\n        }\n        gl_FragColor = filterColor(pattern);\n    }\n  }\n  \n\n  // blur - AA\n  if(v < v_blur) {\n    gl_FragColor.a = mix(0.0, gl_FragColor.a, v/v_blur);\n  } else if(v > 1.0 - v_blur) {\n    gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - v_blur))/v_blur);\n  }\n\n  gl_FragColor = filterColor(gl_FragColor);\n}\n";
+var line_frag = "#define Animate 0.0\n#define LineTexture 1.0\n\n// line texture\n\nuniform sampler2D u_texture;\nlayout(std140) uniform commonUniorm {\n  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  vec2 u_textSize;\n  float u_icon_step: 100;\n  float u_heightfixed;\n  float u_linearColor: 0;\n  float u_line_texture;\n  float u_textureBlend;\n  float u_iconStepCount;\n  float u_time;\n};\nin vec2 v_iconMapUV;\nin float v_blur;\nin float v_radio;\nin vec4 v_color;\nin vec4 v_dataset;\n\nout vec4 outputColor;\n#pragma include \"picking\"\n\nvoid main() {\n  float animateSpeed = 0.0; // \u8FD0\u52A8\u901F\u5EA6\n  float d_distance_ratio = v_dataset.r; // \u5F53\u524D\u70B9\u4F4D\u8DDD\u79BB\u5360\u7EBF\u603B\u957F\u7684\u6BD4\u4F8B\n  float v = v_dataset.a;\n\n  if(u_linearColor == 1.0) { // \u4F7F\u7528\u6E10\u53D8\u989C\u8272\n    outputColor = mix(u_sourceColor, u_targetColor, v);\n  } else { // \u4F7F\u7528 color \u65B9\u6CD5\u4F20\u5165\u7684\u989C\u8272\n     outputColor = v_color;\n  }\n\n  outputColor.a *= v_color.a; // \u5168\u5C40\u900F\u660E\u5EA6\n  if(u_animate.x == Animate) {\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) + animateSpeed);\n      alpha = (alpha + u_animate.w -1.0) / u_animate.w;\n      alpha = smoothstep(0., 1., alpha);\n      outputColor.a *= alpha;\n  }\n\n  if(u_line_texture == LineTexture) { // while load texture\n    float aDistance = v_dataset.g;      // \u5F53\u524D\u9876\u70B9\u7684\u8DDD\u79BB\n    float d_texPixelLen = v_dataset.b;  // \u8D34\u56FE\u7684\u50CF\u7D20\u957F\u5EA6\uFF0C\u6839\u636E\u5730\u56FE\u5C42\u7EA7\u7F29\u653E\n    float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);\n    float v = v_dataset.a;  // \u7EBF\u56FE\u5C42\u8D34\u56FE\u90E8\u5206\u7684 v \u5750\u6807\u503C\n\n    // \u8BA1\u7B97\u7EB9\u7406\u95F4\u9694 start\n    float flag = 0.0;\n    if(u > 1.0/u_iconStepCount) {\n      flag = 1.0;\n    }\n    u = fract(u*u_iconStepCount);\n    // \u8BA1\u7B97\u7EB9\u7406\u95F4\u9694 end\n\n    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;\n    vec4 pattern = texture(SAMPLER_2D(u_texture), uv);\n\n    // Tip: \u5224\u65AD\u7EB9\u7406\u95F4\u9694\n    if(flag > 0.0) {\n      pattern = vec4(0.0);\n    }\n\n    if(u_textureBlend == 0.0) { // normal\n      pattern.a = 0.0;\n      outputColor = filterColor(outputColor + pattern);\n    } else { // replace\n        pattern.a *= v_color.a;\n        if(outputColor.a <= 0.0) {\n          pattern.a = 0.0;\n        }\n        outputColor = filterColor(pattern);\n    }\n  }\n  \n\n  // blur - AA\n  if(v < v_blur) {\n    outputColor.a = mix(0.0, outputColor.a, v/v_blur);\n  } else if(v > 1.0 - v_blur) {\n    outputColor.a = mix(outputColor.a, 0.0, (v - (1.0 - v_blur))/v_blur);\n  }\n\n  outputColor = filterColor(outputColor);\n}\n";
 /* babel-plugin-inline-import '../shaders/wall/wall_vert.glsl' */
-var line_vert = "#define Animate 0.0\n\nattribute float a_Miter;\nattribute vec4 a_Color;\nattribute vec2 a_Size;\nattribute vec3 a_Normal;\nattribute vec3 a_Position;\nattribute vec2 a_iconMapUV;\nattribute float a_Total_Distance;\nattribute float a_Distance;\n\nuniform mat4 u_ModelMatrix;\n\nuniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];\nuniform float u_icon_step: 100;\nuniform float u_heightfixed;\nuniform float u_linearColor: 0;\n\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\n// texV \u7EBF\u56FE\u5C42 - \u8D34\u56FE\u90E8\u5206\u7684 v \u5750\u6807\uFF08\u7EBF\u7684\u5BBD\u5EA6\u65B9\u5411\uFF09\nvarying vec2 v_iconMapUV;\nvarying vec4 v_color;\nvarying float v_blur;\nvarying float v_radio;\nvarying vec4 v_dataset;\n\nvoid main() {\n\n\n  float d_distance_ratio; // \u5F53\u524D\u70B9\u4F4D\u8DDD\u79BB\u5360\u7EBF\u603B\u957F\u7684\u6BD4\u4F8B\n  float d_texPixelLen;    // \u8D34\u56FE\u7684\u50CF\u7D20\u957F\u5EA6\uFF0C\u6839\u636E\u5730\u56FE\u5C42\u7EA7\u7F29\u653E\n\n  v_iconMapUV = a_iconMapUV;\n  if(u_heightfixed < 1.0) {     // \u9AD8\u5EA6\u968F zoom \u8C03\u6574\n    d_texPixelLen = project_pixel(u_icon_step);\n  } else {\n    d_texPixelLen = u_icon_step;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    d_texPixelLen *= 10.0;\n  }\n\n  if(u_animate.x == Animate || u_linearColor == 1.0) {\n      d_distance_ratio = a_Distance / a_Total_Distance;\n  }\n\n  float miter = (a_Miter + 1.0)/2.0;\n  // \u8BBE\u7F6E\u6570\u636E\u96C6\u7684\u53C2\u6570\n  v_dataset[0] = d_distance_ratio; // \u5F53\u524D\u70B9\u4F4D\u8DDD\u79BB\u5360\u7EBF\u603B\u957F\u7684\u6BD4\u4F8B\n  v_dataset[1] = a_Distance;       // \u5F53\u524D\u9876\u70B9\u7684\u8DDD\u79BB\n  v_dataset[2] = d_texPixelLen;    // \u8D34\u56FE\u7684\u50CF\u7D20\u957F\u5EA6\uFF0C\u6839\u636E\u5730\u56FE\u5C42\u7EA7\u7F29\u653E\n  v_dataset[3] = miter;          // \u7EBF\u56FE\u5C42\u8D34\u56FE\u90E8\u5206\u7684 v \u5750\u6807\u503C 0 - 1\n\n  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));\n\n  float originSize = a_Size.x;  // \u56FA\u5B9A\u9AD8\u5EA6\n  if(u_heightfixed < 1.0) {    \n     originSize = project_float_meter(a_Size.x); // \u9AD8\u5EA6\u968F zoom \u8C03\u6574\n  }\n\n\n  float wallHeight = originSize * miter;\n  float lightWeight = calc_lighting(vec4(project_pos.xy, wallHeight, 1.0));\n\n  v_blur = min(project_float_pixel(2.0) / originSize, 0.05);\n  v_color = vec4(a_Color.rgb * lightWeight, a_Color.w * opacity);\n\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    gl_Position = u_Mvp * (vec4(project_pos.xy, wallHeight, 1.0));\n  } else {\n    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, wallHeight, 1.0));\n  }\n\n  setPickingColor(a_PickingColor);\n}\n";
+var line_vert = "#define Animate 0.0\nlayout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in vec2 a_Size;\nlayout(location = 10) in float a_Miter;\nlayout(location = 11) in float a_Total_Distance;\nlayout(location = 12) in vec4 a_Instance;\nlayout(location = 13) in vec3 a_Normal;\nlayout(location = 14) in vec2 a_iconMapUV;\nlayout(location = 15) in float a_Distance;\n\n\nlayout(std140) uniform commonUniorm {\n  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  vec2 u_textSize;\n  float u_icon_step: 100;\n  float u_heightfixed;\n  float u_linearColor: 0;\n  float u_line_texture;\n  float u_textureBlend;\n  float u_iconStepCount;\n  float u_time;\n};\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\n// texV \u7EBF\u56FE\u5C42 - \u8D34\u56FE\u90E8\u5206\u7684 v \u5750\u6807\uFF08\u7EBF\u7684\u5BBD\u5EA6\u65B9\u5411\uFF09\nout vec2 v_iconMapUV;\nout vec4 v_color;\nout float v_blur;\nout float v_radio;\nout vec4 v_dataset;\n\nvoid main() {\n\n\n  float d_distance_ratio; // \u5F53\u524D\u70B9\u4F4D\u8DDD\u79BB\u5360\u7EBF\u603B\u957F\u7684\u6BD4\u4F8B\n  float d_texPixelLen;    // \u8D34\u56FE\u7684\u50CF\u7D20\u957F\u5EA6\uFF0C\u6839\u636E\u5730\u56FE\u5C42\u7EA7\u7F29\u653E\n\n  v_iconMapUV = a_iconMapUV;\n  if(u_heightfixed < 1.0) {     // \u9AD8\u5EA6\u968F zoom \u8C03\u6574\n    d_texPixelLen = project_pixel(u_icon_step);\n  } else {\n    d_texPixelLen = u_icon_step;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    d_texPixelLen *= 10.0;\n  }\n\n  if(u_animate.x == Animate || u_linearColor == 1.0) {\n      d_distance_ratio = a_Distance / a_Total_Distance;\n  }\n\n  float miter = (a_Miter + 1.0)/2.0;\n  // \u8BBE\u7F6E\u6570\u636E\u96C6\u7684\u53C2\u6570\n  v_dataset[0] = d_distance_ratio; // \u5F53\u524D\u70B9\u4F4D\u8DDD\u79BB\u5360\u7EBF\u603B\u957F\u7684\u6BD4\u4F8B\n  v_dataset[1] = a_Distance;       // \u5F53\u524D\u9876\u70B9\u7684\u8DDD\u79BB\n  v_dataset[2] = d_texPixelLen;    // \u8D34\u56FE\u7684\u50CF\u7D20\u957F\u5EA6\uFF0C\u6839\u636E\u5730\u56FE\u5C42\u7EA7\u7F29\u653E\n  v_dataset[3] = miter;          // \u7EBF\u56FE\u5C42\u8D34\u56FE\u90E8\u5206\u7684 v \u5750\u6807\u503C 0 - 1\n\n  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));\n\n  float originSize = a_Size.x;  // \u56FA\u5B9A\u9AD8\u5EA6\n  if(u_heightfixed < 1.0) {    \n     originSize = project_float_meter(a_Size.x); // \u9AD8\u5EA6\u968F zoom \u8C03\u6574\n  }\n\n\n  float wallHeight = originSize * miter;\n  float lightWeight = calc_lighting(vec4(project_pos.xy, wallHeight, 1.0));\n\n  v_blur = min(project_float_pixel(2.0) / originSize, 0.05);\n  v_color = vec4(a_Color.rgb * lightWeight, a_Color.w * opacity);\n\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    gl_Position = u_Mvp * (vec4(project_pos.xy, wallHeight, 1.0));\n  } else {\n    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, wallHeight, 1.0));\n  }\n\n  setPickingColor(a_PickingColor);\n}\n";
 var LineWallModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(LineWallModel, _BaseModel);
   var _super = _createSuper(LineWallModel);
@@ -45,12 +45,13 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         width: 1024,
         height: _this.iconService.canvasHeight || 128
       });
+      _this.textures = [_this.texture];
     });
     return _this;
   }
   _createClass(LineWallModel, [{
-    key: "getUninforms",
-    value: function getUninforms() {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref = this.layer.getLayerConfig(),
         sourceColor = _ref.sourceColor,
         targetColor = _ref.targetColor,
@@ -64,6 +65,8 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         iconStep = _ref$iconStep === void 0 ? 100 : _ref$iconStep,
         _ref$iconStepCount = _ref.iconStepCount,
         iconStepCount = _ref$iconStepCount === void 0 ? 1 : _ref$iconStepCount;
+      var _ref2 = this.layer.getLayerConfig(),
+        animateOption = _ref2.animateOption;
       if (this.rendererService.getDirty()) {
         this.texture.bind();
       }
@@ -77,33 +80,31 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         targetColorArr = rgb2arr(targetColor);
         useLinearColor = 1;
       }
-      return _objectSpread({
+      var commonOptions = {
+        u_animate: this.animateOption2Array(animateOption),
+        u_sourceColor: sourceColorArr,
+        u_targetColor: targetColorArr,
+        u_textSize: [1024, this.iconService.canvasHeight || 128],
+        u_icon_step: iconStep,
         u_heightfixed: Number(heightfixed),
-        u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
-        // 纹理支持参数
-        u_texture: this.texture,
-        // 贴图
+        // 渐变色支持参数
+        u_linearColor: useLinearColor,
         u_line_texture: lineTexture ? 1.0 : 0.0,
         // 传入线的标识
+        u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
         u_iconStepCount: iconStepCount,
-        u_icon_step: iconStep,
-        u_textSize: [1024, this.iconService.canvasHeight || 128],
-        // 渐变色支持参数
-        u_linearColor: useLinearColor,
-        u_sourceColor: sourceColorArr,
-        u_targetColor: targetColorArr
-      }, this.getStyleAttribute());
-    }
-  }, {
-    key: "getAnimateUniforms",
-    value: function getAnimateUniforms() {
-      var _ref2 = this.layer.getLayerConfig(),
-        animateOption = _ref2.animateOption;
-      return {
-        u_animate: this.animateOption2Array(animateOption),
-        u_time: this.layer.getLayerAnimateTime()
+        u_time: this.layer.getLayerAnimateTime() || 0
       };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
+    // public getAnimateUniforms(): IModelUniform {
+    //   const { animateOption } = this.layer.getLayerConfig() as ILayerConfig;
+    //   return {
+    //     u_animate: this.animateOption2Array(animateOption as IAnimateOption),
+    //     u_time: this.layer.getLayerAnimateTime(),
+    //   };
+    // }
   }, {
     key: "initModels",
     value: function () {
@@ -111,10 +112,11 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              this.initUniformsBuffer();
               this.updateTexture();
               this.iconService.on('imageUpdate', this.updateTexture);
               return _context.abrupt("return", this.buildModels());
-            case 3:
+            case 4:
             case "end":
               return _context.stop();
           }
@@ -175,6 +177,7 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Distance',
+          shaderLocation: 15,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.STATIC_DRAW,
@@ -192,6 +195,7 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Total_Distance',
+          shaderLocation: 11,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.STATIC_DRAW,
@@ -209,6 +213,7 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
+          shaderLocation: ShaderLocation.SIZE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
@@ -230,6 +235,7 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Normal',
+          shaderLocation: ShaderLocation.NORMAL,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.STATIC_DRAW,
@@ -248,6 +254,7 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Miter',
+          shaderLocation: 10,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.STATIC_DRAW,
@@ -265,6 +272,7 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_iconMapUV',
+          shaderLocation: 14,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,

package/es/line/shaders/{line_arc_frag.glsl → arc/line_arc_frag.glsl}

@@ -1,39 +1,49 @@
 
 #define Animate 0.0
 #define LineTexture 1.0
-uniform float u_textureBlend;
-uniform float u_blur : 0.9;
-uniform float u_line_type: 0.0;
-// varying vec2 v_normal;
-varying vec4 v_dash_array;
-varying vec4 v_color;
-
-uniform float u_time;
-uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
-
-uniform float u_line_texture;
 uniform sampler2D u_texture;
-uniform vec2 u_textSize;
-
-uniform float segmentNumber;
-varying vec2 v_iconMapUV;
-varying vec4 v_lineData;
-
+layout(std140) uniform commonUniorm {
+  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+  vec4 u_dash_array;
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  vec2 u_textSize;
+  float segmentNumber;
+  float u_lineDir: 1.0;
+  float u_icon_step: 100;
+  float u_line_texture: 0.0;
+  float u_textureBlend;
+  float u_blur : 0.9;
+  float u_line_type: 0.0;
+  float u_time;
+  float u_linearColor: 0.0;
+};
+in vec2 v_iconMapUV;
+in vec4 v_lineData;
+in vec4 v_color;
+//dash
+in vec4 v_dash_array;
+in float v_distance_ratio;
 
+out vec4 outputColor;
 #pragma include "picking"
 
 void main() {
+  if(u_dash_array!=vec4(0.0)){
+    float dashLength = mod(v_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))) {
+      discard;
+    };
+  }
   float animateSpeed = 0.0; // 运动速度
-  gl_FragColor = v_color;
-  
-
+  outputColor = v_color;
   if(u_animate.x == Animate && u_line_texture != LineTexture) {
       animateSpeed = u_time / u_animate.y;
       float alpha =1.0 - fract( mod(1.0- v_lineData.b, u_animate.z)* (1.0/ u_animate.z) + u_time / u_animate.y);
       alpha = (alpha + u_animate.w -1.0) / u_animate.w;
       // alpha = smoothstep(0., 1., alpha);
       alpha = clamp(alpha, 0.0, 1.0);
-      gl_FragColor.a *= alpha;
+      outputColor.a *= alpha;
   }
 
   // 当存在贴图时在底色上贴上贴图
@@ -53,7 +63,7 @@ void main() {
     float v = v_lineData.a; // 横向 v
     vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
 
-    vec4 pattern = texture2D(u_texture, uv);
+    vec4 pattern = texture(SAMPLER_2D(u_texture), uv);
 
     if(u_animate.x == Animate) {
       float currentPlane = floor(redioCount - time);
@@ -66,16 +76,16 @@ void main() {
 
     if(u_textureBlend == 0.0) { // normal
       pattern.a = 0.0;
-      gl_FragColor = filterColor(gl_FragColor + pattern);
+      outputColor = filterColor(outputColor + pattern);
     } else { // replace
         pattern.a *= v_color.a;
-        if(gl_FragColor.a <= 0.0) {
+        if(outputColor.a <= 0.0) {
           pattern.a = 0.0;
         }
-        gl_FragColor = filterColor(pattern);
+        outputColor = filterColor(pattern);
     }
     
   } else {
-     gl_FragColor = filterColor(gl_FragColor);
+     outputColor = filterColor(outputColor);
   }
 }

package/es/line/shaders/{line_arc_vert.glsl → arc/line_arc_vert.glsl}

@@ -1,24 +1,33 @@
 #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 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_icon_step: 100;
-uniform float u_line_texture: 0.0;
-attribute vec2 a_iconMapUV;
-varying vec2 v_iconMapUV;
-varying vec4 v_lineData;
-varying vec2 v_distance_ratio;
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 9) in float a_Size;
+layout(location = 12) in vec4 a_Instance;
+layout(location = 14) in vec2 a_iconMapUV;
+
+layout(std140) uniform commonUniorm {
+  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+  vec4 u_dash_array;
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  vec2 u_textSize;
+  float segmentNumber;
+  float u_lineDir: 1.0;
+  float u_icon_step: 100;
+  float u_line_texture: 0.0;
+  float u_textureBlend;
+  float u_blur : 0.9;
+  float u_line_type: 0.0;
+  float u_time;
+  float u_linearColor: 0.0;
+};
+out vec4 v_color;
+out vec2 v_iconMapUV;
+out vec4 v_lineData;
+//dash
+out vec4 v_dash_array;
+out float v_distance_ratio;
 
 
 #pragma include "projection"
@@ -76,14 +85,35 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) {
 }
 
 void main() {
-  v_color = a_Color;
+  //vs中计算渐变色
+  if(u_linearColor==1.0){
+    float d_segmentIndex = a_Position.x + 1.0; // 当前顶点在弧线中所处的分段位置
+    v_color = mix(u_sourceColor, u_targetColor, d_segmentIndex/segmentNumber);
+  }
+  else{
+    v_color = a_Color;
+  }
   v_color.a = v_color.a * opacity;
 
   vec2 source = a_Instance.rg;  // 起始点
   vec2 target =  a_Instance.ba; // 终点
+
+
+
   float segmentIndex = a_Position.x;
   float segmentRatio = getSegmentRatio(segmentIndex);
 
+  //计算dashArray和distanceRatio 输出到片元
+  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;
+  v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / total_Distance;
+  v_distance_ratio = segmentIndex / segmentNumber;
+
   float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
   float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
   float d_distance_ratio;
@@ -95,7 +125,7 @@ void main() {
       }
   }
 
- v_lineData.b = d_distance_ratio;
+  v_lineData.b = d_distance_ratio;
 
   vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, thetaOffset), 0.0, 1.0));
   vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, thetaOffset), 0.0, 1.0));
@@ -105,7 +135,7 @@ void main() {
 
 
   float d_segmentIndex = a_Position.x + 1.0; // 当前顶点在弧线中所处的分段位置
- v_lineData.r = d_segmentIndex;
+  v_lineData.r = d_segmentIndex;
 
   if(LineTexture == u_line_texture) { // 开启贴图模式
 

package/es/line/shaders/{line_arc_3d_frag.glsl → arc3d/line_arc_3d_frag.glsl}

@@ -3,33 +3,41 @@
 #define Animate 0.0
 #define LineTexture 1.0
 
-uniform float u_textureBlend;
-uniform float u_blur : 0.9;
-uniform float u_line_type: 0.0;
-// varying vec2 v_normal;
-varying vec4 v_dash_array;
-varying vec4 v_color;
-varying vec4 v_line_data;
-
-uniform float u_line_texture: 0.0;
 uniform sampler2D u_texture;
-uniform vec2 u_textSize;
-varying float v_segmentIndex;
-uniform float segmentNumber;
 
+layout(std140) uniform commonUniorm {
+  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+  vec4 u_dash_array: [10.0, 5., 0, 0];
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  vec2 u_textSize;
+  float u_globel;
+  float u_globel_radius;
+  float u_global_height: 10;
+  float segmentNumber;
+  float u_line_type: 0.0;
+  float u_icon_step: 100;
+  float u_line_texture: 0.0;
+  float u_textureBlend;
+  float u_time;
+  float u_linearColor: 0.0;
+};
 
-varying vec2 v_iconMapUV;
-
-uniform float u_time;
-uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+// varying vec2 v_normal;
+in vec4 v_dash_array;
+in vec4 v_color;
+in vec4 v_line_data;
+in float v_segmentIndex;
+in vec2 v_iconMapUV;
 
+out vec4 outputColor;
 
 #pragma include "picking"
 
 void main() {
   float animateSpeed = 0.0; // 运动速度
   float d_distance_ratio = v_line_data.g; // 当前点位距离占线总长的比例
-  gl_FragColor = v_color;
+  outputColor = v_color;
 
   if(u_line_type == LineTypeDash) {
     float flag = 0.;
@@ -37,7 +45,7 @@ void main() {
     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.;
     }
-    gl_FragColor.a *=flag;
+    outputColor.a *=flag;
   }
 
   if(u_animate.x == Animate && u_line_texture != LineTexture) {
@@ -47,7 +55,7 @@ void main() {
       alpha = (alpha + u_animate.w -1.0) / u_animate.w;
       // alpha = smoothstep(0., 1., alpha);
       alpha = clamp(alpha, 0.0, 1.0);
-      gl_FragColor.a *= alpha;
+      outputColor.a *= alpha;
 
       // u_animate 
       // x enable
@@ -71,7 +79,7 @@ void main() {
 
     float v = v_line_data.a;  // 线图层贴图部分的 v 坐标值
     vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
-    vec4 pattern = texture2D(u_texture, uv);
+    vec4 pattern = texture(SAMPLER_2D(u_texture), uv);
 
     if(u_animate.x == Animate) {
       float currentPlane = floor(redioCount - time);
@@ -84,18 +92,18 @@ void main() {
 
     if(u_textureBlend == 0.0) { // normal
       pattern.a = 0.0;
-      gl_FragColor = filterColor(gl_FragColor + pattern);
+      outputColor = filterColor(outputColor + pattern);
     } else { // replace
         pattern.a *= v_color.a;
-        if(gl_FragColor.a <= 0.0) {
+        if(outputColor.a <= 0.0) {
           pattern.a = 0.0;
           discard;
         } else {
-          gl_FragColor = filterColor(pattern);
+          outputColor = filterColor(pattern);
         }
     }
 
   } else {
-    gl_FragColor = filterColor(gl_FragColor);
+    outputColor = filterColor(outputColor);
   }
 }

package/{lib/line/shaders → es/line/shaders/arc3d}/line_arc_3d_vert.glsl

@@ -2,31 +2,35 @@
 #define LineTypeDash 1.0
 #define Animate 0.0
 #define LineTexture 1.0
-attribute vec3 a_Position;
-attribute vec4 a_Instance;
-attribute vec4 a_Color;
-attribute float a_Size;
-
-uniform float u_globel;
-uniform float u_globel_radius;
-uniform float u_global_height: 10;
-uniform mat4 u_ModelMatrix;
-
-uniform float segmentNumber;
-uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
-varying vec4 v_color;
-
-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;
-varying float v_segmentIndex;
-
-attribute vec2 a_iconMapUV;
-varying vec2 v_iconMapUV;
-varying vec4 v_line_data;
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 9) in float a_Size;
+layout(location = 12) in vec4 a_Instance;
+layout(location = 14) in vec2 a_iconMapUV;
+
+
+layout(std140) uniform commonUniorm {
+  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+  vec4 u_dash_array: [10.0, 5., 0, 0];
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  vec2 u_textSize;
+  float u_globel;
+  float u_globel_radius;
+  float u_global_height: 10;
+  float segmentNumber;
+  float u_line_type: 0.0;
+  float u_icon_step: 100;
+  float u_line_texture: 0.0;
+  float u_textureBlend;
+  float u_time;
+  float u_linearColor: 0.0;
+};
+out vec4 v_color;
+out vec4 v_dash_array;
+out float v_segmentIndex;
+out vec2 v_iconMapUV;
+out vec4 v_line_data;
 
 #pragma include "projection"
 #pragma include "project"
@@ -94,8 +98,14 @@ vec3 lglt2xyz(vec2 lnglat) {
 }
 
 void main() {
-
-  v_color = a_Color;
+  //vs中计算渐变色
+  if(u_linearColor==1.0){
+    float d_segmentIndex = a_Position.x + 1.0; // 当前顶点在弧线中所处的分段位置
+    v_color = mix(u_sourceColor, u_targetColor, d_segmentIndex/segmentNumber);
+  }
+  else{
+    v_color = a_Color;
+  }
   v_color.a = v_color.a * opacity;
   vec2 source = project_position(vec4(a_Instance.rg, 0, 0)).xy;
   vec2 target = project_position(vec4(a_Instance.ba, 0, 0)).xy;

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

@@ -1,6 +1,7 @@
-#extension GL_OES_standard_derivatives : enable
+// #extension GL_OES_standard_derivatives : enable
 
-varying vec4 v_color;
+in vec4 v_color;
+out vec4 outputColor;
 
 
 // line texture
@@ -8,6 +9,6 @@ varying vec4 v_color;
 #pragma include "picking"
 
 void main() {
-gl_FragColor = v_color;
-gl_FragColor = filterColor(gl_FragColor);
+  outputColor = v_color;
+  outputColor = filterColor(outputColor);
 }

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

@@ -1,19 +1,20 @@
-attribute vec4 a_Color;
-attribute vec2 a_Size;
-attribute vec4 a_Instance;
-attribute vec3 a_Normal;
-attribute vec3 a_Position;
-
-uniform mat4 u_ModelMatrix;
-
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 9) in vec2 a_Size;
+layout(location = 12) in vec4 a_Instance;
+layout(location = 13) in vec3 a_Normal;
+
+layout(std140) uniform commonUniorm {
+  float u_gap_width: 1.0;
+  float u_stroke_width: 1.0;
+  float u_stroke_opacity: 1.0;
+};
 
 #pragma include "projection"
 #pragma include "project"
 #pragma include "picking"
-varying vec4 v_color;
-uniform float u_gap_width: 1.0;
-uniform float u_stroke_width: 1.0;
-uniform float u_stroke_opacity: 1.0;
+
+out vec4 v_color;
 
 vec2 project_pixel_offset(vec2 offsets) {
 
@@ -51,9 +52,8 @@ void main() {
   vec2 source = a_Instance.rg;  // 起始点
   vec2 target =  a_Instance.ba; // 终点
   vec2 flowlineDir = line_dir(target,source);
-  vec2 perpendicularDir = vec2(flowlineDir.y, flowlineDir.x); // mapbox || 高德
-
-
+  vec2 perpendicularDir = vec2(-flowlineDir.y, flowlineDir.x); // mapbox || 高德
+   
   vec2 position = mix(source, target, a_Position.x);
   
   float lengthCommon = length(project_position(vec4(target,0,1)) - project_position(vec4(source,0,1)));  //    
@@ -77,17 +77,16 @@ void main() {
   float gapCommon = flag_gap() * project_pixel(u_gap_width);
   vec3 offsetCommon = vec3(
     flowlineDir * (limitedOffsetDistances[1] + normalsCommon.y + endpointOffset * 1.05) -
-    perpendicularDir * (limitedOffsetDistances[0] + gapCommon + normalsCommon.x),
+    perpendicularDir *  (limitedOffsetDistances[0] + gapCommon + normalsCommon.x),
     0.0
   );
 
-
   vec4 project_pos = project_position(vec4(position.xy, 0, 1.0));
 
   vec4 fillColor = vec4(a_Color.rgb, a_Color.a * opacity);
   v_color = mix(fillColor, vec4(u_stroke.xyz, u_stroke.w * fillColor.w * u_stroke_opacity), a_Normal.z);
 
-  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offsetCommon.xy, 0., 1.0));
+  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy +  offsetCommon.xy, 0., 1.0));