@antv/l7-layers 2.9.19 → 2.9.22-alpha.0

package/lib/heatmap/models/heatmap.js

@@ -1,482 +1,350 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _l7Core = require("@antv/l7-core");
-
-var _l7Utils = require("@antv/l7-utils");
-
-var _glMatrix = require("gl-matrix");
-
-var _inversify = require("inversify");
-
-require("reflect-metadata");
-
-var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
-
-var _triangulation = require("../../core/triangulation");
-
-var _triangulation2 = require("../triangulation");
-
-var _dec, _class;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var heatmap3DFrag = "uniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\nuniform float u_opacity;\nvarying vec2 v_texCoord;\nvarying float v_intensity;\n\nvoid main(){\n   \n     float intensity = texture2D(u_texture, v_texCoord).r;\n    vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));\n    gl_FragColor = color;\n    // gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;\n     gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n}\n";
-var heatmap3DVert = "precision highp float;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nuniform sampler2D u_texture;\nvarying vec2 v_texCoord;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_InverseViewProjectionMatrix;\nuniform mat4 u_ViewProjectionMatrixUncentered;\nvarying float v_intensity;\n\n\nvec2 toBezier(float t, vec2 P0, vec2 P1, vec2 P2, vec2 P3) {\n    float t2 = t * t;\n    float one_minus_t = 1.0 - t;\n    float one_minus_t2 = one_minus_t * one_minus_t;\n    return (P0 * one_minus_t2 * one_minus_t + P1 * 3.0 * t * one_minus_t2 + P2 * 3.0 * t2 * one_minus_t + P3 * t2 * t);\n}\nvec2 toBezier(float t, vec4 p){\n    return toBezier(t, vec2(0.0, 0.0), vec2(p.x, p.y), vec2(p.z, p.w), vec2(1.0, 1.0));\n}\n#pragma include \"projection\"\nvoid main() {\n  v_texCoord = a_Uv;\n\n  vec2 pos = a_Uv * vec2(2.0) - vec2(1.0); // \u5C06\u539F\u672C 0 -> 1 \u7684 uv \u8F6C\u6362\u4E3A -1 -> 1 \u7684\u6807\u51C6\u5750\u6807\u7A7A\u95F4\uFF08NDC\uFF09\n\n  vec4 p1 = vec4(pos, 0.0, 1.0); // x/y \u5E73\u9762\u4E0A\u7684\u70B9\uFF08z == 0\uFF09\u53EF\u4EE5\u8BA4\u4E3A\u662F\u4E09\u7EF4\u4E0A\u7684\u70B9\u88AB\u6295\u5F71\u5230\u5E73\u9762\u540E\u7684\u70B9\n\tvec4 p2 = vec4(pos, 1.0, 1.0); // \u5E73\u884C\u4E8Ex/y\u5E73\u9762\u3001z==1 \u7684\u5E73\u9762\u4E0A\u7684\u70B9\n\n\tvec4 inverseP1 = u_InverseViewProjectionMatrix * p1; // \u6839\u636E\u89C6\u56FE\u6295\u5F71\u77E9\u9635\u7684\u9006\u77E9\u9635\u5E73\u9762\u4E0A\u7684\u53CD\u7B97\u51FA\u4E09\u7EF4\u7A7A\u95F4\u4E2D\u7684\u70B9\uFF08p1\u5E73\u9762\u4E0A\u7684\u70B9\uFF09\n\tvec4 inverseP2 = u_InverseViewProjectionMatrix * p2;\n\n  inverseP1 = inverseP1 / inverseP1.w; // \u5F52\u4E00\u5316\u64CD\u4F5C\uFF08\u5F52\u4E00\u5316\u540E\u4E3A\u4E16\u754C\u5750\u6807\uFF09\n\tinverseP2 = inverseP2 / inverseP2.w;\n\n\tfloat zPos = (0.0 - inverseP1.z) / (inverseP2.z - inverseP1.z); // ??\n\tvec4 position = inverseP1 + zPos * (inverseP2 - inverseP1);\n\n  vec4 b= vec4(0.5000, 0.0, 1.0, 0.5000);\n  float fh;\n\n  v_intensity = texture2D(u_texture, v_texCoord).r;\n  fh = toBezier(v_intensity, b).y;\n  gl_Position = u_ViewProjectionMatrixUncentered * vec4(position.xy, fh * project_pixel(50.), 1.0);\n \n}\n";
-var heatmapColorFrag = "uniform sampler2D u_texture;        // \u70ED\u529B\u5F3A\u5EA6\u56FE\nuniform sampler2D u_colorTexture;   // \u6839\u636E\u5F3A\u5EA6\u5206\u5E03\u7684\u8272\u5E26\nuniform float u_opacity;\nvarying vec2 v_texCoord;\n\nuniform vec2 u_ViewportSize;\n\nfloat getBlurIndusty() {\n    float vW = 2.0/u_ViewportSize.x;\n    float vH = 2.0/u_ViewportSize.y;\n    vec2 vUv = v_texCoord;\n    float i11 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i12 = texture2D( u_texture, vec2( vUv.x - 0.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i13 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n\n    float i21 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y) ).r;\n    float i22 = texture2D( u_texture, vec2( vUv.x , vUv.y) ).r;\n    float i23 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y) ).r;\n\n    float i31 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y-1.0*vH) ).r;\n    float i32 = texture2D( u_texture, vec2( vUv.x - 0.0 * vW, vUv.y-1.0*vH) ).r;\n    float i33 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y-1.0*vH) ).r;\n\n    return(\n        i11 + \n        i12 + \n        i13 + \n        i21 + \n        i21 + \n        i22 + \n        i23 + \n        i31 + \n        i32 + \n        i33\n        )/9.0;\n}\n\n\nvoid main(){\n    // float intensity = texture2D(u_texture, v_texCoord).r;\n    float intensity = getBlurIndusty();\n    vec4 color = texture2D(u_colorTexture, vec2(intensity, 0.0));\n\n    gl_FragColor =color;\n    gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n\n}\n";
-var heatmapColorVert = "precision highp float;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nvarying vec2 v_texCoord;\n\nvoid main() {\n  v_texCoord = a_Uv;\n\n  gl_Position = vec4(a_Position.xy, 0, 1.);\n}\n";
-var heatmapFramebufferFrag = "precision highp float;\nuniform float u_intensity;\nvarying float v_weight;\nvarying vec2 v_extrude;\n#define GAUSS_COEF  0.3989422804014327\nvoid main(){\n    float d = -0.5 * 3.0 * 3.0 * dot(v_extrude, v_extrude);\n    float val = v_weight * u_intensity * GAUSS_COEF * exp(d);\n    gl_FragColor = vec4(val, 1., 1., 1.);\n}\n";
-var heatmapFramebufferVert = "precision highp float;\nattribute vec3 a_Position;\nattribute float a_Size;\nattribute vec2 a_Dir;\nuniform float u_intensity;\nuniform float u_radius;\nvarying vec2 v_extrude;\nvarying float v_weight;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\n\n#define GAUSS_COEF  0.3989422804014327\n\n#pragma include \"projection\"\n\nvoid main(){\n    v_weight = a_Size;\n    float ZERO = 1.0 / 255.0 / 16.0;\n    float extrude_x = a_Dir.x * 2.0 -1.0;\n    float extrude_y = a_Dir.y * 2.0 -1.0;\n    vec2 extrude_dir = normalize(vec2(extrude_x,extrude_y));\n    float S = sqrt(-2.0 * log(ZERO / a_Size / u_intensity / GAUSS_COEF)) / 2.5;\n    v_extrude = extrude_dir * S;\n\n    vec2 offset = project_pixel(v_extrude * u_radius);\n    vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n\n    // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n\n    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n        gl_Position = u_Mvp * (vec4(project_pos.xy + offset, 0.0, 1.0));\n    } else {\n        gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n    }\n}\n";
-var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = function (_BaseModel) {
-  (0, _inherits2.default)(HeatMapModel, _BaseModel);
-
-  var _super = _createSuper(HeatMapModel);
-
-  function HeatMapModel() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, HeatMapModel);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "texture", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "colorTexture", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "heatmapFramerBuffer", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "intensityModel", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "colorModel", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shapeType", void 0);
-    return _this;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-
-  (0, _createClass2.default)(HeatMapModel, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$rendererService = this.rendererService,
-          clear = _this$rendererService.clear,
-          useFramebuffer = _this$rendererService.useFramebuffer;
-      useFramebuffer(this.heatmapFramerBuffer, function () {
-        clear({
-          color: [0, 0, 0, 0],
-          depth: 1,
-          stencil: 0,
-          framebuffer: _this2.heatmapFramerBuffer
-        });
-
-        _this2.drawIntensityMode();
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+
+// src/heatmap/models/heatmap.ts
+var heatmap_exports = {};
+__export(heatmap_exports, {
+  default: () => HeatMapModel
+});
+module.exports = __toCommonJS(heatmap_exports);
+var import_l7_core = require("@antv/l7-core");
+var import_l7_utils = require("@antv/l7-utils");
+var import_gl_matrix = require("gl-matrix");
+var import_inversify = require("inversify");
+var import_reflect_metadata = require("reflect-metadata");
+var import_BaseModel = __toESM(require("../../core/BaseModel"));
+var import_triangulation = require("../../core/triangulation");
+var import_heatmap_3d_frag = __toESM(require("../shaders/heatmap_3d_frag.glsl"));
+var import_heatmap_3d_vert = __toESM(require("../shaders/heatmap_3d_vert.glsl"));
+var import_heatmap_frag = __toESM(require("../shaders/heatmap_frag.glsl"));
+var import_heatmap_vert = __toESM(require("../shaders/heatmap_vert.glsl"));
+var import_heatmap_framebuffer_frag = __toESM(require("../shaders/heatmap_framebuffer_frag.glsl"));
+var import_heatmap_framebuffer_vert = __toESM(require("../shaders/heatmap_framebuffer_vert.glsl"));
+var import_triangulation2 = require("../triangulation");
+var HeatMapModel = class extends import_BaseModel.default {
+  render() {
+    const { clear, useFramebuffer } = this.rendererService;
+    useFramebuffer(this.heatmapFramerBuffer, () => {
+      clear({
+        color: [0, 0, 0, 0],
+        depth: 1,
+        stencil: 0,
+        framebuffer: this.heatmapFramerBuffer
       });
-
-      if (this.layer.styleNeedUpdate) {
-        this.updateColorTexture();
-      }
-
-      this.shapeType === 'heatmap' ? this.drawColorMode() : this.draw3DHeatMap();
-    }
-  }, {
-    key: "getUninforms",
-    value: function getUninforms() {
-      throw new Error('Method not implemented.');
-    }
-  }, {
-    key: "initModels",
-    value: function () {
-      var _initModels = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee(callbackModel) {
-        var _shapeAttr$scale;
-
-        var _this$rendererService2, createFramebuffer, clear, getViewportSize, createTexture2D, useFramebuffer, shapeAttr, shapeType, _getViewportSize, width, height;
-
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$rendererService2 = this.rendererService, createFramebuffer = _this$rendererService2.createFramebuffer, clear = _this$rendererService2.clear, getViewportSize = _this$rendererService2.getViewportSize, createTexture2D = _this$rendererService2.createTexture2D, useFramebuffer = _this$rendererService2.useFramebuffer;
-                shapeAttr = this.styleAttributeService.getLayerStyleAttribute('shape');
-                shapeType = (shapeAttr === null || shapeAttr === void 0 ? void 0 : (_shapeAttr$scale = shapeAttr.scale) === null || _shapeAttr$scale === void 0 ? void 0 : _shapeAttr$scale.field) || 'heatmap';
-                this.shapeType = shapeType;
-                _context.next = 6;
-                return this.buildHeatMapIntensity();
-
-              case 6:
-                this.intensityModel = _context.sent;
-                this.colorModel = shapeType === 'heatmap' ? this.buildHeatmapColor() : this.build3dHeatMap();
-                _getViewportSize = getViewportSize(), width = _getViewportSize.width, height = _getViewportSize.height;
-                this.heatmapFramerBuffer = createFramebuffer({
-                  color: createTexture2D({
-                    width: Math.floor(width / 4),
-                    height: Math.floor(height / 4),
-                    wrapS: _l7Core.gl.CLAMP_TO_EDGE,
-                    wrapT: _l7Core.gl.CLAMP_TO_EDGE,
-                    min: _l7Core.gl.LINEAR,
-                    mag: _l7Core.gl.LINEAR
-                  }),
-                  depth: false
-                });
-                this.updateColorTexture();
-                callbackModel([this.intensityModel, this.colorModel]);
-
-              case 12:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
-
-      function initModels(_x) {
-        return _initModels.apply(this, arguments);
-      }
-
-      return initModels;
-    }()
-  }, {
-    key: "buildModels",
-    value: function buildModels(callbackModel) {
-      this.initModels(callbackModel);
+      this.drawIntensityMode();
+    });
+    if (this.layer.styleNeedUpdate) {
+      this.updateColorTexture();
     }
-  }, {
-    key: "registerBuiltinAttributes",
-    value: function registerBuiltinAttributes() {
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'dir',
-        type: _l7Core.AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Dir',
-          buffer: {
-            usage: _l7Core.gl.DYNAMIC_DRAW,
-            data: [],
-            type: _l7Core.gl.FLOAT
-          },
-          size: 2,
-          update: function update(feature, featureIdx, vertex, attributeIdx) {
-            return [vertex[3], vertex[4]];
-          }
-        }
-      });
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'size',
-        type: _l7Core.AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Size',
-          buffer: {
-            usage: _l7Core.gl.DYNAMIC_DRAW,
-            data: [],
-            type: _l7Core.gl.FLOAT
-          },
-          size: 1,
-          update: function update(feature, featureIdx, vertex, attributeIdx) {
-            var _feature$size = feature.size,
-                size = _feature$size === void 0 ? 1 : _feature$size;
-            return [size];
-          }
+    this.shapeType === "heatmap" ? this.drawColorMode() : this.draw3DHeatMap();
+  }
+  getUninforms() {
+    throw new Error("Method not implemented.");
+  }
+  async initModels(callbackModel) {
+    var _a;
+    const {
+      createFramebuffer,
+      clear,
+      getViewportSize,
+      createTexture2D,
+      useFramebuffer
+    } = this.rendererService;
+    const shapeAttr = this.styleAttributeService.getLayerStyleAttribute("shape");
+    const shapeType = ((_a = shapeAttr == null ? void 0 : shapeAttr.scale) == null ? void 0 : _a.field) || "heatmap";
+    this.shapeType = shapeType;
+    this.intensityModel = await this.buildHeatMapIntensity();
+    this.colorModel = shapeType === "heatmap" ? this.buildHeatmapColor() : this.build3dHeatMap();
+    const { width, height } = getViewportSize();
+    this.heatmapFramerBuffer = createFramebuffer({
+      color: createTexture2D({
+        width: Math.floor(width / 4),
+        height: Math.floor(height / 4),
+        wrapS: import_l7_core.gl.CLAMP_TO_EDGE,
+        wrapT: import_l7_core.gl.CLAMP_TO_EDGE,
+        min: import_l7_core.gl.LINEAR,
+        mag: import_l7_core.gl.LINEAR
+      }),
+      depth: false
+    });
+    this.updateColorTexture();
+    callbackModel([this.intensityModel, this.colorModel]);
+  }
+  buildModels(callbackModel) {
+    this.initModels(callbackModel);
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: "dir",
+      type: import_l7_core.AttributeType.Attribute,
+      descriptor: {
+        name: "a_Dir",
+        buffer: {
+          usage: import_l7_core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: import_l7_core.gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex, attributeIdx) => {
+          return [vertex[3], vertex[4]];
         }
-      });
-    }
-  }, {
-    key: "buildHeatMapIntensity",
-    value: function () {
-      var _buildHeatMapIntensity = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee2() {
-        var model;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                this.layer.triangulation = _triangulation.HeatmapTriangulation;
-                _context2.next = 3;
-                return this.layer.buildLayerModel({
-                  moduleName: 'heatmapIntensity',
-                  vertexShader: heatmapFramebufferVert,
-                  fragmentShader: heatmapFramebufferFrag,
-                  triangulation: _triangulation.HeatmapTriangulation,
-                  depth: {
-                    enable: false
-                  },
-                  cull: {
-                    enable: true,
-                    face: (0, _l7Utils.getCullFace)(this.mapService.version)
-                  },
-                  blend: {
-                    enable: true,
-                    func: {
-                      srcRGB: _l7Core.gl.ONE,
-                      srcAlpha: 1,
-                      dstRGB: _l7Core.gl.ONE,
-                      dstAlpha: 1
-                    }
-                  }
-                });
-
-              case 3:
-                model = _context2.sent;
-                return _context2.abrupt("return", model);
-
-              case 5:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, this);
-      }));
-
-      function buildHeatMapIntensity() {
-        return _buildHeatMapIntensity.apply(this, arguments);
       }
-
-      return buildHeatMapIntensity;
-    }()
-  }, {
-    key: "buildHeatmapColor",
-    value: function buildHeatmapColor() {
-      var _ref = this.layer.getLayerConfig(),
-          _ref$mask = _ref.mask,
-          mask = _ref$mask === void 0 ? false : _ref$mask,
-          _ref$maskInside = _ref.maskInside,
-          maskInside = _ref$maskInside === void 0 ? true : _ref$maskInside;
-
-      this.shaderModuleService.registerModule('heatmapColor', {
-        vs: heatmapColorVert,
-        fs: heatmapColorFrag
-      });
-
-      var _this$shaderModuleSer = this.shaderModuleService.getModule('heatmapColor'),
-          vs = _this$shaderModuleSer.vs,
-          fs = _this$shaderModuleSer.fs,
-          uniforms = _this$shaderModuleSer.uniforms;
-
-      var _this$rendererService3 = this.rendererService,
-          createAttribute = _this$rendererService3.createAttribute,
-          createElements = _this$rendererService3.createElements,
-          createBuffer = _this$rendererService3.createBuffer,
-          createModel = _this$rendererService3.createModel;
-      return createModel({
-        vs: vs,
-        fs: fs,
-        attributes: {
-          a_Position: createAttribute({
-            buffer: createBuffer({
-              data: [-1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0],
-              type: _l7Core.gl.FLOAT
-            }),
-            size: 3
-          }),
-          a_Uv: createAttribute({
-            buffer: createBuffer({
-              data: [0, 1, 1, 1, 0, 0, 1, 0],
-              type: _l7Core.gl.FLOAT
-            }),
-            size: 2
-          })
-        },
-        uniforms: _objectSpread({}, uniforms),
-        depth: {
-          enable: false
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: "size",
+      type: import_l7_core.AttributeType.Attribute,
+      descriptor: {
+        name: "a_Size",
+        buffer: {
+          usage: import_l7_core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: import_l7_core.gl.FLOAT
         },
-        blend: this.getBlend(),
-        count: 6,
-        elements: createElements({
-          data: [0, 2, 1, 2, 3, 1],
-          type: _l7Core.gl.UNSIGNED_INT,
-          count: 6
-        }),
-        stencil: (0, _l7Utils.getMask)(mask, maskInside)
-      });
-    }
-  }, {
-    key: "drawIntensityMode",
-    value: function drawIntensityMode() {
-      var _this$intensityModel;
-
-      var _ref2 = this.layer.getLayerConfig(),
-          opacity = _ref2.opacity,
-          _ref2$intensity = _ref2.intensity,
-          intensity = _ref2$intensity === void 0 ? 10 : _ref2$intensity,
-          _ref2$radius = _ref2.radius,
-          radius = _ref2$radius === void 0 ? 5 : _ref2$radius;
-
-      (_this$intensityModel = this.intensityModel) === null || _this$intensityModel === void 0 ? void 0 : _this$intensityModel.draw({
-        uniforms: {
-          u_opacity: opacity || 1.0,
-          u_radius: radius,
-          u_intensity: intensity
+        size: 1,
+        update: (feature, featureIdx, vertex, attributeIdx) => {
+          const { size = 1 } = feature;
+          return [size];
         }
-      });
-    }
-  }, {
-    key: "drawColorMode",
-    value: function drawColorMode() {
-      var _this$colorModel;
-
-      var _ref3 = this.layer.getLayerConfig(),
-          opacity = _ref3.opacity;
-
-      (_this$colorModel = this.colorModel) === null || _this$colorModel === void 0 ? void 0 : _this$colorModel.draw({
-        uniforms: {
-          u_opacity: opacity || 1.0,
-          u_colorTexture: this.colorTexture,
-          u_texture: this.heatmapFramerBuffer
-        }
-      });
-    }
-  }, {
-    key: "draw3DHeatMap",
-    value: function draw3DHeatMap() {
-      var _this$colorModel2;
-
-      var _ref4 = this.layer.getLayerConfig(),
-          opacity = _ref4.opacity;
-
-      var invert = _glMatrix.mat4.create();
-
-      _glMatrix.mat4.invert(invert, this.cameraService.getViewProjectionMatrixUncentered());
-
-      (_this$colorModel2 = this.colorModel) === null || _this$colorModel2 === void 0 ? void 0 : _this$colorModel2.draw({
-        uniforms: {
-          u_opacity: opacity || 1.0,
-          u_colorTexture: this.colorTexture,
-          u_texture: this.heatmapFramerBuffer,
-          u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
-          u_InverseViewProjectionMatrix: (0, _toConsumableArray2.default)(invert)
+      }
+    });
+  }
+  async buildHeatMapIntensity() {
+    this.layer.triangulation = import_triangulation.HeatmapTriangulation;
+    const model = await this.layer.buildLayerModel({
+      moduleName: "heatmapIntensity",
+      vertexShader: import_heatmap_framebuffer_vert.default,
+      fragmentShader: import_heatmap_framebuffer_frag.default,
+      triangulation: import_triangulation.HeatmapTriangulation,
+      depth: {
+        enable: false
+      },
+      cull: {
+        enable: true,
+        face: (0, import_l7_utils.getCullFace)(this.mapService.version)
+      },
+      blend: {
+        enable: true,
+        func: {
+          srcRGB: import_l7_core.gl.ONE,
+          srcAlpha: 1,
+          dstRGB: import_l7_core.gl.ONE,
+          dstAlpha: 1
         }
-      });
-    }
-  }, {
-    key: "build3dHeatMap",
-    value: function build3dHeatMap() {
-      var _ref5 = this.layer.getLayerConfig(),
-          _ref5$mask = _ref5.mask,
-          mask = _ref5$mask === void 0 ? false : _ref5$mask,
-          _ref5$maskInside = _ref5.maskInside,
-          maskInside = _ref5$maskInside === void 0 ? true : _ref5$maskInside;
-
-      var getViewportSize = this.rendererService.getViewportSize;
-
-      var _getViewportSize2 = getViewportSize(),
-          width = _getViewportSize2.width,
-          height = _getViewportSize2.height;
-
-      var triangulation = (0, _triangulation2.heatMap3DTriangulation)(width / 4.0, height / 4.0);
-      this.shaderModuleService.registerModule('heatmap3dColor', {
-        vs: heatmap3DVert,
-        fs: heatmap3DFrag
-      });
-
-      var _this$shaderModuleSer2 = this.shaderModuleService.getModule('heatmap3dColor'),
-          vs = _this$shaderModuleSer2.vs,
-          fs = _this$shaderModuleSer2.fs,
-          uniforms = _this$shaderModuleSer2.uniforms;
-
-      var _this$rendererService4 = this.rendererService,
-          createAttribute = _this$rendererService4.createAttribute,
-          createElements = _this$rendererService4.createElements,
-          createBuffer = _this$rendererService4.createBuffer,
-          createModel = _this$rendererService4.createModel;
-      return createModel({
-        vs: vs,
-        fs: fs,
-        attributes: {
-          a_Position: createAttribute({
-            buffer: createBuffer({
-              data: triangulation.vertices,
-              type: _l7Core.gl.FLOAT
-            }),
-            size: 3
+      }
+    });
+    return model;
+  }
+  buildHeatmapColor() {
+    const {
+      mask = false,
+      maskInside = true
+    } = this.layer.getLayerConfig();
+    this.shaderModuleService.registerModule("heatmapColor", {
+      vs: import_heatmap_vert.default,
+      fs: import_heatmap_frag.default
+    });
+    const { vs, fs, uniforms } = this.shaderModuleService.getModule("heatmapColor");
+    const {
+      createAttribute,
+      createElements,
+      createBuffer,
+      createModel
+    } = this.rendererService;
+    return createModel({
+      vs,
+      fs,
+      attributes: {
+        a_Position: createAttribute({
+          buffer: createBuffer({
+            data: [-1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0],
+            type: import_l7_core.gl.FLOAT
           }),
-          a_Uv: createAttribute({
-            buffer: createBuffer({
-              data: triangulation.uvs,
-              type: _l7Core.gl.FLOAT
-            }),
-            size: 2
-          })
-        },
-        primitive: _l7Core.gl.TRIANGLES,
-        uniforms: _objectSpread({}, uniforms),
-        depth: {
-          enable: true
-        },
-        blend: {
-          enable: true,
-          func: {
-            srcRGB: _l7Core.gl.SRC_ALPHA,
-            srcAlpha: 1,
-            dstRGB: _l7Core.gl.ONE_MINUS_SRC_ALPHA,
-            dstAlpha: 1
-          }
-        },
-        elements: createElements({
-          data: triangulation.indices,
-          type: _l7Core.gl.UNSIGNED_INT,
-          count: triangulation.indices.length
+          size: 3
         }),
-        stencil: (0, _l7Utils.getMask)(mask, maskInside)
-      });
-    }
-  }, {
-    key: "updateStyle",
-    value: function updateStyle() {
-      this.updateColorTexture();
-    }
-  }, {
-    key: "updateColorTexture",
-    value: function updateColorTexture() {
-      var createTexture2D = this.rendererService.createTexture2D;
-
-      if (this.texture) {
-        this.texture.destroy();
+        a_Uv: createAttribute({
+          buffer: createBuffer({
+            data: [0, 1, 1, 1, 0, 0, 1, 0],
+            type: import_l7_core.gl.FLOAT
+          }),
+          size: 2
+        })
+      },
+      uniforms: {
+        ...uniforms
+      },
+      depth: {
+        enable: false
+      },
+      blend: this.getBlend(),
+      count: 6,
+      elements: createElements({
+        data: [0, 2, 1, 2, 3, 1],
+        type: import_l7_core.gl.UNSIGNED_INT,
+        count: 6
+      }),
+      stencil: (0, import_l7_utils.getMask)(mask, maskInside)
+    });
+  }
+  drawIntensityMode() {
+    var _a;
+    const {
+      opacity,
+      intensity = 10,
+      radius = 5
+    } = this.layer.getLayerConfig();
+    (_a = this.intensityModel) == null ? void 0 : _a.draw({
+      uniforms: {
+        u_opacity: opacity || 1,
+        u_radius: radius,
+        u_intensity: intensity
       }
-
-      var _ref6 = this.layer.getLayerConfig(),
-          rampColors = _ref6.rampColors;
-
-      var imageData = (0, _l7Utils.generateColorRamp)(rampColors);
-      this.colorTexture = createTexture2D({
-        data: new Uint8Array(imageData.data),
-        width: imageData.width,
-        height: imageData.height,
-        wrapS: _l7Core.gl.CLAMP_TO_EDGE,
-        wrapT: _l7Core.gl.CLAMP_TO_EDGE,
-        min: _l7Core.gl.NEAREST,
-        mag: _l7Core.gl.NEAREST,
-        flipY: false
-      });
+    });
+  }
+  drawColorMode() {
+    var _a;
+    const {
+      opacity
+    } = this.layer.getLayerConfig();
+    (_a = this.colorModel) == null ? void 0 : _a.draw({
+      uniforms: {
+        u_opacity: opacity || 1,
+        u_colorTexture: this.colorTexture,
+        u_texture: this.heatmapFramerBuffer
+      }
+    });
+  }
+  draw3DHeatMap() {
+    var _a;
+    const {
+      opacity
+    } = this.layer.getLayerConfig();
+    const invert = import_gl_matrix.mat4.create();
+    import_gl_matrix.mat4.invert(invert, this.cameraService.getViewProjectionMatrixUncentered());
+    (_a = this.colorModel) == null ? void 0 : _a.draw({
+      uniforms: {
+        u_opacity: opacity || 1,
+        u_colorTexture: this.colorTexture,
+        u_texture: this.heatmapFramerBuffer,
+        u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
+        u_InverseViewProjectionMatrix: [...invert]
+      }
+    });
+  }
+  build3dHeatMap() {
+    const {
+      mask = false,
+      maskInside = true
+    } = this.layer.getLayerConfig();
+    const { getViewportSize } = this.rendererService;
+    const { width, height } = getViewportSize();
+    const triangulation = (0, import_triangulation2.heatMap3DTriangulation)(width / 4, height / 4);
+    this.shaderModuleService.registerModule("heatmap3dColor", {
+      vs: import_heatmap_3d_vert.default,
+      fs: import_heatmap_3d_frag.default
+    });
+    const { vs, fs, uniforms } = this.shaderModuleService.getModule("heatmap3dColor");
+    const {
+      createAttribute,
+      createElements,
+      createBuffer,
+      createModel
+    } = this.rendererService;
+    return createModel({
+      vs,
+      fs,
+      attributes: {
+        a_Position: createAttribute({
+          buffer: createBuffer({
+            data: triangulation.vertices,
+            type: import_l7_core.gl.FLOAT
+          }),
+          size: 3
+        }),
+        a_Uv: createAttribute({
+          buffer: createBuffer({
+            data: triangulation.uvs,
+            type: import_l7_core.gl.FLOAT
+          }),
+          size: 2
+        })
+      },
+      primitive: import_l7_core.gl.TRIANGLES,
+      uniforms: {
+        ...uniforms
+      },
+      depth: {
+        enable: true
+      },
+      blend: {
+        enable: true,
+        func: {
+          srcRGB: import_l7_core.gl.SRC_ALPHA,
+          srcAlpha: 1,
+          dstRGB: import_l7_core.gl.ONE_MINUS_SRC_ALPHA,
+          dstAlpha: 1
+        }
+      },
+      elements: createElements({
+        data: triangulation.indices,
+        type: import_l7_core.gl.UNSIGNED_INT,
+        count: triangulation.indices.length
+      }),
+      stencil: (0, import_l7_utils.getMask)(mask, maskInside)
+    });
+  }
+  updateStyle() {
+    this.updateColorTexture();
+  }
+  updateColorTexture() {
+    const { createTexture2D } = this.rendererService;
+    if (this.texture) {
+      this.texture.destroy();
     }
-  }]);
-  return HeatMapModel;
-}(_BaseModel2.default)) || _class);
-exports.default = HeatMapModel;
-//# sourceMappingURL=heatmap.js.map
+    const {
+      rampColors
+    } = this.layer.getLayerConfig();
+    const imageData = (0, import_l7_utils.generateColorRamp)(rampColors);
+    this.colorTexture = createTexture2D({
+      data: new Uint8Array(imageData.data),
+      width: imageData.width,
+      height: imageData.height,
+      wrapS: import_l7_core.gl.CLAMP_TO_EDGE,
+      wrapT: import_l7_core.gl.CLAMP_TO_EDGE,
+      min: import_l7_core.gl.NEAREST,
+      mag: import_l7_core.gl.NEAREST,
+      flipY: false
+    });
+  }
+};
+HeatMapModel = __decorateClass([
+  (0, import_inversify.injectable)()
+], HeatMapModel);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});