@antv/l7-layers 2.16.1 → 2.16.2

package/lib/line/models/wall.js

@@ -1,78 +1,49 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _l7Core = require("@antv/l7-core");
-
 var _l7Utils = require("@antv/l7-utils");
-
 var _lodash = require("lodash");
-
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
-
 var _triangulation = require("../../core/triangulation");
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
 /* 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_opacity : 1.0;\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 opacity = u_opacity;\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 *= opacity; // \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 *= opacity;\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";
-
 /* 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;\nuniform mat4 u_Mvp;\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) {     // \u9AD8\u5EA6\u968F zoom \u8C03\u6574\n    originSize = project_float_pixel(a_Size.x);\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);\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) {
   (0, _inherits2.default)(LineWallModel, _BaseModel);
-
   var _super = _createSuper(LineWallModel);
-
   function LineWallModel() {
     var _this;
-
     (0, _classCallCheck2.default)(this, LineWallModel);
-
     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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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: _l7Core.gl.NEAREST,
@@ -84,42 +55,37 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(LineWallModel, [{
     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$heightfixed = _ref.heightfixed,
-          heightfixed = _ref$heightfixed === void 0 ? false : _ref$heightfixed,
-          _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$iconStepCount = _ref.iconStepCount,
-          iconStepCount = _ref$iconStepCount === void 0 ? 1 : _ref$iconStepCount;
-
+        _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$heightfixed = _ref.heightfixed,
+        heightfixed = _ref$heightfixed === void 0 ? false : _ref$heightfixed,
+        _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$iconStepCount = _ref.iconStepCount,
+        iconStepCount = _ref$iconStepCount === void 0 ? 1 : _ref$iconStepCount;
       if (this.rendererService.getDirty()) {
         this.texture.bind();
-      } // 转化渐变色
-
+      }
 
+      // 转化渐变色
       var useLinearColor = 0; // 默认不生效
-
       var sourceColorArr = [0, 0, 0, 0];
       var targetColorArr = [0, 0, 0, 0];
-
       if (sourceColor && targetColor) {
         sourceColorArr = (0, _l7Utils.rgb2arr)(sourceColor);
         targetColorArr = (0, _l7Utils.rgb2arr)(targetColor);
         useLinearColor = 1;
       }
-
       return {
         u_heightfixed: Number(heightfixed),
         u_opacity: (0, _lodash.isNumber)(opacity) ? opacity : 1.0,
@@ -142,8 +108,7 @@ var LineWallModel = /*#__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()
@@ -154,32 +119,26 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
     value: function () {
       var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         return _regenerator.default.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$texture = this.texture) === null || _this$texture === void 0 ? void 0 : _this$texture.destroy();
       this.iconService.off('imageUpdate', this.updateTexture);
     }
@@ -189,44 +148,37 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
         var model;
         return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return this.layer.buildLayerModel({
-                  moduleName: 'lineWall',
-                  vertexShader: line_vert,
-                  fragmentShader: line_frag,
-                  triangulation: _triangulation.LineTriangulation,
-                  depth: {
-                    enable: false
-                  },
-                  blend: this.getBlend()
-                });
-
-              case 2:
-                model = _context2.sent;
-                return _context2.abrupt("return", [model]);
-
-              case 4:
-              case "end":
-                return _context2.stop();
-            }
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return this.layer.buildLayerModel({
+                moduleName: 'lineWall',
+                vertexShader: line_vert,
+                fragmentShader: line_frag,
+                triangulation: _triangulation.LineTriangulation,
+                depth: {
+                  enable: false
+                },
+                blend: this.getBlend()
+              });
+            case 2:
+              model = _context2.sent;
+              return _context2.abrupt("return", [model]);
+            case 4:
+            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: 'distance',
         type: _l7Core.AttributeType.Attribute,
@@ -275,12 +227,13 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
           size: 2,
           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[1]] : [size, 0];
           }
         }
-      }); // point layer size;
+      });
 
+      // point layer size;
       this.styleAttributeService.registerStyleAttribute({
         name: 'normal',
         type: _l7Core.AttributeType.Attribute,
@@ -330,16 +283,13 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
           size: 2,
           update: function update(feature) {
             var iconMap = _this2.iconService.getIconMap();
-
             var texture = feature.texture;
-
             var _ref3 = iconMap[texture] || {
-              x: 0,
-              y: 0
-            },
-                x = _ref3.x,
-                y = _ref3.y;
-
+                x: 0,
+                y: 0
+              },
+              x = _ref3.x,
+              y = _ref3.y;
             return [x, y];
           }
         }
@@ -348,5 +298,4 @@ var LineWallModel = /*#__PURE__*/function (_BaseModel) {
   }]);
   return LineWallModel;
 }(_BaseModel2.default);
-
 exports.default = LineWallModel;

package/lib/line/shaders/dash/arc_dash_frag.glsl

@@ -3,22 +3,19 @@ uniform float u_opacity;
 
 varying vec4 v_dash_array;
 varying vec4 v_color;
+varying float v_distance_ratio;
 
 uniform float segmentNumber;
 
-varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 
 #pragma include "picking"
 
 void main() {
-  float opacity = styleMappingMat[0][0];
-  float d_distance_ratio = styleMappingMat[3].b; // 当前顶点在弧线中所处的分段比例
-
   gl_FragColor = v_color;
-  gl_FragColor.a *= opacity;
+
 
   float flag = 0.;
-  float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+  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)) {
     flag = 1.;
   };

package/lib/line/shaders/dash/arc_dash_vert.glsl

@@ -12,15 +12,11 @@ varying vec4 v_color;
 uniform vec4 u_dash_array: [10.0, 5., 0, 0];
 uniform float u_lineDir: 1.0;
 varying vec4 v_dash_array;
+varying float v_distance_ratio;
 
 uniform float u_thetaOffset: 0.314;
 
 uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
-#pragma include "styleMappingCalThetaOffset"
 
 #pragma include "projection"
 #pragma include "project"
@@ -76,38 +72,7 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) {
 }
 
 void main() {
-  v_color = a_Color;
-
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0  // dataset 数据集
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke -> thetaOffset... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-
-  vec2 thetaOffsetAndOffset = calThetaOffsetAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][1] = thetaOffsetAndOffset.r;
-  textureOffset = thetaOffsetAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
-
+  v_color = vec4(a_Color.xyz, a_Color.w * u_opacity);
   
   vec2 source = a_Instance.rg;  // 起始点
   vec2 target =  a_Instance.ba; // 终点
@@ -127,20 +92,15 @@ void main() {
   float total_Distance = pixelDistance(s, t) / 2.0 * PI;
   v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / total_Distance;
 
-  styleMappingMat[3].b = segmentIndex / segmentNumber;
+  v_distance_ratio = segmentIndex / segmentNumber;
 
-  // styleMappingMat[0][1] - arcThetaOffset
-  vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, styleMappingMat[0][1]), 0.0, 1.0));
-  vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, styleMappingMat[0][1]), 0.0, 1.0));
-  // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
-  //unProjCustomCoord
+  vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, u_thetaOffset), 0.0, 1.0));
+  vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, u_thetaOffset), 0.0, 1.0));
+ 
   
   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));
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    // gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
     gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
   } else {
     gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));

package/lib/line/shaders/dash/line_dash_frag.glsl

@@ -1,25 +1,22 @@
 #define LineTypeSolid 0.0
-uniform float u_opacity : 1.0;
-
 varying vec4 v_color;
 
 // dash
 varying vec4 v_dash_array;
+varying float v_d_distance_ratio;
 
 #pragma include "picking"
 
 uniform float u_time;
 uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ]; // 控制运动
 
-varying mat4 styleMappingMat;
 // [animate, duration, interval, trailLength],
 void main() {
-  float opacity = styleMappingMat[0][0];
-  float d_distance_ratio = styleMappingMat[3].r; // 当前点位距离占线总长的比例
+
   gl_FragColor = v_color;
-  gl_FragColor.a *= opacity; // 全局透明度
+
  
-  float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+  float dashLength = mod(v_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)) {
     // 实线部分
   } else {

package/lib/line/shaders/dash/line_dash_vert.glsl

@@ -25,49 +25,19 @@ uniform float u_vertexScale: 1.0;
 
 varying vec4 v_color;
 varying vec4 v_dash_array;
+varying float v_d_distance_ratio;
 
 uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
 
 void main() {
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0  // distance_ratio/distance/pixelLen/texV
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
 
   v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
-  v_color = a_Color;
+  v_color = vec4(a_Color.xyz, a_Color.w * u_opacity);
 
   vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
   vec2 offset = project_pixel(size.xy);
+  v_d_distance_ratio = a_DistanceAndIndex.x / a_Total_Distance;
 
-  // 设置数据集的参数
-  styleMappingMat[3][0] = a_DistanceAndIndex.x / a_Total_Distance; // 当前点位距离占线总长的比例
-  styleMappingMat[3][1] = a_DistanceAndIndex.x;       // 当前顶点的距离
 
   vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
 

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

@@ -0,0 +1,13 @@
+#extension GL_OES_standard_derivatives : enable
+
+varying vec4 v_color;
+
+
+// line texture
+
+#pragma include "picking"
+
+void main() {
+gl_FragColor = v_color;
+gl_FragColor = filterColor(gl_FragColor);
+}

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

@@ -0,0 +1,83 @@
+attribute vec4 a_Color;
+attribute vec2 a_Size;
+attribute vec4 a_Instance;
+attribute vec3 a_Normal;
+attribute vec3 a_Position;
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+
+#pragma include "projection"
+#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;
+
+
+void main() {
+
+// #ifdef USE_ATTRIBUTE_OPACITY
+//   float opacity  = a_Opacity;
+// #else
+//   float opacity = u_opacity;
+// #endif
+
+
+// #ifdef USE_ATTRIBUTE_OFFSETS
+//   vec2 offsets  = a_Offsets;
+// #else
+//   vec2 offsets = u_offsets;
+// #endif
+
+  // float opacity = u_opacity;
+// 透明度计算
+  vec2 source = a_Instance.rg;  // 起始点
+  vec2 target =  a_Instance.ba; // 终点
+  vec2 flowlineDir = normalize(target - source);
+  vec2 perpendicularDir = vec2(-flowlineDir.y, flowlineDir.x);
+
+
+  vec2 position = mix(source, target, a_Position.x);
+
+  float lengthCommon = length(target - source);    
+  vec2 offsetDistances = a_Size.x * project_pixel(a_Position.yz);
+  vec2 limitedOffsetDistances = clamp(   
+   offsetDistances,
+    -lengthCommon*.8, lengthCommon*.8
+  );
+
+  float startOffsetCommon = project_pixel(offsets[0]);
+  float endOffsetCommon = project_pixel(offsets[1]);
+  float endpointOffset = mix(
+    clamp(startOffsetCommon, 0.0, lengthCommon*.2),
+    -clamp(endOffsetCommon, 0.0, lengthCommon*.2),
+    a_Position.x
+  );
+
+  vec2 normalsCommon =  u_stroke_width * project_pixel(a_Normal.xy);
+
+  float gapCommon =  project_pixel(u_gap_width);
+  vec3 offsetCommon = vec3(
+    flowlineDir * (limitedOffsetDistances[1] + normalsCommon.y + endpointOffset * 1.05) -
+    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);
+
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * vec4(project_pos.xy + offsetCommon.xy, 0., 1.0);
+  } else {
+     gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offsetCommon.xy, 0., 1.0));
+  }
+
+
+
+  setPickingColor(a_PickingColor);
+}

package/lib/line/shaders/line_arc_3d_frag.glsl

@@ -3,33 +3,33 @@
 #define Animate 0.0
 #define LineTexture 1.0
 
-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 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;
+uniform float u_opacity;
 
 varying vec2 v_iconMapUV;
 
 uniform float u_time;
 uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
 
-varying mat4 styleMappingMat;
 
 #pragma include "picking"
 
 void main() {
-  float opacity = styleMappingMat[0][0];
+  float opacity = u_opacity;
   float animateSpeed = 0.0; // 运动速度
-  float d_distance_ratio = styleMappingMat[3].g; // 当前点位距离占线总长的比例
+  float d_distance_ratio = v_line_data.g; // 当前点位距离占线总长的比例
   gl_FragColor = v_color;
 
   gl_FragColor.a *= opacity;
@@ -61,7 +61,7 @@ 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 = styleMappingMat[3].b; // // 贴图在弧线上重复的数量
+    float count = v_line_data.b; // // 贴图在弧线上重复的数量
 
     float time = 0.0;
     if(u_animate.x == Animate) {
@@ -71,7 +71,7 @@ void main() {
 
     float u = fract(redioCount - time);
 
-    float v = styleMappingMat[3].a;  // 线图层贴图部分的 v 坐标值
+    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);