@antv/l7-layers 2.25.7 → 2.25.9

package/lib/polygon/models/extrude.js

@@ -0,0 +1,256 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+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");
+var _loadImage = require("../../utils/load-image");
+/* babel-plugin-inline-import '../shaders/extrude/polygon_extrude_frag.glsl' */
+const polygonExtrudeFrag = "layout(std140) uniform commonUniforms {\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_linearColor;\n  float u_topsurface;\n  float u_sidesurface;\n  float u_heightfixed; // \u9ED8\u8BA4\u4E0D\u56FA\u5B9A\n  float u_raisingHeight;\n};\n\nin vec4 v_Color;\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\nout vec4 outputColor;\nvoid main() {\n  // top face\n  if (u_topsurface < 1.0) {\n    discard;\n  }\n\n  outputColor = v_Color;\n\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/extrude/polygon_extrude_picklight_frag.glsl' */
+const polygonExtrudePickLightFrag = "layout(std140) uniform commonUniforms {\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_linearColor;\n  float u_topsurface;\n  float u_sidesurface;\n  float u_heightfixed; // \u9ED8\u8BA4\u4E0D\u56FA\u5B9A\n  float u_raisingHeight;\n};\n\nin vec4 v_Color;\nin vec3 v_uvs;\nin vec2 v_texture_data;\nout vec4 outputColor;\n\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\n\nvoid main() {\n  float isSide = v_texture_data.x;\n  float sidey = v_uvs[2];\n  float lightWeight = v_texture_data.y;\n\n  // Tip: \u90E8\u5206\u673A\u578B GPU \u8BA1\u7B97\u7CBE\u5EA6\u517C\u5BB9\n  if (isSide < 0.999) {\n    // side face\n    if (u_sidesurface < 1.0) {\n      discard;\n    }\n\n    if (u_linearColor == 1.0) {\n      // side use linear\n      vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);\n      linearColor.rgb *= lightWeight;\n      outputColor = linearColor;\n    } else {\n      // side notuse linear\n      outputColor = v_Color;\n    }\n  } else {\n    // top face\n    if (u_topsurface < 1.0) {\n      discard;\n    }\n    outputColor = v_Color;\n  }\n\n  outputColor = filterColorAlpha(outputColor, lightWeight);\n}\n";
+/* babel-plugin-inline-import '../shaders/extrude/polygon_extrude_picklight_vert.glsl' */
+const polygonExtrudePickLightVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_NORMAL) in vec3 a_Normal;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec3 a_uvs;\n\nlayout(std140) uniform commonUniforms {\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_linearColor;\n  float u_topsurface;\n  float u_sidesurface;\n  float u_heightfixed; // \u9ED8\u8BA4\u4E0D\u56FA\u5B9A\n  float u_raisingHeight;\n};\n\nout vec4 v_Color;\nout vec3 v_uvs;\nout vec2 v_texture_data;\n\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\nvoid main() {\n  v_uvs = a_uvs;\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);\n  vec4 project_pos = project_position(pos, a_Position64Low);\n\n  if (u_heightfixed > 0.0) {\n    // \u5224\u65AD\u51E0\u4F55\u4F53\u662F\u5426\u56FA\u5B9A\u9AD8\u5EA6\n    project_pos.z = a_Position.z * a_Size;\n    project_pos.z += u_raisingHeight;\n    if (\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    ) {\n      float mapboxZoomScale = 4.0 / pow(2.0, 21.0 - u_Zoom);\n      project_pos.z *= mapboxZoomScale;\n      project_pos.z += u_raisingHeight * mapboxZoomScale;\n    }\n  }\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n  float lightWeight = calc_lighting(project_pos);\n  v_texture_data = vec2(a_Position.z, lightWeight);\n\n  v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w * opacity);\n\n  setPickingColor(a_PickingColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/extrude/polygon_extrude_vert.glsl' */
+const polygonExtrudeVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_NORMAL) in vec3 a_Normal;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec3 a_uvs;\n\nlayout(std140) uniform commonUniforms {\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_linearColor;\n  float u_topsurface;\n  float u_sidesurface;\n  float u_heightfixed; // \u9ED8\u8BA4\u4E0D\u56FA\u5B9A\n  float u_raisingHeight;\n};\n\nout vec4 v_Color;\n\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\nvoid main() {\n  float isSide = a_Position.z;\n  float topU = a_uvs[0];\n  float topV = 1.0 - a_uvs[1];\n  float sidey = a_uvs[2];\n\n  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);\n\n  vec4 project_pos = project_position(pos, a_Position64Low);\n  float lightWeight = calc_lighting(project_pos);\n\n  if (u_heightfixed > 0.0) {\n    // \u5224\u65AD\u51E0\u4F55\u4F53\u662F\u5426\u56FA\u5B9A\u9AD8\u5EA6\n    project_pos.z = a_Position.z * a_Size;\n    project_pos.z += u_raisingHeight;\n\n    if (\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    ) {\n      float mapboxZoomScale = 4.0 / pow(2.0, 21.0 - u_Zoom);\n      project_pos.z *= mapboxZoomScale;\n      project_pos.z += u_raisingHeight * mapboxZoomScale;\n    }\n  }\n\n gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n\n  // Tip: \u90E8\u5206\u673A\u578B GPU \u8BA1\u7B97\u7CBE\u5EA6\u517C\u5BB9\n  if (isSide < 0.999) {\n    // side face\n    // if(u_sidesurface < 1.0) {\n    //   discard;\n    // }\n\n    if (u_linearColor == 1.0) {\n      vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);\n      linearColor.rgb *= lightWeight;\n      v_Color = linearColor;\n    } else {\n      v_Color = a_Color;\n    }\n\n  } else {\n    v_Color = a_Color;\n  }\n\n  v_Color = vec4(v_Color.rgb * lightWeight, v_Color.w * opacity);\n\n  setPickingColor(a_PickingColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/extrude/polygon_extrudetex_frag.glsl' */
+const polygonExtrudeTexFrag = "uniform sampler2D u_texture;\n\nlayout(std140) uniform commonUniforms {\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_linearColor;\n  float u_topsurface;\n  float u_sidesurface;\n  float u_heightfixed; // \u9ED8\u8BA4\u4E0D\u56FA\u5B9A\n  float u_raisingHeight;\n};\n\nin vec4 v_Color;\nin vec3 v_uvs;\nin vec2 v_texture_data;\n\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main() {\n  float opacity = u_opacity;\n  float isSide = v_texture_data.x;\n  float lightWeight = v_texture_data.y;\n  float topU = v_uvs[0];\n  float topV = 1.0 - v_uvs[1];\n  float sidey = v_uvs[2];\n\n  outputColor = texture(SAMPLER_2D(u_texture), vec2(topU, topV));\n  // Tip: \u90E8\u5206\u673A\u578B GPU \u8BA1\u7B97\u7CBE\u5EA6\u517C\u5BB9\n  if (isSide < 0.999) {\n    // \u662F\u5426\u662F\u8FB9\u7F18\n    // side face\n    if (u_sidesurface < 1.0) {\n      discard;\n    }\n\n    if (u_linearColor == 1.0) {\n      vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);\n      linearColor.rgb *= lightWeight;\n      outputColor = linearColor;\n    } else {\n      outputColor = v_Color;\n    }\n  } else {\n    // top face\n    if (u_topsurface < 1.0) {\n      discard;\n    }\n  }\n\n  outputColor.a *= opacity;\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/extrude/polygon_extrudetex_vert.glsl' */
+const polygonExtrudeTexVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_NORMAL) in vec3 a_Normal;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec3 a_uvs;\n\nlayout(std140) uniform commonUniforms {\n  vec4 u_sourceColor;\n  vec4 u_targetColor;\n  float u_linearColor;\n  float u_topsurface;\n  float u_sidesurface;\n  float u_heightfixed; // \u9ED8\u8BA4\u4E0D\u56FA\u5B9A\n  float u_raisingHeight;\n};\n\nout vec4 v_Color;\nout vec3 v_uvs;\nout vec2 v_texture_data;\n\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\nvoid main() {\n  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);\n  vec4 project_pos = project_position(pos, a_Position64Low);\n  float lightWeight = calc_lighting(project_pos);\n  v_uvs = a_uvs;\n  v_Color = a_Color;\n  v_Color.a *= opacity;\n\n  v_texture_data = vec2(a_Position.z, lightWeight);\n\n  if (u_heightfixed > 0.0) {\n    // \u5224\u65AD\u51E0\u4F55\u4F53\u662F\u5426\u56FA\u5B9A\u9AD8\u5EA6\n    project_pos.z = a_Position.z * a_Size;\n    project_pos.z += u_raisingHeight;\n\n    if (\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    ) {\n      float mapboxZoomScale = 4.0 / pow(2.0, 21.0 - u_Zoom);\n      project_pos.z *= mapboxZoomScale;\n      project_pos.z += u_raisingHeight * mapboxZoomScale;\n    }\n  }\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+class ExtrudeModel extends _BaseModel.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "texture", void 0);
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      NORMAL: 10,
+      UV: 11
+    });
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      mapTexture,
+      heightfixed = false,
+      raisingHeight = 0,
+      topsurface = true,
+      sidesurface = true,
+      sourceColor,
+      targetColor
+    } = this.layer.getLayerConfig();
+
+    // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
+    let sourceColorArr = [1, 1, 1, 1];
+    let targetColorArr = [1, 1, 1, 1];
+    if (sourceColor && targetColor) {
+      sourceColorArr = (0, _l7Utils.rgb2arr)(sourceColor);
+      targetColorArr = (0, _l7Utils.rgb2arr)(targetColor);
+      useLinearColor = 1;
+    }
+    const commonOptions = {
+      u_sourceColor: sourceColorArr,
+      u_targetColor: targetColorArr,
+      u_linearColor: useLinearColor,
+      // 控制侧面和顶面的显示隐藏
+      u_topsurface: Number(topsurface),
+      u_sidesurface: Number(sidesurface),
+      u_heightfixed: Number(heightfixed),
+      u_raisingHeight: Number(raisingHeight)
+    };
+    if (mapTexture && this.texture) {
+      // @ts-ignore
+      commonOptions.u_texture = this.texture;
+      this.textures = [this.texture];
+    }
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      yield _this.loadTexture();
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const {
+        frag,
+        vert,
+        type
+      } = _this2.getShaders();
+      _this2.initUniformsBuffer();
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: type,
+        vertexShader: vert,
+        fragmentShader: frag,
+        depth: {
+          enable: true
+        },
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        triangulation: _triangulation.PolygonExtrudeTriangulation
+      });
+      return [model];
+    })();
+  }
+  getShaders() {
+    const {
+      pickLight,
+      mapTexture
+    } = this.layer.getLayerConfig();
+    if (mapTexture) {
+      return {
+        frag: polygonExtrudeTexFrag,
+        vert: polygonExtrudeTexVert,
+        type: 'polygonExtrudeTexture'
+      };
+    }
+    if (pickLight) {
+      return {
+        frag: polygonExtrudePickLightFrag,
+        vert: polygonExtrudePickLightVert,
+        type: 'polygonExtrudePickLight'
+      };
+    } else {
+      return {
+        frag: polygonExtrudeFrag,
+        vert: polygonExtrudeVert,
+        type: 'polygonExtrude'
+      };
+    }
+  }
+  clearModels() {
+    var _this$texture;
+    (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+    this.textures = [];
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 22 层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uvs',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_uvs',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex) => {
+          // 当启用 enableRelativeCoordinates 时：
+          // - vertex 是相对坐标（相对于 relativeOrigin 的偏移）
+          // - 需要将相对坐标转换回绝对坐标后，用 originalExtent 计算 UV
+          const originalExtent = this.layer.getOriginalExtent();
+          const relativeOrigin = this.layer.getRelativeOrigin();
+          const isRelativeCoordinates = originalExtent[0] !== 0 || originalExtent[2] !== 0;
+          let lng, lat;
+          let minLng, minLat, maxLng, maxLat;
+          if (isRelativeCoordinates && relativeOrigin) {
+            // 相对坐标模式：转换回绝对坐标
+            lng = vertex[0] + relativeOrigin[0];
+            lat = vertex[1] + relativeOrigin[1];
+            [minLng, minLat, maxLng, maxLat] = originalExtent;
+          } else {
+            // 绝对坐标模式
+            lng = vertex[0];
+            lat = vertex[1];
+            [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
+          }
+          const lngLen = maxLng - minLng;
+          const latLen = maxLat - minLat;
+          // 临时 兼容高德V2
+          return [(lng - minLng) / lngLen, (lat - minLat) / latLen, vertex[4]];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'normal',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Normal',
+        shaderLocation: this.attributeLocation.NORMAL,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex, attributeIdx, normal) => {
+          return normal;
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          usage: _l7Core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 10
+          } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        }
+      }
+    });
+  }
+  loadTexture() {
+    var _this3 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const {
+        mapTexture
+      } = _this3.layer.getLayerConfig();
+      const {
+        createTexture2D
+      } = _this3.rendererService;
+      _this3.texture = createTexture2D({
+        height: 1,
+        width: 1
+      });
+      if (mapTexture) {
+        const image = yield (0, _loadImage.loadImage)(mapTexture);
+        _this3.texture = createTexture2D({
+          data: image,
+          width: image.width,
+          height: image.height,
+          wrapS: _l7Core.gl.CLAMP_TO_EDGE,
+          wrapT: _l7Core.gl.CLAMP_TO_EDGE,
+          min: _l7Core.gl.LINEAR,
+          mag: _l7Core.gl.LINEAR
+        });
+      }
+    })();
+  }
+}
+exports.default = ExtrudeModel;

package/lib/polygon/models/extrusion.d.ts

@@ -0,0 +1,40 @@
+import type { IModel, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class ExtrusionModel 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;
+        NORMAL: number;
+        EXTRUSION_BASE: number;
+    };
+    protected texture: ITexture2D;
+    getUninforms(): {
+        [x: string]: any;
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    getShaders(): {
+        frag: string;
+        vert: string;
+        type: string;
+    };
+    clearModels(): void;
+    protected registerBuiltinAttributes(): void;
+}

package/lib/polygon/models/extrusion.js

@@ -0,0 +1,145 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _l7Core = require("@antv/l7-core");
+var _BaseModel = _interopRequireDefault(require("../../core/BaseModel"));
+var _triangulation = require("../../core/triangulation");
+/* babel-plugin-inline-import '../shaders/extrusion/polygon_extrusion_frag.glsl' */
+const polygonExtrudeFrag = "in vec4 v_Color;\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_Color;\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/extrusion/polygon_extrusion_vert.glsl' */
+const polygonExtrudeVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_NORMAL) in vec3 a_Normal;\n\nout vec4 v_Color;\n\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\nvoid main() {\n  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size + (1.0 - a_Position.z) * extrusionBase, 1.0);\n\n  vec4 project_pos = project_position(pos, a_Position64Low);\n  float lightWeight = calc_lighting(project_pos);\n  v_Color = a_Color;\n  v_Color = vec4(v_Color.rgb * lightWeight, v_Color.w * opacity);\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+class ExtrusionModel extends _BaseModel.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "texture", void 0);
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      NORMAL: 10,
+      EXTRUSION_BASE: 11
+    });
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const commonOptions = {};
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const {
+        frag,
+        vert,
+        type
+      } = _this2.getShaders();
+      _this2.initUniformsBuffer();
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: type,
+        vertexShader: vert,
+        fragmentShader: frag,
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        triangulation: _triangulation.PolygonExtrudeTriangulation,
+        depth: {
+          enable: true
+        }
+      });
+      return [model];
+    })();
+  }
+  getShaders() {
+    return {
+      frag: polygonExtrudeFrag,
+      vert: polygonExtrudeVert,
+      type: 'polygonExtrude'
+    };
+  }
+  clearModels() {
+    var _this$texture;
+    (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 22 层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'normal',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Normal',
+        shaderLocation: this.attributeLocation.NORMAL,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex, attributeIdx, normal) => {
+          return normal;
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          usage: _l7Core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 10
+          } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'extrusionBase',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_ExtrusionBase',
+        shaderLocation: this.attributeLocation.EXTRUSION_BASE,
+        buffer: {
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            extrusionBase: op = 0
+          } = feature;
+          return [op];
+        }
+      }
+    });
+  }
+}
+exports.default = ExtrusionModel;

package/lib/polygon/models/fill.d.ts

@@ -0,0 +1,32 @@
+import type { 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;
+        LINEAR: number;
+    };
+    getUninforms(): {
+        [x: string]: any;
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    protected registerBuiltinAttributes(): void;
+    private getModelParams;
+}

package/lib/polygon/models/fill.js

@@ -0,0 +1,135 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _l7Core = require("@antv/l7-core");
+var _BaseModel = _interopRequireDefault(require("../../core/BaseModel"));
+var _triangulation = require("../../core/triangulation");
+/* babel-plugin-inline-import '../shaders/fill/fill_frag.glsl' */
+const polygon_frag = "in vec4 v_color;\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_color;\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/fill/fill_linear_frag.glsl' */
+const polygon_linear_frag = "layout(std140) uniform commonUniforms {\n  float u_raisingHeight;\n  float u_opacitylinear;\n  float u_dir;\n};\n\nin vec4 v_color;\nin vec3 v_linear;\nin vec2 v_pos;\nout vec4 outputColor;\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\n\nvoid main() {\n  outputColor = v_color;\n  if (u_opacitylinear > 0.0) {\n    outputColor.a *=\n      u_dir == 1.0\n        ? 1.0 - length(v_pos - v_linear.xy) / v_linear.z\n        : length(v_pos - v_linear.xy) / v_linear.z;\n  }\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/fill/fill_linear_vert.glsl' */
+const polygon_linear_vert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_LINEAR) in vec3 a_linear;\n\nlayout(std140) uniform commonUniforms {\n  float u_raisingHeight;\n  float u_opacitylinear;\n  float u_dir;\n};\n\nout vec4 v_color;\nout vec3 v_linear;\nout vec2 v_pos;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main() {\n  if (u_opacitylinear > 0.0) {\n    v_linear = a_linear;\n    v_pos = a_Position.xy;\n  }\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n  project_pos.z += u_raisingHeight;\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);\n    project_pos.z *= mapboxZoomScale;\n    project_pos.z += u_raisingHeight * mapboxZoomScale;\n  }\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n  setPickingColor(a_PickingColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/fill/fill_vert.glsl' */
+const polygon_vert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\n\nlayout(std140) uniform commonUniforms {\n  float u_raisingHeight;\n};\n\nout vec4 v_color;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main() {\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n\n  project_pos.z += u_raisingHeight;\n\n  if (\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n  ) {\n    float mapboxZoomScale = 4.0 / pow(2.0, 21.0 - u_Zoom);\n    project_pos.z *= mapboxZoomScale;\n    project_pos.z += u_raisingHeight * mapboxZoomScale;\n  }\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n\n";
+class FillModel extends _BaseModel.default {
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      LINEAR: 9
+    });
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      raisingHeight = 0,
+      opacityLinear = {
+        enable: false,
+        dir: 'in'
+      }
+    } = this.layer.getLayerConfig();
+    const commonOptions = {
+      u_raisingHeight: Number(raisingHeight),
+      u_opacitylinear: Number(opacityLinear.enable),
+      u_dir: opacityLinear.dir === 'in' ? 1.0 : 0.0
+    };
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const {
+        frag,
+        vert,
+        triangulation,
+        type
+      } = _this2.getModelParams();
+      _this2.initUniformsBuffer();
+      _this2.layer.triangulation = triangulation;
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: type,
+        vertexShader: vert,
+        fragmentShader: frag,
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        triangulation,
+        primitive: _l7Core.gl.TRIANGLES,
+        depth: {
+          enable: false
+        }
+      });
+      return [model];
+    })();
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 22 层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+    const {
+      opacityLinear = {
+        enable: false,
+        dir: 'in'
+      }
+    } = this.layer.getLayerConfig();
+    if (opacityLinear.enable) {
+      this.styleAttributeService.registerStyleAttribute({
+        name: 'linear',
+        type: _l7Core.AttributeType.Attribute,
+        descriptor: {
+          name: 'a_linear',
+          shaderLocation: this.attributeLocation.LINEAR,
+          buffer: {
+            // give the WebGL driver a hint that this buffer may change
+            usage: _l7Core.gl.STATIC_DRAW,
+            data: [],
+            type: _l7Core.gl.FLOAT
+          },
+          size: 3,
+          update: (feature, featureIdx, vertex) => {
+            return [vertex[3], vertex[4], vertex[5]];
+          }
+        }
+      });
+    }
+  }
+  getModelParams() {
+    const {
+      opacityLinear = {
+        enable: false
+      }
+    } = this.layer.getLayerConfig();
+    if (opacityLinear.enable) {
+      return {
+        frag: polygon_linear_frag,
+        vert: polygon_linear_vert,
+        type: 'polygonLinear',
+        triangulation: _triangulation.polygonTriangulationWithCenter
+      };
+    } else {
+      return {
+        frag: polygon_frag,
+        vert: polygon_vert,
+        type: 'polygonFill',
+        triangulation: _triangulation.polygonTriangulation
+      };
+    }
+  }
+}
+exports.default = FillModel;

package/lib/polygon/models/index.d.ts

@@ -0,0 +1,5 @@
+export type PolygonModelType = 'fill' | 'extrude' | 'line' | 'point_fill' | 'point_image' | 'point_normal' | 'point_extrude' | 'text' | 'water' | 'ocean' | 'extrusion';
+declare const PolygonModels: {
+    [key in PolygonModelType]: any;
+};
+export default PolygonModels;

package/lib/polygon/models/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _line = _interopRequireDefault(require("../../line/models/line"));
+var _extrude = _interopRequireDefault(require("../../point/models/extrude"));
+var _fill = _interopRequireDefault(require("../../point/models/fill"));
+var _image = _interopRequireDefault(require("../../point/models/image"));
+var _normal = _interopRequireDefault(require("../../point/models/normal"));
+var _text = _interopRequireDefault(require("../../point/models/text"));
+var _extrude2 = _interopRequireDefault(require("./extrude"));
+var _extrusion = _interopRequireDefault(require("./extrusion"));
+var _fill2 = _interopRequireDefault(require("./fill"));
+var _ocean = _interopRequireDefault(require("./ocean"));
+var _water = _interopRequireDefault(require("./water"));
+const PolygonModels = {
+  fill: _fill2.default,
+  line: _line.default,
+  extrude: _extrude2.default,
+  text: _text.default,
+  point_fill: _fill.default,
+  point_image: _image.default,
+  point_normal: _normal.default,
+  point_extrude: _extrude.default,
+  water: _water.default,
+  ocean: _ocean.default,
+  extrusion: _extrusion.default
+  // point_fill: PointModels.fill,
+};
+var _default = exports.default = PolygonModels;