@antv/l7-layers 2.25.7 → 2.25.10

package/es/point/models/earthExtrude.js

@@ -0,0 +1,199 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { AttributeType, gl } from '@antv/l7-core';
+import { calculateCentroid, lodashUtil, rgb2arr } from '@antv/l7-utils';
+import BaseModel from "../../core/BaseModel";
+import { PointExtrudeTriangulation } from "../../core/triangulation";
+import { lglt2xyz } from "../../earth/utils";
+/* babel-plugin-inline-import '../shaders/earthExtrude/earthExtrude_frag.glsl' */
+const pointExtrudeFrag = "precision highp float;\nin vec4 v_color;\n\n#pragma include \"picking\"\n\nlayout(std140) uniform commonUniform {\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_linearColor: 0;\n  float u_heightfixed: 0.0; // \u9ED8\u8BA4\u4E0D\u56FA\u5B9A\n  float u_globel;\n  float u_r;\n  float u_pickLight: 0.0;\n  float u_opacitylinear: 0.0;\n  float u_opacitylinear_dir: 1.0;\n  float u_lightEnable: 1.0;\n};\nin float v_lightWeight;\nin float v_barLinearZ;\nout vec4 outputColor;\nvoid main() {\n\n   outputColor = v_color;\n\n  // \u5F00\u542F\u900F\u660E\u5EA6\u6E10\u53D8\n  if(u_opacitylinear > 0.0) {\n    outputColor.a *= u_opacitylinear_dir > 0.0 ? (1.0 - v_barLinearZ): v_barLinearZ;\n  }\n\n  // picking\n  if(u_pickLight > 0.0) {\n    outputColor = filterColorAlpha(outputColor, v_lightWeight);\n  } else {\n    outputColor = filterColor(outputColor);\n  }\n}\n";
+/* babel-plugin-inline-import '../shaders/earthExtrude/earthExtrude_vert.glsl' */
+const pointExtrudeVert = "precision highp float;\n\n#define pi 3.1415926535\n#define ambientRatio 0.5\n#define diffuseRatio 0.3\n#define specularRatio 0.2\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 vec3 a_Size;\nlayout(location = ATTRIBUTE_LOCATION_POS) in vec3 a_Pos;\nlayout(location = ATTRIBUTE_LOCATION_NORMAL) in vec3 a_Normal;\n\nlayout(std140) uniform commonUniform {\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_linearColor: 0;\n  float u_heightfixed: 0.0; // \u9ED8\u8BA4\u4E0D\u56FA\u5B9A\n  float u_globel;\n  float u_r;\n  float u_pickLight: 0.0;\n  float u_opacitylinear: 0.0;\n  float u_opacitylinear_dir: 1.0;\n  float u_lightEnable: 1.0;\n};\n\nout vec4 v_color;\nout float v_lightWeight;\nout float v_barLinearZ;\n// \u7528\u4E8E\u5C06\u5728\u9876\u70B9\u7740\u8272\u5668\u4E2D\u8BA1\u7B97\u597D\u7684\u6837\u5F0F\u503C\u4F20\u9012\u7ED9\u7247\u5143\n\n\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\nfloat getYRadian(float x, float z) {\n  if(x > 0.0 && z > 0.0) {\n    return atan(x/z);\n  } else if(x > 0.0 && z <= 0.0){\n    return atan(-z/x) + pi/2.0;\n  } else if(x <= 0.0 && z <= 0.0) {\n    return  pi + atan(x/z); //atan(x/z) +\n  } else {\n    return atan(z/-x) + pi*3.0/2.0;\n  }\n}\n\nfloat getXRadian(float y, float r) {\n  return atan(y/r);\n}\n\nvoid main() {\n\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n  vec3 size = a_Size * a_Position;\n\n  // a_Position.z \u662F\u5728\u6784\u5EFA\u7F51\u683C\u7684\u65F6\u5019\u4F20\u5165\u7684\u6807\u51C6\u503C 0 - 1\uFF0C\u5728\u63D2\u503C\u5668\u63D2\u503C\u53EF\u4EE5\u83B7\u53D6 0\uFF5E1 \u7EBF\u6027\u6E10\u53D8\u7684\u503C\n  v_barLinearZ =  a_Position.z;\n\n  vec3 offset = size; // \u63A7\u5236\u5706\u67F1\u4F53\u7684\u5927\u5C0F - \u4ECE\u6807\u51C6\u5355\u4F4D\u5706\u67F1\u4F53\u8FDB\u884C\u504F\u79FB\n  if(u_heightfixed < 1.0) { // \u5706\u67F1\u4F53\u4E0D\u56FA\u5B9A\u9AD8\u5EA6\n    //\n  } else {// \u5706\u67F1\u4F53\u56FA\u5B9A\u9AD8\u5EA6 \uFF08 \u5904\u7406 mapbox \uFF09\n    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n      offset *= 4.0/pow(2.0, 21.0 - u_Zoom);\n    }\n  }\n\n\n  vec4 project_pos = project_position(vec4(a_Pos.xy, 0., 1.0));\n\n  // u_r \u63A7\u5236\u5706\u67F1\u7684\u751F\u957F\n  vec4 pos = vec4(project_pos.xy + offset.xy, offset.z * u_r, 1.0);\n\n  // \u5706\u67F1\u5149\u7167\u6548\u679C\n  float lightWeight = 1.0;\n  if(u_lightEnable > 0.0) { // \u53D6\u6D88\u4E09\u5143\u8868\u8FBE\u5F0F\uFF0C\u589E\u5F3A\u5065\u58EE\u6027\n    lightWeight = calc_lighting(pos);\n  }\n  v_lightWeight = lightWeight;\n  // \u8BBE\u7F6E\u5706\u67F1\u7684\u5E95\u8272\n  if(u_linearColor == 1.0) { // \u4F7F\u7528\u6E10\u53D8\u989C\u8272\n    v_color = mix(u_sourceColor, u_targetColor, v_barLinearZ);\n    v_color.rgb *= lightWeight;\n  } else { // \u4F7F\u7528 color \u65B9\u6CD5\u4F20\u5165\u7684\u989C\u8272\n     v_color = a_Color;\n  }\n  v_color.a *= u_opacity;\n\n\n  // \u5728\u5730\u7403\u6A21\u5F0F\u4E0B\uFF0C\u5C06\u539F\u672C\u5782\u76F4\u4E8E xy \u5E73\u9762\u7684\u5706\u67F1\u8C03\u6574\u59FF\u6001\u5230\u9002\u5E94\u5706\u7684\u89D2\u5EA6\n  //\u65CB\u8F6C\u77E9\u9635mx\uFF0C\u521B\u5EFA\u7ED5x\u8F74\u65CB\u8F6C\u77E9\u9635\n  float r = sqrt(a_Pos.z*a_Pos.z + a_Pos.x*a_Pos.x);\n  float xRadian = getXRadian(a_Pos.y, r);\n  float xcos = cos(xRadian);//\u6C42\u89E3\u65CB\u8F6C\u89D2\u5EA6\u4F59\u5F26\u503C\n  float xsin = sin(xRadian);//\u6C42\u89E3\u65CB\u8F6C\u89D2\u5EA6\u6B63\u5F26\u503C\n  mat4 mx = mat4(\n    1,0,0,0,\n    0,xcos,-xsin,0,\n    0,xsin,xcos,0,\n    0,0,0,1);\n\n  //\u65CB\u8F6C\u77E9\u9635my\uFF0C\u521B\u5EFA\u7ED5y\u8F74\u65CB\u8F6C\u77E9\u9635\n  float yRadian = getYRadian(a_Pos.x, a_Pos.z);\n  float ycos = cos(yRadian);//\u6C42\u89E3\u65CB\u8F6C\u89D2\u5EA6\u4F59\u5F26\u503C\n  float ysin = sin(yRadian);//\u6C42\u89E3\u65CB\u8F6C\u89D2\u5EA6\u6B63\u5F26\u503C\n  mat4 my = mat4(\n    ycos,0,-ysin,0,\n    0,1,0,0,\n    ysin,0,ycos,0,\n    0,0,0,1);\n\n  gl_Position = u_ViewProjectionMatrix * vec4(( my * mx *  vec4(a_Position * a_Size, 1.0)).xyz + a_Pos, 1.0);\n\n\n  setPickingColor(a_PickingColor);\n}\n";
+const {
+  isNumber
+} = lodashUtil;
+export default class ExtrudeModel extends BaseModel {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "raiseCount", 0);
+    _defineProperty(this, "raiseRepeat", 0);
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      POS: 10,
+      NORMAL: 11
+    });
+  }
+  getCommonUniformsInfo() {
+    const {
+      animateOption = {
+        enable: false,
+        speed: 0.01,
+        repeat: false
+      },
+      opacity = 1,
+      sourceColor,
+      targetColor,
+      pickLight = false,
+      heightfixed = true,
+      opacityLinear = {
+        enable: false,
+        dir: 'up'
+      },
+      lightEnable = true
+    } = this.layer.getLayerConfig();
+
+    // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
+    let sourceColorArr = [0, 0, 0, 0];
+    let targetColorArr = [0, 0, 0, 0];
+    if (sourceColor && targetColor) {
+      sourceColorArr = rgb2arr(sourceColor);
+      targetColorArr = rgb2arr(targetColor);
+      useLinearColor = 1;
+    }
+    if (this.raiseCount < 1 && this.raiseRepeat > 0) {
+      if (animateOption.enable) {
+        const {
+          speed = 0.01
+        } = animateOption;
+        this.raiseCount += speed;
+        if (this.raiseCount >= 1) {
+          if (this.raiseRepeat > 1) {
+            this.raiseCount = 0;
+            this.raiseRepeat--;
+          } else {
+            this.raiseCount = 1;
+          }
+        }
+      }
+    }
+    const commonOptions = {
+      u_sourceColor: sourceColorArr,
+      u_targetColor: targetColorArr,
+      // 渐变色支持参数
+      u_linearColor: useLinearColor,
+      // 圆柱体的拾取高亮是否要计算光照
+      u_pickLight: Number(pickLight),
+      // 圆柱体是否固定高度
+      u_heightfixed: Number(heightfixed),
+      u_r: animateOption.enable && this.raiseRepeat > 0 ? this.raiseCount : 1.0,
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
+      // 透明度渐变
+      u_opacitylinear: Number(opacityLinear.enable),
+      u_opacitylinear_dir: opacityLinear.dir === 'up' ? 1.0 : 0.0,
+      // 光照计算开关
+      u_lightEnable: Number(lightEnable)
+    };
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.initUniformsBuffer();
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      const {
+        animateOption: {
+          repeat = 1
+        }
+      } = _this2.layer.getLayerConfig();
+      _this2.raiseRepeat = repeat;
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'pointEarthExtrude',
+        vertexShader: pointExtrudeVert,
+        fragmentShader: pointExtrudeFrag,
+        triangulation: PointExtrudeTriangulation,
+        depth: {
+          enable: true
+        },
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        cull: {
+          enable: true,
+          face: gl.FRONT
+        },
+        blend: _this2.getBlend()
+      });
+      return [model];
+    })();
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: feature => {
+          const {
+            size
+          } = feature;
+          if (size) {
+            let buffersize = [];
+            if (Array.isArray(size)) {
+              buffersize = size.length === 2 ? [size[0], size[0], size[1]] : size;
+            }
+            if (!Array.isArray(size)) {
+              buffersize = [size, size, size];
+            }
+            return buffersize;
+          } else {
+            return [2, 2, 2];
+          }
+        }
+      }
+    });
+
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'normal',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Normal',
+        shaderLocation: this.attributeLocation.NORMAL,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.STATIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex, attributeIdx, normal) => {
+          return normal;
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'pos',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Pos',
+        shaderLocation: this.attributeLocation.POS,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: feature => {
+          const coordinates = calculateCentroid(feature.coordinates);
+          return lglt2xyz([coordinates[0], coordinates[1]]);
+        }
+      }
+    });
+  }
+}

package/es/point/models/earthFill.d.ts

@@ -0,0 +1,31 @@
+import type { IAnimateOption, IModel } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class FillModel 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;
+        SHAPE: number;
+        EXTRUDE: number;
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    protected animateOption2Array(option: Partial<IAnimateOption>): number[];
+    protected registerBuiltinAttributes(): void;
+}

package/es/point/models/earthFill.js

@@ -0,0 +1,158 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { AttributeType, gl } from '@antv/l7-core';
+import BaseModel from "../../core/BaseModel";
+import { GlobelPointFillTriangulation } from "../../core/triangulation";
+/* babel-plugin-inline-import '../shaders/earthFill/earthFill_frag.glsl' */
+const pointFillFrag = "in vec4 v_data;\nin vec4 v_color;\nin float v_radius;\n\nlayout(std140) uniform commonUniform {\n  float u_additive;\n  float u_stroke_opacity : 1;\n  float u_stroke_width : 2;\n  float u_blur : 0.0;\n};\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main() {\n  int shape = int(floor(v_data.w + 0.5));\n\n  vec4 strokeColor = u_stroke == vec4(0.0) ? v_color : u_stroke;\n\n  lowp float antialiasblur = v_data.z;\n  float r = v_radius / (v_radius + u_stroke_width);\n\n  float outer_df;\n  float inner_df;\n  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'\n  if (shape == 0) {\n    outer_df = sdCircle(v_data.xy, 1.0);\n    inner_df = sdCircle(v_data.xy, r);\n  } else if (shape == 1) {\n    outer_df = sdEquilateralTriangle(1.1 * v_data.xy);\n    inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy);\n  } else if (shape == 2) {\n    outer_df = sdBox(v_data.xy, vec2(1.));\n    inner_df = sdBox(v_data.xy, vec2(r));\n  } else if (shape == 3) {\n    outer_df = sdPentagon(v_data.xy, 0.8);\n    inner_df = sdPentagon(v_data.xy, r * 0.8);\n  } else if (shape == 4) {\n    outer_df = sdHexagon(v_data.xy, 0.8);\n    inner_df = sdHexagon(v_data.xy, r * 0.8);\n  } else if (shape == 5) {\n    outer_df = sdOctogon(v_data.xy, 1.0);\n    inner_df = sdOctogon(v_data.xy, r);\n  } else if (shape == 6) {\n    outer_df = sdHexagram(v_data.xy, 0.52);\n    inner_df = sdHexagram(v_data.xy, r * 0.52);\n  } else if (shape == 7) {\n    outer_df = sdRhombus(v_data.xy, vec2(1.0));\n    inner_df = sdRhombus(v_data.xy, vec2(r));\n  } else if (shape == 8) {\n    outer_df = sdVesica(v_data.xy, 1.1, 0.8);\n    inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8);\n  }\n\n  if(outer_df > antialiasblur + 0.018) discard;\n\n  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);\n\n  float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(\n    antialiasblur,\n    0.0,\n    inner_df\n  );\n\n  if(u_stroke_width < 0.01) {\n    outputColor = vec4(v_color.rgb, v_color.a * u_opacity);\n  } else {\n    outputColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);\n  }\n\n  if(u_additive > 0.0) {\n    outputColor *= opacity_t;\n    outputColor = filterColorAlpha(outputColor, outputColor.a);\n  } else {\n    outputColor.a *= opacity_t;\n    outputColor = filterColor(outputColor);\n  }\n}\n";
+/* babel-plugin-inline-import '../shaders/earthFill/earthFill_vert.glsl' */
+const pointFillVert = "layout(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_SHAPE) in float a_Shape;\nlayout(location = ATTRIBUTE_LOCATION_EXTRUDE) in vec3 a_Extrude;\n\nlayout(std140) uniform commonUniform {\n  float u_additive;\n  float u_stroke_opacity : 1;\n  float u_stroke_width : 2;\n  float u_blur : 0.0;\n};\nout vec4 v_data;\nout vec4 v_color;\nout float v_radius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\n\nvoid main() {\n  vec3 extrude = a_Extrude;\n  float shape_type = a_Shape;\n  /*\n  *  setPickingSize \u8BBE\u7F6E\u62FE\u53D6\u5927\u5C0F\n  */\n  float newSize = setPickingSize(a_Size);\n  // float newSize = setPickingSize(a_Size) * 0.00001038445708445579;\n\n  // unpack color(vec2)\n  v_color = a_Color;\n\n  // radius(16-bit)\n  v_radius = newSize;\n\n  // anti-alias\n  //  float antialiased_blur = -max(u_blur, antialiasblur);\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur);\n\n  // TODP: /abs(extrude.x) \u662F\u4E3A\u4E86\u517C\u5BB9\u5730\u7403\u6A21\u5F0F\n  v_data = vec4(extrude.x/abs(extrude.x), extrude.y/abs(extrude.y), antialiasblur,shape_type);\n\n  gl_Position = u_ViewProjectionMatrix * vec4(a_Position + extrude * newSize * 0.1 + vec3(u_offsets,0.0), 1.0);\n\n  setPickingColor(a_PickingColor);\n}\n";
+import { mat4, vec3 } from 'gl-matrix';
+export default class FillModel extends BaseModel {
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      SHAPE: 10,
+      EXTRUDE: 11
+    });
+  }
+  getCommonUniformsInfo() {
+    const {
+      strokeOpacity = 1,
+      strokeWidth = 0,
+      // offsets = [0, 0],
+      blend,
+      blur = 0
+    } = this.layer.getLayerConfig();
+    this.layer.getLayerConfig();
+    const commonOptions = {
+      u_additive: blend === 'additive' ? 1.0 : 0.0,
+      u_stroke_opacity: strokeOpacity,
+      u_stroke_width: strokeWidth,
+      u_blur: blur
+    };
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.initUniformsBuffer();
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      _this2.layer.triangulation = GlobelPointFillTriangulation;
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'pointEarthFill',
+        vertexShader: pointFillVert,
+        fragmentShader: pointFillFrag,
+        triangulation: GlobelPointFillTriangulation,
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        depth: {
+          enable: true
+        },
+        blend: _this2.getBlend()
+      });
+      return [model];
+    })();
+  }
+
+  // overwrite baseModel func
+  animateOption2Array(option) {
+    return [option.enable ? 0 : 1.0, option.speed || 1, option.rings || 3, 0];
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'extrude',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Extrude',
+        shaderLocation: this.attributeLocation.EXTRUDE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex, attributeIdx) => {
+          const [x, y, z] = vertex;
+          const n1 = vec3.fromValues(0, 0, 1);
+          const n2 = vec3.fromValues(x, 0, z);
+          const xzReg = x >= 0 ? vec3.angle(n1, n2) : Math.PI * 2 - vec3.angle(n1, n2);
+          const yReg = Math.PI * 2 - Math.asin(y / 100);
+          const m = mat4.create();
+          mat4.rotateY(m, m, xzReg);
+          mat4.rotateX(m, m, yReg);
+          const v1 = vec3.fromValues(1, 1, 0);
+          vec3.transformMat4(v1, v1, m);
+          vec3.normalize(v1, v1);
+          const v2 = vec3.fromValues(-1, 1, 0);
+          vec3.transformMat4(v2, v2, m);
+          vec3.normalize(v2, v2);
+          const v3 = vec3.fromValues(-1, -1, 0);
+          vec3.transformMat4(v3, v3, m);
+          vec3.normalize(v3, v3);
+          const v4 = vec3.fromValues(1, -1, 0);
+          vec3.transformMat4(v4, v4, m);
+          vec3.normalize(v4, v4);
+          const extrude = [...v1, ...v2, ...v3, ...v4];
+          const extrudeIndex = attributeIdx % 4 * 3;
+          return [extrude[extrudeIndex], extrude[extrudeIndex + 1], extrude[extrudeIndex + 2]];
+        }
+      }
+    });
+
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 5
+          } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        }
+      }
+    });
+
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'shape',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Shape',
+        shaderLocation: this.attributeLocation.SHAPE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            shape = 2
+          } = feature;
+          const shape2d = this.layer.getLayerConfig().shape2d;
+          const shapeIndex = shape2d.indexOf(shape);
+          return [shapeIndex];
+        }
+      }
+    });
+  }
+}

package/es/point/models/extrude.d.ts

@@ -0,0 +1,32 @@
+import type { IModel } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class ExtrudeModel 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;
+        EXTRUDE: number;
+        NORMAL: number;
+    };
+    private raiseCount;
+    private raiseRepeat;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    protected registerBuiltinAttributes(): void;
+}

package/es/point/models/extrude.js

@@ -0,0 +1,195 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { AttributeType, gl } from '@antv/l7-core';
+import { calculateCentroid, fp64LowPart, rgb2arr } from '@antv/l7-utils';
+import BaseModel from "../../core/BaseModel";
+import { PointExtrudeTriangulation } from "../../core/triangulation";
+/* babel-plugin-inline-import '../shaders/extrude/extrude_frag.glsl' */
+const pointExtrudeFrag = "in vec4 v_color;\nin float v_lightWeight;\nout vec4 outputColor;\n\nlayout(std140) uniform commonUniforms {\n  float u_pickLight;\n  float u_heightfixed;\n  float u_r;\n  float u_linearColor;\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_opacitylinear;\n  float u_opacitylinear_dir;\n  float u_lightEnable;\n};\n\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\n\nvoid main() {\n  outputColor = v_color;\n  // \u5F00\u542F\u900F\u660E\u5EA6\u6E10\u53D8\n  // picking\n  if (u_pickLight > 0.0) {\n    outputColor = filterColorAlpha(outputColor, v_lightWeight);\n  } else {\n    outputColor = filterColor(outputColor);\n  }\n}\n";
+/* babel-plugin-inline-import '../shaders/extrude/extrude_vert.glsl' */
+const pointExtrudeVert = "#define pi (3.1415926535)\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 vec3 a_Size;\nlayout(location = ATTRIBUTE_LOCATION_EXTRUDE) in vec4 a_Extrude;\nlayout(location = ATTRIBUTE_LOCATION_NORMAL) in vec3 a_Normal;\n\nlayout(std140) uniform commonUniforms {\n  float u_pickLight;\n  float u_heightfixed;\n  float u_r;\n  float u_linearColor;\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_opacitylinear;\n  float u_opacitylinear_dir;\n  float u_lightEnable;\n};\nout vec4 v_color;\nout float v_lightWeight;\n\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\nfloat getYRadian(float x, float z) {\n  if (x > 0.0 && z > 0.0) {\n    return atan(x / z);\n  } else if (x > 0.0 && z <= 0.0) {\n    return atan(-z / x) + pi / 2.0;\n  } else if (x <= 0.0 && z <= 0.0) {\n    return pi + atan(x / z); //atan(x/z) +\n  } else {\n    return atan(z / -x) + pi * 3.0 / 2.0;\n  }\n}\n\nfloat getXRadian(float y, float r) {\n  return atan(y / r);\n}\n\nvoid main() {\n  vec3 size = a_Size * a_Position;\n\n  vec3 offset = size; // \u63A7\u5236\u5706\u67F1\u4F53\u7684\u5927\u5C0F - \u4ECE\u6807\u51C6\u5355\u4F4D\u5706\u67F1\u4F53\u8FDB\u884C\u504F\u79FB\n\n  if (u_heightfixed < 1.0) {\n    // \u5706\u67F1\u4F53\u4E0D\u56FA\u5B9A\u9AD8\u5EA6\n  } else {\n    // \u5706\u67F1\u4F53\u56FA\u5B9A\u9AD8\u5EA6 \uFF08 \u5904\u7406 mapbox \uFF09\n    if (\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    ) {\n      offset *= 4.0 / pow(2.0, 21.0 - u_Zoom);\n    }\n  }\n\n  vec2 positions = a_Extrude.xy;\n  vec2 positions64Low = a_Extrude.zw;\n  vec4 project_pos = project_position(vec4(positions, 0.0, 1.0), positions64Low);\n\n  // u_r \u63A7\u5236\u5706\u67F1\u7684\u751F\u957F\n  vec4 pos = vec4(project_pos.xy + offset.xy, offset.z * u_r, 1.0);\n\n  // // \u5706\u67F1\u5149\u7167\u6548\u679C\n  float lightWeight = 1.0;\n\n  if (u_lightEnable > 0.0) {\n    // \u53D6\u6D88\u4E09\u5143\u8868\u8FBE\u5F0F\uFF0C\u589E\u5F3A\u5065\u58EE\u6027\n    lightWeight = calc_lighting(pos);\n  }\n\n  v_lightWeight = lightWeight;\n\n  v_color = a_Color;\n\n  // \u8BBE\u7F6E\u5706\u67F1\u7684\u5E95\u8272\n  if (u_linearColor == 1.0) {\n    // \u4F7F\u7528\u6E10\u53D8\u989C\u8272\n    v_color = mix(u_sourceColor, u_targetColor, a_Position.z);\n    v_color.a = v_color.a * opacity;\n  } else {\n    v_color = vec4(a_Color.rgb * lightWeight, a_Color.w * opacity);\n  }\n\n  if (u_opacitylinear > 0.0) {\n    v_color.a *= u_opacitylinear_dir > 0.0 ? 1.0 - a_Position.z : a_Position.z;\n  }\n\n  gl_Position = project_common_position_to_clipspace(pos);\n\n  setPickingColor(a_PickingColor);\n}\n";
+export default class ExtrudeModel extends BaseModel {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "raiseCount", 0);
+    _defineProperty(this, "raiseRepeat", 0);
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      EXTRUDE: 10,
+      NORMAL: 11
+    });
+  }
+  getCommonUniformsInfo() {
+    const {
+      animateOption = {
+        enable: false,
+        speed: 0.01,
+        repeat: false
+      },
+      sourceColor,
+      targetColor,
+      pickLight = false,
+      heightfixed = false,
+      opacityLinear = {
+        enable: false,
+        dir: 'up'
+      },
+      lightEnable = true
+    } = this.layer.getLayerConfig();
+
+    // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
+    let sourceColorArr = [0, 0, 0, 0];
+    let targetColorArr = [0, 0, 0, 0];
+    if (sourceColor && targetColor) {
+      sourceColorArr = rgb2arr(sourceColor);
+      targetColorArr = rgb2arr(targetColor);
+      useLinearColor = 1;
+    }
+    if (this.raiseCount < 1 && this.raiseRepeat > 0) {
+      if (animateOption.enable) {
+        const {
+          speed = 0.01
+        } = animateOption;
+        this.raiseCount += speed;
+        if (this.raiseCount >= 1) {
+          if (this.raiseRepeat > 1) {
+            this.raiseCount = 0;
+            this.raiseRepeat--;
+          } else {
+            this.raiseCount = 1;
+          }
+        }
+      }
+    }
+    const commonOptions = {
+      // 圆柱体的拾取高亮是否要计算光照
+      u_pickLight: Number(pickLight),
+      // 圆柱体是否固定高度
+      u_heightfixed: Number(heightfixed),
+      u_r: animateOption.enable && this.raiseRepeat > 0 ? this.raiseCount : 1.0,
+      // 渐变色支持参数
+      u_linearColor: useLinearColor,
+      u_sourceColor: sourceColorArr,
+      u_targetColor: targetColorArr,
+      // 透明度渐变
+      u_opacitylinear: Number(opacityLinear.enable),
+      u_opacitylinear_dir: opacityLinear.dir === 'up' ? 1.0 : 0.0,
+      // 光照计算开关
+      u_lightEnable: Number(lightEnable)
+    };
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      const {
+        depth = true,
+        animateOption: {
+          repeat = 1
+        }
+      } = _this2.layer.getLayerConfig();
+      _this2.raiseRepeat = repeat;
+      _this2.initUniformsBuffer();
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'pointExtrude',
+        vertexShader: pointExtrudeVert,
+        fragmentShader: pointExtrudeFrag,
+        triangulation: PointExtrudeTriangulation,
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        cull: {
+          enable: true,
+          face: gl.FRONT
+        },
+        depth: {
+          enable: depth
+        }
+      });
+      return [model];
+    })();
+  }
+  registerBuiltinAttributes() {
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: feature => {
+          const {
+            size
+          } = feature;
+          if (size) {
+            let buffersize = [];
+            if (Array.isArray(size)) {
+              buffersize = size.length === 2 ? [size[0], size[0], size[1]] : size;
+            }
+            if (!Array.isArray(size)) {
+              buffersize = [size, size, size];
+            }
+            return buffersize;
+          } else {
+            return [2, 2, 2];
+          }
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'normal',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Normal',
+        shaderLocation: this.attributeLocation.NORMAL,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.STATIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex, attributeIdx, normal) => {
+          return normal;
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'extrude',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Extrude',
+        shaderLocation: this.attributeLocation.EXTRUDE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 4,
+        update: feature => {
+          const coordinates = calculateCentroid(feature.coordinates);
+          // [lng, lat, lowLng, lowLat]
+          // low part for enabled double precision
+          return [coordinates[0], coordinates[1], fp64LowPart(coordinates[0]), fp64LowPart(coordinates[1])];
+        }
+      }
+    });
+  }
+}

package/es/point/models/fill.d.ts

@@ -0,0 +1,47 @@
+import type { IAnimateOption, IAttribute, IElements, IModel, IModelUniform } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class FillModel 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;
+        SHAPE: number;
+        EXTRUDE: number;
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    getAnimateUniforms(): IModelUniform;
+    getAttribute(): {
+        attributes: {
+            [attributeName: string]: IAttribute;
+        };
+        elements: IElements;
+    };
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    /**
+     * 根据 animateOption 的值返回对应的 shader 代码
+     * @returns
+     */
+    getShaders(): {
+        frag: string;
+        vert: string;
+        type: string;
+    };
+    protected animateOption2Array(option: Partial<IAnimateOption>): number[];
+    protected registerBuiltinAttributes(): void;
+}