@antv/l7-layers 2.21.1 → 2.21.2

package/lib/core/BaseModel.js

@@ -5,12 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _l7Core = require("@antv/l7-core");
 var _l7Utils = require("@antv/l7-utils");
@@ -19,7 +15,7 @@ var _stencil = require("../utils/stencil");
 var _CommonStyleAttribute = require("./CommonStyleAttribute");
 var _constant = require("./constant");
 var _utils = require("./utils");
-var shaderLocationMap = {
+const shaderLocationMap = {
   opacity: _CommonStyleAttribute.ShaderLocation.OPACITY,
   stroke: _CommonStyleAttribute.ShaderLocation.STROKE,
   offsets: _CommonStyleAttribute.ShaderLocation.OFFSETS,
@@ -29,21 +25,38 @@ var shaderLocationMap = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var BaseModel = exports.default = /*#__PURE__*/function () {
-  // 用于数据传递的数据纹理
-  // 默认有多少列（宽度）
-
-  // 支持数据映射的buffer
+class BaseModel {
   // 不支持数据映射的buffer
 
   // style texture data mapping
 
-  function BaseModel(layer) {
-    (0, _classCallCheck2.default)(this, BaseModel);
+  constructor(layer) {
+    (0, _defineProperty2.default)(this, "triangulation", void 0);
     (0, _defineProperty2.default)(this, "uniformBuffers", []);
     (0, _defineProperty2.default)(this, "textures", []);
+    // style texture data mapping
+    (0, _defineProperty2.default)(this, "createTexture2D", void 0);
     (0, _defineProperty2.default)(this, "preStyleAttribute", {});
     (0, _defineProperty2.default)(this, "encodeStyleAttribute", {});
+    (0, _defineProperty2.default)(this, "layer", void 0);
+    (0, _defineProperty2.default)(this, "dataTexture", void 0);
+    // 用于数据传递的数据纹理
+    (0, _defineProperty2.default)(this, "DATA_TEXTURE_WIDTH", void 0);
+    // 默认有多少列（宽度）
+    (0, _defineProperty2.default)(this, "dataTextureTest", void 0);
+    (0, _defineProperty2.default)(this, "configService", void 0);
+    (0, _defineProperty2.default)(this, "shaderModuleService", void 0);
+    (0, _defineProperty2.default)(this, "rendererService", void 0);
+    (0, _defineProperty2.default)(this, "iconService", void 0);
+    (0, _defineProperty2.default)(this, "fontService", void 0);
+    (0, _defineProperty2.default)(this, "styleAttributeService", void 0);
+    (0, _defineProperty2.default)(this, "mapService", void 0);
+    (0, _defineProperty2.default)(this, "cameraService", void 0);
+    (0, _defineProperty2.default)(this, "layerService", void 0);
+    (0, _defineProperty2.default)(this, "pickingService", void 0);
+    (0, _defineProperty2.default)(this, "attributeUnifoms", void 0);
+    // 支持数据映射的buffer
+    (0, _defineProperty2.default)(this, "commonUnifoms", void 0);
     this.layer = layer;
     this.configService = layer.getContainer().globalConfigService;
     this.rendererService = layer.getContainer().rendererService;
@@ -62,326 +75,261 @@ var BaseModel = exports.default = /*#__PURE__*/function () {
     this.registerBuiltinAttributes();
     // 开启动画
     this.startModelAnimate();
-    var createTexture2D = this.rendererService.createTexture2D;
+    const {
+      createTexture2D
+    } = this.rendererService;
     this.createTexture2D = createTexture2D;
   }
 
   // style datatexture mapping
-  (0, _createClass2.default)(BaseModel, [{
-    key: "getBlend",
-    value: function getBlend() {
-      var _this$layer$getLayerC = this.layer.getLayerConfig(),
-        _this$layer$getLayerC2 = _this$layer$getLayerC.blend,
-        blend = _this$layer$getLayerC2 === void 0 ? 'normal' : _this$layer$getLayerC2;
-      return _blend.BlendTypes[_l7Core.BlendType[blend]];
-    }
-  }, {
-    key: "getStencil",
-    value: function getStencil(option) {
-      var _this$layer$getLayerC3 = this.layer.getLayerConfig(),
-        _this$layer$getLayerC4 = _this$layer$getLayerC3.mask,
-        mask = _this$layer$getLayerC4 === void 0 ? false : _this$layer$getLayerC4,
-        _this$layer$getLayerC5 = _this$layer$getLayerC3.maskInside,
-        maskInside = _this$layer$getLayerC5 === void 0 ? true : _this$layer$getLayerC5,
-        enableMask = _this$layer$getLayerC3.enableMask,
-        _this$layer$getLayerC6 = _this$layer$getLayerC3.maskOperation,
-        maskOperation = _this$layer$getLayerC6 === void 0 ? _l7Core.MaskOperation.AND : _this$layer$getLayerC6;
-      // TODO 临时处理，后期移除MaskLayer
-      if (this.layer.type === 'MaskLayer') {
-        return (0, _stencil.getStencilMask)({
-          isStencil: true,
-          stencilType: _l7Core.StencilType.SINGLE
-        }); // 用于遮罩的stencil 参数
-      }
-      if (option.isStencil) {
-        return (0, _stencil.getStencilMask)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
-          maskOperation: maskOperation
-        })); // 用于遮罩的stencil 参数
-      }
-      var maskflag = mask ||
-      //  mask 兼容历史写法
-      enableMask && this.layer.masks.length !== 0 ||
-      // 外部图层的mask
-      this.layer.tileMask !== undefined; // 瓦片图层
-      // !!(mask || enableMask || this.layer.tileMask);
-      return (0, _stencil.getStencil)(maskflag, maskInside);
-    }
-  }, {
-    key: "getDefaultStyle",
-    value: function getDefaultStyle() {
-      return {};
-    }
-    // public getUninforms(): IModelUniform {
-    //   throw new Error('Method not implemented.');
-    // }
-  }, {
-    key: "getUninforms",
-    value: function getUninforms() {
-      var commoninfo = this.getCommonUniformsInfo();
-      var attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
-      this.updateStyleUnifoms();
-      var result = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attributeInfo.uniformsOption), commoninfo.uniformsOption);
-      //如果是regl渲染 需要在uniform中带上u_texture 暂时用this.rendererService.device判断
-      if (!this.rendererService.hasOwnProperty('device') && this.textures && this.textures.length === 1) {
-        result['u_texture'] = this.textures[0];
-      }
-      return result;
-    }
-  }, {
-    key: "getAnimateUniforms",
-    value: function getAnimateUniforms() {
-      return {};
+
+  getBlend() {
+    const {
+      blend = 'normal'
+    } = this.layer.getLayerConfig();
+    return _blend.BlendTypes[_l7Core.BlendType[blend]];
+  }
+  getStencil(option) {
+    const {
+      mask = false,
+      maskInside = true,
+      enableMask,
+      maskOperation = _l7Core.MaskOperation.AND
+    } = this.layer.getLayerConfig();
+    // TODO 临时处理，后期移除MaskLayer
+    if (this.layer.type === 'MaskLayer') {
+      return (0, _stencil.getStencilMask)({
+        isStencil: true,
+        stencilType: _l7Core.StencilType.SINGLE
+      }); // 用于遮罩的stencil 参数
     }
-  }, {
-    key: "needUpdate",
-    value: function () {
-      var _needUpdate = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              return _context.abrupt("return", false);
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      function needUpdate() {
-        return _needUpdate.apply(this, arguments);
-      }
-      return needUpdate;
-    }() // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "buildModels",
-    value: function () {
-      var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              throw new Error('Method not implemented.');
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      function buildModels() {
-        return _buildModels.apply(this, arguments);
-      }
-      return buildModels;
-    }() // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "initModels",
-    value: function () {
-      var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              throw new Error('Method not implemented.');
-            case 1:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }));
-      function initModels() {
-        return _initModels.apply(this, arguments);
-      }
-      return initModels;
-    }() // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "clearModels",
-    value: function clearModels() {
-      var refresh = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      return;
+    if (option.isStencil) {
+      return (0, _stencil.getStencilMask)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
+        maskOperation
+      })); // 用于遮罩的stencil 参数
     }
-  }, {
-    key: "getAttribute",
-    value: function getAttribute() {
-      throw new Error('Method not implemented.');
+    const maskflag = mask ||
+    //  mask 兼容历史写法
+    enableMask && this.layer.masks.length !== 0 ||
+    // 外部图层的mask
+    this.layer.tileMask !== undefined; // 瓦片图层
+    // !!(mask || enableMask || this.layer.tileMask);
+    return (0, _stencil.getStencil)(maskflag, maskInside);
+  }
+  getDefaultStyle() {
+    return {};
+  }
+  // public getUninforms(): IModelUniform {
+  //   throw new Error('Method not implemented.');
+  // }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    const result = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attributeInfo.uniformsOption), commoninfo.uniformsOption);
+    //如果是regl渲染 需要在uniform中带上u_texture 暂时用this.rendererService.device判断
+    if (!this.rendererService.hasOwnProperty('device') && this.textures && this.textures.length === 1) {
+      result['u_texture'] = this.textures[0];
     }
-  }, {
-    key: "prerender",
-    value: function prerender() {}
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "render",
-    value: function render(renderOptions) {
+    return result;
+  }
+  getAnimateUniforms() {
+    return {};
+  }
+  needUpdate() {
+    return (0, _asyncToGenerator2.default)(function* () {
+      return false;
+    })();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  buildModels() {
+    return (0, _asyncToGenerator2.default)(function* () {
       throw new Error('Method not implemented.');
-    }
-  }, {
-    key: "registerBuiltinAttributes",
-    value: function registerBuiltinAttributes() {
+    })();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  initModels() {
+    return (0, _asyncToGenerator2.default)(function* () {
       throw new Error('Method not implemented.');
+    })();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  clearModels(refresh = true) {
+    return;
+  }
+  getAttribute() {
+    throw new Error('Method not implemented.');
+  }
+  prerender() {}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render(renderOptions) {
+    throw new Error('Method not implemented.');
+  }
+  registerBuiltinAttributes() {
+    throw new Error('Method not implemented.');
+  }
+  animateOption2Array(option) {
+    return [option.enable ? 0 : 1.0, option.duration || 4.0, option.interval || 0.2, option.trailLength || 0.1];
+  }
+  startModelAnimate() {
+    const {
+      animateOption
+    } = this.layer.getLayerConfig();
+    if (animateOption.enable) {
+      this.layer.setAnimateStartTime();
     }
-  }, {
-    key: "animateOption2Array",
-    value: function animateOption2Array(option) {
-      return [option.enable ? 0 : 1.0, option.duration || 4.0, option.interval || 0.2, option.trailLength || 0.1];
-    }
-  }, {
-    key: "startModelAnimate",
-    value: function startModelAnimate() {
-      var _ref = this.layer.getLayerConfig(),
-        animateOption = _ref.animateOption;
-      if (animateOption.enable) {
-        this.layer.setAnimateStartTime();
-      }
-    }
+  }
 
-    // 动态注入参与数据映射的uniform
-  }, {
-    key: "getInject",
-    value: function getInject() {
-      var encodeStyleAttribute = this.layer.encodeStyleAttribute;
-      var str = '';
-      // a_Position = 0
-      // a_Color = 1
-      // a_PickingColor = 2
+  // 动态注入参与数据映射的uniform
+  getInject() {
+    const encodeStyleAttribute = this.layer.encodeStyleAttribute;
+    let str = '';
+    // a_Position = 0
+    // a_Color = 1
+    // a_PickingColor = 2
 
-      var uniforms = [];
-      // 支持数据映射的类型
-      this.layer.enableShaderEncodeStyles.forEach(function (key) {
-        if (encodeStyleAttribute[key]) {
-          // 配置了数据映射的类型
-          str += "#define USE_ATTRIBUTE_".concat(key.toUpperCase(), " 0.0; \n\n");
-        } else {
-          uniforms.push("  ".concat(_constant.DefaultUniformStyleType[key], " u_").concat(key, ";"));
-        }
-        var location = shaderLocationMap[key];
-        if (!location && key === 'THETA_OFFSET') {
-          location = 15;
-        }
-        str += "\n          #ifdef USE_ATTRIBUTE_".concat(key.toUpperCase(), "\n          layout(location = ").concat(shaderLocationMap[key], ") in ").concat(_constant.DefaultUniformStyleType[key], " a_").concat(key.charAt(0).toUpperCase() + key.slice(1), ";\n        #endif\n\n        ");
-      });
-      var attributeUniforms = uniforms.length ? "\nlayout(std140) uniform AttributeUniforms {\n".concat(uniforms.join('\n'), "\n};\n    ") : '';
-      str += attributeUniforms;
-      var innerStr = '';
-      this.layer.enableShaderEncodeStyles.forEach(function (key) {
-        innerStr += "\n\n    #ifdef USE_ATTRIBUTE_".concat(key.toUpperCase(), "\n      ").concat(_constant.DefaultUniformStyleType[key], " ").concat(key, "  = a_").concat(key.charAt(0).toUpperCase() + key.slice(1), ";\n    #else\n      ").concat(_constant.DefaultUniformStyleType[key], " ").concat(key, " = u_").concat(key, ";\n    #endif\n\n    ");
-      });
-      return {
-        'vs:#decl': str,
-        'fs:#decl': attributeUniforms,
-        'vs:#main-start': innerStr
-      };
-    }
+    const uniforms = [];
+    // 支持数据映射的类型
+    this.layer.enableShaderEncodeStyles.forEach(key => {
+      if (encodeStyleAttribute[key]) {
+        // 配置了数据映射的类型
+        str += `#define USE_ATTRIBUTE_${key.toUpperCase()} 0.0; \n\n`;
+      } else {
+        uniforms.push(`  ${_constant.DefaultUniformStyleType[key]} u_${key};`);
+      }
+      let location = shaderLocationMap[key];
+      if (!location && key === 'THETA_OFFSET') {
+        location = 15;
+      }
+      str += `
+          #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
+          layout(location = ${shaderLocationMap[key]}) in ${_constant.DefaultUniformStyleType[key]} a_${key.charAt(0).toUpperCase() + key.slice(1)};
+        #endif\n
+        `;
+    });
+    const attributeUniforms = uniforms.length ? `
+layout(std140) uniform AttributeUniforms {
+${uniforms.join('\n')}
+};
+    ` : '';
+    str += attributeUniforms;
+    let innerStr = '';
+    this.layer.enableShaderEncodeStyles.forEach(key => {
+      innerStr += `\n
+    #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
+      ${_constant.DefaultUniformStyleType[key]} ${key}  = a_${key.charAt(0).toUpperCase() + key.slice(1)};
+    #else
+      ${_constant.DefaultUniformStyleType[key]} ${key} = u_${key};
+    #endif\n
+    `;
+    });
+    return {
+      'vs:#decl': str,
+      'fs:#decl': attributeUniforms,
+      'vs:#main-start': innerStr
+    };
+  }
 
-    // 获取数据映射样式
-  }, {
-    key: "getStyleAttribute",
-    value: function getStyleAttribute() {
-      var _this = this;
-      var options = {};
-      // TODO: 优化
-      this.layer.enableShaderEncodeStyles.forEach(function (key) {
-        if (!_this.layer.encodeStyleAttribute[key]) {
-          // 没有设置样式映射
-          // @ts-ignore
-          var keyValue = _this.layer.getLayerConfig()[key];
-          var value = typeof keyValue === 'undefined' ? _constant.DefaultUniformStyleValue[key] : keyValue;
-          if (key === 'stroke') {
-            value = (0, _l7Utils.rgb2arr)(value);
-          }
-          options['u_' + key] = value;
-        }
-      });
-      return options;
-    }
-    // 注册数据映射样式
-  }, {
-    key: "registerStyleAttribute",
-    value: function registerStyleAttribute() {
-      var _this2 = this;
-      Object.keys(this.layer.encodeStyleAttribute).forEach(function (key) {
-        var options = (0, _CommonStyleAttribute.getCommonStyleAttributeOptions)(key);
-        if (options) {
-          _this2.styleAttributeService.registerStyleAttribute(options);
-          if (options.descriptor) {
-            options.descriptor.shaderLocation = shaderLocationMap[key];
-          }
+  // 获取数据映射样式
+  getStyleAttribute() {
+    const options = {};
+    // TODO: 优化
+    this.layer.enableShaderEncodeStyles.forEach(key => {
+      if (!this.layer.encodeStyleAttribute[key]) {
+        // 没有设置样式映射
+        // @ts-ignore
+        const keyValue = this.layer.getLayerConfig()[key];
+        let value = typeof keyValue === 'undefined' ? _constant.DefaultUniformStyleValue[key] : keyValue;
+        if (key === 'stroke') {
+          value = (0, _l7Utils.rgb2arr)(value);
         }
-      });
-    }
-  }, {
-    key: "updateEncodeAttribute",
-    value: function updateEncodeAttribute(type, flag) {
-      this.encodeStyleAttribute[type] = flag;
-    }
-  }, {
-    key: "initUniformsBuffer",
-    value: function initUniformsBuffer() {
-      var attrUniforms = this.getUniformsBufferInfo(this.getStyleAttribute());
-      var commonUniforms = this.getCommonUniformsInfo();
-      if (attrUniforms.uniformsLength !== 0) {
-        this.attributeUnifoms = this.rendererService.createBuffer({
-          data: new Float32Array((0, _utils.MultipleOfFourNumber)(attrUniforms.uniformsLength)).fill(0),
-          // 长度需要大于等于 4
-          isUBO: true
-        });
-        this.uniformBuffers.push(this.attributeUnifoms);
+        options['u_' + key] = value;
       }
-      if (commonUniforms.uniformsLength !== 0) {
-        this.commonUnifoms = this.rendererService.createBuffer({
-          data: new Float32Array((0, _utils.MultipleOfFourNumber)(commonUniforms.uniformsLength)).fill(0),
-          isUBO: true
-        });
-        this.uniformBuffers.push(this.commonUnifoms);
-      }
-    }
-    // 获取数据映射 uniform 信息
-  }, {
-    key: "getUniformsBufferInfo",
-    value: function getUniformsBufferInfo(uniformsOption) {
-      var uniformsLength = 0;
-      var uniformsArray = [];
-      Object.values(uniformsOption).forEach(function (value) {
-        if (Array.isArray(value)) {
-          uniformsArray.push.apply(uniformsArray, (0, _toConsumableArray2.default)(value));
-          uniformsLength += value.length;
-        } else if (typeof value === 'number') {
-          // 排除纹理
-          uniformsArray.push(value);
-          uniformsLength += 1;
-        } else if (typeof value === 'boolean') {
-          uniformsArray.push(Number(value));
-          uniformsLength += 1;
+    });
+    return options;
+  }
+  // 注册数据映射样式
+  registerStyleAttribute() {
+    Object.keys(this.layer.encodeStyleAttribute).forEach(key => {
+      const options = (0, _CommonStyleAttribute.getCommonStyleAttributeOptions)(key);
+      if (options) {
+        this.styleAttributeService.registerStyleAttribute(options);
+        if (options.descriptor) {
+          options.descriptor.shaderLocation = shaderLocationMap[key];
         }
+      }
+    });
+  }
+  updateEncodeAttribute(type, flag) {
+    this.encodeStyleAttribute[type] = flag;
+  }
+  initUniformsBuffer() {
+    const attrUniforms = this.getUniformsBufferInfo(this.getStyleAttribute());
+    const commonUniforms = this.getCommonUniformsInfo();
+    if (attrUniforms.uniformsLength !== 0) {
+      this.attributeUnifoms = this.rendererService.createBuffer({
+        data: new Float32Array((0, _utils.MultipleOfFourNumber)(attrUniforms.uniformsLength)).fill(0),
+        // 长度需要大于等于 4
+        isUBO: true
       });
-      return {
-        uniformsOption: uniformsOption,
-        uniformsLength: uniformsLength,
-        uniformsArray: uniformsArray
-      };
+      this.uniformBuffers.push(this.attributeUnifoms);
     }
-  }, {
-    key: "getCommonUniformsInfo",
-    value: function getCommonUniformsInfo() {
-      return {
-        uniformsLength: 0,
-        uniformsArray: [],
-        uniformsOption: {}
-      };
-    }
-
-    // 更新支持数据映射的uniform
-  }, {
-    key: "updateStyleUnifoms",
-    value: function updateStyleUnifoms() {
-      var _this$attributeUnifom, _this$commonUnifoms;
-      var _this$getUniformsBuff = this.getUniformsBufferInfo(this.getStyleAttribute()),
-        uniformsArray = _this$getUniformsBuff.uniformsArray;
-      var _this$getCommonUnifor = this.getCommonUniformsInfo(),
-        commonUniformsArray = _this$getCommonUnifor.uniformsArray;
-      (_this$attributeUnifom = this.attributeUnifoms) === null || _this$attributeUnifom === void 0 || _this$attributeUnifom.subData({
-        offset: 0,
-        data: new Uint8Array(new Float32Array(uniformsArray).buffer)
-      });
-      (_this$commonUnifoms = this.commonUnifoms) === null || _this$commonUnifoms === void 0 || _this$commonUnifoms.subData({
-        offset: 0,
-        data: new Uint8Array(new Float32Array(commonUniformsArray).buffer)
+    if (commonUniforms.uniformsLength !== 0) {
+      this.commonUnifoms = this.rendererService.createBuffer({
+        data: new Float32Array((0, _utils.MultipleOfFourNumber)(commonUniforms.uniformsLength)).fill(0),
+        isUBO: true
       });
+      this.uniformBuffers.push(this.commonUnifoms);
     }
-  }]);
-  return BaseModel;
-}();
+  }
+  // 获取数据映射 uniform 信息
+  getUniformsBufferInfo(uniformsOption) {
+    let uniformsLength = 0;
+    const uniformsArray = [];
+    Object.values(uniformsOption).forEach(value => {
+      if (Array.isArray(value)) {
+        uniformsArray.push(...value);
+        uniformsLength += value.length;
+      } else if (typeof value === 'number') {
+        // 排除纹理
+        uniformsArray.push(value);
+        uniformsLength += 1;
+      } else if (typeof value === 'boolean') {
+        uniformsArray.push(Number(value));
+        uniformsLength += 1;
+      }
+    });
+    return {
+      uniformsOption,
+      uniformsLength,
+      uniformsArray
+    };
+  }
+  getCommonUniformsInfo() {
+    return {
+      uniformsLength: 0,
+      uniformsArray: [],
+      uniformsOption: {}
+    };
+  }
+
+  // 更新支持数据映射的uniform
+  updateStyleUnifoms() {
+    var _this$attributeUnifom, _this$commonUnifoms;
+    const {
+      uniformsArray
+    } = this.getUniformsBufferInfo(this.getStyleAttribute());
+    const {
+      uniformsArray: commonUniformsArray
+    } = this.getCommonUniformsInfo();
+    (_this$attributeUnifom = this.attributeUnifoms) === null || _this$attributeUnifom === void 0 || _this$attributeUnifom.subData({
+      offset: 0,
+      data: new Uint8Array(new Float32Array(uniformsArray).buffer)
+    });
+    (_this$commonUnifoms = this.commonUnifoms) === null || _this$commonUnifoms === void 0 || _this$commonUnifoms.subData({
+      offset: 0,
+      data: new Uint8Array(new Float32Array(commonUniformsArray).buffer)
+    });
+  }
+}
+exports.default = BaseModel;

package/lib/core/CommonStyleAttribute.d.ts

@@ -0,0 +1,20 @@
+import type { IStyleAttribute } from '@antv/l7-core';
+export declare enum ShaderLocation {
+    POSITION = 0,
+    COLOR = 1,
+    VERTEX_ID = 2,
+    PICKING_COLOR = 3,
+    STROKE = 4,
+    OPACITY = 5,
+    OFFSETS = 6,
+    ROTATION = 7,
+    EXTRUSION_BASE = 8,
+    SIZE = 9,
+    SHAPE = 10,
+    EXTRUDE = 11,
+    MAX = 12,
+    NORMAL = 13,
+    UV = 14,
+    LINEAR = 15
+}
+export declare function getCommonStyleAttributeOptions(name: string): Partial<IStyleAttribute> | undefined;