@antv/l7-layers 2.25.7 → 2.25.10

package/lib/index.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  CanvasLayer: true,
+  CityBuildingLayer: true,
+  BaseLayer: true,
+  BaseModel: true,
+  GeometryLayer: true,
+  HeatmapLayer: true,
+  ImageLayer: true,
+  LineLayer: true,
+  PointLayer: true,
+  PolygonLayer: true,
+  RasterLayer: true,
+  TileLayer: true,
+  TileDebugLayer: true,
+  EarthLayer: true,
+  MaskLayer: true,
+  WindLayer: true
+};
+Object.defineProperty(exports, "BaseLayer", {
+  enumerable: true,
+  get: function () {
+    return _BaseLayer.default;
+  }
+});
+Object.defineProperty(exports, "BaseModel", {
+  enumerable: true,
+  get: function () {
+    return _BaseModel.default;
+  }
+});
+Object.defineProperty(exports, "CanvasLayer", {
+  enumerable: true,
+  get: function () {
+    return _canvas.default;
+  }
+});
+Object.defineProperty(exports, "CityBuildingLayer", {
+  enumerable: true,
+  get: function () {
+    return _building.default;
+  }
+});
+Object.defineProperty(exports, "EarthLayer", {
+  enumerable: true,
+  get: function () {
+    return _earth.default;
+  }
+});
+Object.defineProperty(exports, "GeometryLayer", {
+  enumerable: true,
+  get: function () {
+    return _geometry.default;
+  }
+});
+Object.defineProperty(exports, "HeatmapLayer", {
+  enumerable: true,
+  get: function () {
+    return _heatmap.default;
+  }
+});
+Object.defineProperty(exports, "ImageLayer", {
+  enumerable: true,
+  get: function () {
+    return _image.default;
+  }
+});
+Object.defineProperty(exports, "LineLayer", {
+  enumerable: true,
+  get: function () {
+    return _index.default;
+  }
+});
+Object.defineProperty(exports, "MaskLayer", {
+  enumerable: true,
+  get: function () {
+    return _mask.default;
+  }
+});
+Object.defineProperty(exports, "PointLayer", {
+  enumerable: true,
+  get: function () {
+    return _point.default;
+  }
+});
+Object.defineProperty(exports, "PolygonLayer", {
+  enumerable: true,
+  get: function () {
+    return _polygon.default;
+  }
+});
+Object.defineProperty(exports, "RasterLayer", {
+  enumerable: true,
+  get: function () {
+    return _raster.default;
+  }
+});
+Object.defineProperty(exports, "TileDebugLayer", {
+  enumerable: true,
+  get: function () {
+    return _TileDebugLayer.default;
+  }
+});
+Object.defineProperty(exports, "TileLayer", {
+  enumerable: true,
+  get: function () {
+    return _BaseLayer2.default;
+  }
+});
+Object.defineProperty(exports, "WindLayer", {
+  enumerable: true,
+  get: function () {
+    return _wind.default;
+  }
+});
+var _canvas = _interopRequireDefault(require("./canvas"));
+var _building = _interopRequireDefault(require("./citybuilding/building"));
+var _BaseLayer = _interopRequireDefault(require("./core/BaseLayer"));
+var _BaseModel = _interopRequireDefault(require("./core/BaseModel"));
+var _geometry = _interopRequireDefault(require("./geometry"));
+var _heatmap = _interopRequireDefault(require("./heatmap"));
+var _image = _interopRequireDefault(require("./image"));
+var _index = _interopRequireDefault(require("./line/index"));
+var _point = _interopRequireDefault(require("./point"));
+var _polygon = _interopRequireDefault(require("./polygon"));
+var _raster = _interopRequireDefault(require("./raster"));
+var _BaseLayer2 = _interopRequireDefault(require("./tile/core/BaseLayer"));
+var _TileDebugLayer = _interopRequireDefault(require("./tile/core/TileDebugLayer"));
+var _earth = _interopRequireDefault(require("./earth"));
+var _mask = _interopRequireDefault(require("./mask"));
+var _wind = _interopRequireDefault(require("./wind"));
+var _interface = require("./core/interface");
+Object.keys(_interface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _interface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _interface[key];
+    }
+  });
+});

package/lib/line/index.d.ts

@@ -0,0 +1,36 @@
+import type { IParseDataItem } from '@antv/l7-core';
+import BaseLayer from '../core/BaseLayer';
+import type { ILineLayerStyleOptions } from '../core/interface';
+import type { LineModelType } from './models';
+export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
+    type: string;
+    enableShaderEncodeStyles: string[];
+    arrowInsertCount: number;
+    defaultSourceConfig: {
+        data: {
+            lng1: number;
+            lat1: number;
+            lng2: number;
+            lat2: number;
+        }[];
+        options: {
+            parser: {
+                type: string;
+                x: string;
+                y: string;
+                x1: string;
+                y1: string;
+            };
+        };
+    };
+    buildModels(): Promise<void>;
+    protected getDefaultConfig(): {} | {} | {} | {
+        blend: string;
+    } | {
+        blend: string;
+    } | {
+        blend: string;
+    } | {} | {};
+    getModelType(): LineModelType;
+    processData(filterData: IParseDataItem[]): IParseDataItem[];
+}

package/lib/line/index.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _BaseLayer = _interopRequireDefault(require("../core/BaseLayer"));
+var _models = _interopRequireDefault(require("./models"));
+class LineLayer extends _BaseLayer.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "type", 'LineLayer');
+    (0, _defineProperty2.default)(this, "enableShaderEncodeStyles", ['stroke', 'offsets', 'opacity', 'thetaOffset']);
+    //注意顺序 4+2+1+1
+    (0, _defineProperty2.default)(this, "arrowInsertCount", 0);
+    (0, _defineProperty2.default)(this, "defaultSourceConfig", {
+      data: [{
+        lng1: 100,
+        lat1: 30.0,
+        lng2: 130,
+        lat2: 30
+      }],
+      options: {
+        parser: {
+          type: 'json',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      }
+    });
+  }
+  buildModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const shape = _this.getModelType();
+      _this.layerModel = new _models.default[shape](_this);
+      yield _this.initLayerModels();
+    })();
+  }
+  getDefaultConfig() {
+    const type = this.getModelType();
+    const defaultConfig = {
+      line: {},
+      linearline: {},
+      simple: {},
+      wall: {},
+      arc3d: {
+        blend: 'additive'
+      },
+      arc: {
+        blend: 'additive'
+      },
+      greatcircle: {
+        blend: 'additive'
+      },
+      tileLine: {},
+      earthArc3d: {},
+      flowline: {},
+      arrow: {}
+    };
+    return defaultConfig[type];
+  }
+  getModelType() {
+    var _this$shapeOption;
+    if (this.layerType) {
+      return this.layerType;
+    }
+    const shape = (_this$shapeOption = this.shapeOption) === null || _this$shapeOption === void 0 ? void 0 : _this$shapeOption.field;
+    return shape || 'line';
+  }
+  processData(filterData) {
+    // simple line 在接受 multiPolygon 的数据进行绘制的时候需要对数据进行拆解
+    if (this.getModelType() !== 'simple') {
+      return filterData;
+    }
+    const dataArray = [];
+    filterData.map(data => {
+      if (Array.isArray(data.coordinates) && Array.isArray(data.coordinates[0]) && Array.isArray(data.coordinates[0][0])) {
+        const object = (0, _objectSpread2.default)({}, data);
+        data.coordinates.map(d => {
+          dataArray.push((0, _objectSpread2.default)((0, _objectSpread2.default)({}, object), {}, {
+            coordinates: d
+          }));
+        });
+      } else {
+        dataArray.push(data);
+      }
+    });
+    return dataArray;
+  }
+}
+exports.default = LineLayer;

package/lib/line/models/arc.d.ts

@@ -0,0 +1,40 @@
+import type { IModel, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class ArcModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        SIZE: number;
+        INSTANCE: number;
+        INSTANCE_64LOW: number;
+        UV: number;
+        THETA_OFFSET: number;
+    };
+    protected texture: ITexture2D;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    clearModels(): void;
+    getShaders(): {
+        frag: string;
+        vert: string;
+        type: string;
+    };
+    buildModels(): Promise<IModel[]>;
+    protected registerBuiltinAttributes(): void;
+    private updateTexture;
+}

package/lib/line/models/arc.js

@@ -0,0 +1,287 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _l7Core = require("@antv/l7-core");
+var _l7Utils = require("@antv/l7-utils");
+var _BaseModel = _interopRequireDefault(require("../../core/BaseModel"));
+var _triangulation = require("../../core/triangulation");
+/* babel-plugin-inline-import '../shaders/arc/line_arc_frag.glsl' */
+const arc_line_frag = "\n#define Animate 0.0\n#define LineTexture 1.0\nuniform sampler2D u_texture;\nlayout(std140) uniform commonUniorm {\n  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];\n  vec4 u_dash_array;\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  vec2 u_textSize;\n  float segmentNumber;\n  float u_lineDir: 1.0;\n  float u_icon_step: 100;\n  float u_line_texture: 0.0;\n  float u_textureBlend;\n  float u_blur : 0.9;\n  float u_line_type: 0.0;\n  float u_time;\n  float u_linearColor: 0.0;\n};\n\nin vec4 v_color;\nin vec2 v_iconMapUV;\nin vec4 v_lineData;\n//dash\nin vec4 v_dash_array;\nin float v_distance_ratio;\n\nout vec4 outputColor;\n#pragma include \"picking\"\n\nvoid main() {\n  if(u_dash_array!=vec4(0.0)){\n    float dashLength = mod(v_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      discard;\n    };\n  }\n  float animateSpeed = 0.0; // \u8FD0\u52A8\u901F\u5EA6\n  outputColor = v_color;\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- v_lineData.b, 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      outputColor.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, (v_lineData.r / segmentNumber));\n    // float arcRadio = smoothstep( 0.0, 1.0, d_distance_ratio);\n\n    float count = v_lineData.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 = v_lineData.a; // \u6A2A\u5411 v\n    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;\n\n    vec4 pattern = texture(SAMPLER_2D(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      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  } else {\n     outputColor = filterColor(outputColor);\n  }\n}";
+/* babel-plugin-inline-import '../shaders/arc/line_arc_vert.glsl' */
+const arc_line_vert = "#define Animate (0.0)\n#define LineTexture (1.0)\n\nlayout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_INSTANCE) in vec4 a_Instance;\nlayout(location = ATTRIBUTE_LOCATION_INSTANCE_64LOW) in vec4 a_Instance64Low;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_iconMapUV;\n\nlayout(std140) uniform commonUniorm {\n  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];\n  vec4 u_dash_array;\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  vec2 u_textSize;\n  float segmentNumber;\n  float u_lineDir: 1.0;\n  float u_icon_step: 100;\n  float u_line_texture: 0.0;\n  float u_textureBlend;\n  float u_blur : 0.9;\n  float u_line_type: 0.0;\n  float u_time;\n  float u_linearColor: 0.0;\n};\n\nout vec4 v_color;\nout vec2 v_iconMapUV;\nout vec4 v_lineData;\n//dash\nout vec4 v_dash_array;\nout float v_distance_ratio;\n\n#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"picking\"\n\nfloat bezier3(vec3 arr, float t) {\n  float ut = 1.0 - 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) {\n    // \u6B63\u5411\n    return mid;\n  } else {\n    // \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.0));\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 dir_screenspace.xy * sign(offset_direction);\n}\n\nvoid main() {\n  //vs\u4E2D\u8BA1\u7B97\u6E10\u53D8\u8272\n  if (u_linearColor == 1.0) {\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    v_color = mix(u_sourceColor, u_targetColor, d_segmentIndex / segmentNumber);\n  } else {\n    v_color = a_Color;\n  }\n  v_color.a = v_color.a * opacity;\n\n  vec2 source_world = a_Instance.rg; // \u8D77\u59CB\u70B9\n  vec2 target_world = a_Instance.ba; // \u7EC8\u70B9\n\n  float segmentIndex = a_Position.x;\n  float segmentRatio = getSegmentRatio(segmentIndex);\n\n  // \u8BA1\u7B97 dashArray \u548C distanceRatio \u8F93\u51FA\u5230\u7247\u5143\n  float total_Distance = pixelDistance(source_world, target_world) / 2.0 * PI;\n  v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / total_Distance;\n  v_distance_ratio = segmentIndex / segmentNumber;\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  v_lineData.b = d_distance_ratio;\n\n  vec4 source = project_position(vec4(source_world, 0, 1.), a_Instance64Low.xy);\n  vec4 target = project_position(vec4(target_world, 0, 1.), a_Instance64Low.zw);\n\n  vec2 currPos = interpolate(source.xy, target.xy, segmentRatio, thetaOffset);\n  vec2 nextPos = interpolate(source.xy, target.xy, nextSegmentRatio, thetaOffset);\n\n  vec2 offset = project_pixel(\n    getExtrusionOffset((nextPos.xy - currPos.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  v_lineData.r = d_segmentIndex;\n\n  if(LineTexture == u_line_texture) { // \u5F00\u542F\u8D34\u56FE\u6A21\u5F0F\n    float arcDistrance = length(source - target); // \u8D77\u59CB\u70B9\u548C\u7EC8\u70B9\u7684\u8DDD\u79BB\n    arcDistrance = project_pixel(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    v_lineData.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    v_lineData.a = lineOffsetWidth / linePixelSize; // \u7EBF\u56FE\u5C42\u8D34\u56FE\u90E8\u5206\u7684 v \u5750\u6807\u503C\n  }\n\n  gl_Position = project_common_position_to_clipspace(vec4(currPos.xy + offset, 0, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+const lineStyleObj = {
+  solid: 0.0,
+  dash: 1.0
+};
+class ArcModel extends _BaseModel.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "texture", void 0);
+    (0, _defineProperty2.default)(this, "updateTexture", () => {
+      const {
+        createTexture2D
+      } = this.rendererService;
+      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,
+        min: _l7Core.gl.NEAREST,
+        premultiplyAlpha: false,
+        width: 1024,
+        height: this.iconService.canvasHeight || 128
+      });
+      this.textures = [this.texture];
+    });
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      INSTANCE: 10,
+      INSTANCE_64LOW: 11,
+      UV: 12,
+      THETA_OFFSET: 13
+    });
+  }
+  getCommonUniformsInfo() {
+    const {
+      sourceColor,
+      targetColor,
+      textureBlend = 'normal',
+      lineType = 'solid',
+      dashArray = [10, 5],
+      forward = true,
+      lineTexture = false,
+      iconStep = 100,
+      segmentNumber = 30
+      // thetaOffset = 0.314,
+    } = this.layer.getLayerConfig();
+    const {
+      animateOption
+    } = this.layer.getLayerConfig();
+    let u_dash_array = dashArray;
+    if (lineType !== 'dash') {
+      u_dash_array = [0, 0];
+    }
+    if (u_dash_array.length === 2) {
+      u_dash_array.push(0, 0);
+    }
+
+    // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
+    let sourceColorArr = [0, 0, 0, 0];
+    let targetColorArr = [0, 0, 0, 0];
+    if (sourceColor && targetColor) {
+      sourceColorArr = (0, _l7Utils.rgb2arr)(sourceColor);
+      targetColorArr = (0, _l7Utils.rgb2arr)(targetColor);
+      useLinearColor = 1;
+    }
+    if (this.rendererService.getDirty()) {
+      var _this$texture;
+      (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.bind();
+    }
+    const commonOptions = {
+      u_animate: this.animateOption2Array(animateOption),
+      u_dash_array,
+      u_sourceColor: sourceColorArr,
+      u_targetColor: targetColorArr,
+      u_textSize: [1024, this.iconService.canvasHeight || 128],
+      segmentNumber,
+      u_lineDir: forward ? 1 : -1,
+      u_icon_step: iconStep,
+      u_line_texture: lineTexture ? 1.0 : 0.0,
+      // 传入线的标识
+      u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
+      u_blur: 0.9,
+      u_line_type: lineStyleObj[lineType || 'solid'],
+      u_time: this.layer.getLayerAnimateTime() || 0,
+      // // 纹理支持参数
+      // u_texture: this.texture, // 贴图
+      // 渐变色支持参数
+      u_linearColor: useLinearColor
+    };
+    const 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(),
+  //   };
+  // }
+
+  initModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this.updateTexture();
+      _this.iconService.on('imageUpdate', _this.updateTexture);
+      return _this.buildModels();
+    })();
+  }
+  clearModels() {
+    var _this$texture2;
+    (_this$texture2 = this.texture) === null || _this$texture2 === void 0 || _this$texture2.destroy();
+    this.iconService.off('imageUpdate', this.updateTexture);
+  }
+  getShaders() {
+    return {
+      frag: arc_line_frag,
+      vert: arc_line_vert,
+      type: ''
+    };
+  }
+  buildModels() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this2.initUniformsBuffer();
+      const {
+        segmentNumber = 30
+      } = _this2.layer.getLayerConfig();
+      const {
+        frag,
+        vert,
+        type
+      } = _this2.getShaders();
+      //
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'lineArc2d' + type,
+        vertexShader: vert,
+        fragmentShader: frag,
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        triangulation: _triangulation.LineArcTriangulation,
+        depth: {
+          enable: false
+        },
+        styleOption: {
+          segmentNumber
+        }
+      });
+      return [model];
+    })();
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: _l7Core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 1
+          } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        }
+      }
+    });
+
+    // 弧线起始点信息
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'instance',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Instance',
+        shaderLocation: this.attributeLocation.INSTANCE,
+        buffer: {
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 4,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[3], vertex[4], vertex[5], vertex[6]];
+        }
+      }
+    });
+
+    // save low part for enabled double precision INSTANCE attribute
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'instance64Low',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Instance64Low',
+        shaderLocation: this.attributeLocation.INSTANCE_64LOW,
+        buffer: {
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 4,
+        update: (feature, featureIdx, vertex) => {
+          return [(0, _l7Utils.fp64LowPart)(vertex[3]), (0, _l7Utils.fp64LowPart)(vertex[4]), (0, _l7Utils.fp64LowPart)(vertex[5]), (0, _l7Utils.fp64LowPart)(vertex[6])];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_iconMapUV',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          usage: _l7Core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 2,
+        update: feature => {
+          const iconMap = this.iconService.getIconMap();
+          const {
+            texture
+          } = feature;
+          const {
+            x,
+            y
+          } = iconMap[texture] || {
+            x: 0,
+            y: 0
+          };
+          return [x, y];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'thetaOffset',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_ThetaOffset',
+        shaderLocation: this.attributeLocation.THETA_OFFSET,
+        buffer: {
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            thetaOffset: op = 1
+          } = feature;
+          return [op];
+        }
+      }
+    });
+  }
+}
+exports.default = ArcModel;

package/lib/line/models/arc_3d.d.ts

@@ -0,0 +1,40 @@
+import type { IModel, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class Arc3DModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        SIZE: number;
+        INSTANCE: number;
+        INSTANCE_64LOW: number;
+        UV: number;
+        THETA_OFFSET: number;
+    };
+    protected texture: ITexture2D;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    clearModels(): void;
+    getShaders(): {
+        frag: string;
+        vert: string;
+        type: string;
+    };
+    buildModels(): Promise<IModel[]>;
+    protected registerBuiltinAttributes(): void;
+    private updateTexture;
+}