@antv/l7-layers 2.21.0 → 2.21.2

package/es/heatmap/models/heatmap.js

@@ -1,492 +1,435 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 import { AttributeType, TextureUsage, gl } from '@antv/l7-core';
 import { generateColorRamp, getCullFace, lodashUtil } from '@antv/l7-utils';
 import { mat4 } from 'gl-matrix';
 import BaseModel from "../../core/BaseModel";
 import { HeatmapTriangulation } from "../../core/triangulation";
 /* babel-plugin-inline-import '../shaders/heatmap/heatmap_3d_frag.glsl' */
-var heatmap_3d_frag = "layout(std140) uniform commonUniforms {\n  mat4 u_ViewProjectionMatrixUncentered;\n  mat4 u_InverseViewProjectionMatrix;\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\n\nuniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nin vec2 v_texCoord;\nin float v_intensity;\nout vec4 outputColor;\n\nvoid main(){\n   \n    float intensity = texture(SAMPLER_2D(u_texture), v_texCoord).r;\n    vec4 color = texture(SAMPLER_2D(u_colorTexture),vec2(intensity, 0));\n    outputColor = color;\n    // gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;\n   outputColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n}\n";
+const heatmap_3d_frag = "layout(std140) uniform commonUniforms {\n  mat4 u_ViewProjectionMatrixUncentered;\n  mat4 u_InverseViewProjectionMatrix;\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\n\nuniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nin vec2 v_texCoord;\nin float v_intensity;\nout vec4 outputColor;\n\nvoid main(){\n   \n    float intensity = texture(SAMPLER_2D(u_texture), v_texCoord).r;\n    vec4 color = texture(SAMPLER_2D(u_colorTexture),vec2(intensity, 0));\n    outputColor = color;\n    // gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;\n   outputColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n}\n";
 /* babel-plugin-inline-import '../shaders/heatmap/heatmap_3d_vert.glsl' */
-var heatmap_3d_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  mat4 u_ViewProjectionMatrixUncentered;\n  mat4 u_InverseViewProjectionMatrix;\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\n\nuniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nout vec2 v_texCoord;\nout float v_intensity;\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\n#pragma include \"projection\"\n#pragma include \"project\"\n\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 = texture(SAMPLER_2D(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"; // 绘制平面热力的 shader
+const heatmap_3d_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  mat4 u_ViewProjectionMatrixUncentered;\n  mat4 u_InverseViewProjectionMatrix;\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\n\nuniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nout vec2 v_texCoord;\nout float v_intensity;\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\n#pragma include \"projection\"\n#pragma include \"project\"\n\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 = texture(SAMPLER_2D(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"; // 绘制平面热力的 shader
 /* babel-plugin-inline-import '../shaders/heatmap/heatmap_frag.glsl' */
-var heatmap_frag = "uniform sampler2D u_texture;        // \u70ED\u529B\u5F3A\u5EA6\u56FE\nuniform sampler2D u_colorTexture;   // \u6839\u636E\u5F3A\u5EA6\u5206\u5E03\u7684\u8272\u5E26\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\nin vec2 v_texCoord;\nout vec4 outputColor;\n\n#pragma include \"scene_uniforms\"\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 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i12 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 0.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i13 = texture(SAMPLER_2D(u_texture), vec2( vUv.x + 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n\n    float i21 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 1.0 * vW, vUv.y) ).r;\n    float i22 = texture(SAMPLER_2D(u_texture), vec2( vUv.x , vUv.y) ).r;\n    float i23 = texture(SAMPLER_2D(u_texture), vec2( vUv.x + 1.0 * vW, vUv.y) ).r;\n\n    float i31 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 1.0 * vW, vUv.y-1.0*vH) ).r;\n    float i32 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 0.0 * vW, vUv.y-1.0*vH) ).r;\n    float i33 = texture(SAMPLER_2D(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 = texture(u_texture, v_texCoord).r;\n    float intensity = getBlurIndusty();\n    vec4 color = texture(SAMPLER_2D(u_colorTexture), vec2(intensity, 0.0));\n    outputColor = color;\n    outputColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n}\n";
+const heatmap_frag = "uniform sampler2D u_texture;        // \u70ED\u529B\u5F3A\u5EA6\u56FE\nuniform sampler2D u_colorTexture;   // \u6839\u636E\u5F3A\u5EA6\u5206\u5E03\u7684\u8272\u5E26\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\nin vec2 v_texCoord;\nout vec4 outputColor;\n\n#pragma include \"scene_uniforms\"\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 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i12 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 0.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i13 = texture(SAMPLER_2D(u_texture), vec2( vUv.x + 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n\n    float i21 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 1.0 * vW, vUv.y) ).r;\n    float i22 = texture(SAMPLER_2D(u_texture), vec2( vUv.x , vUv.y) ).r;\n    float i23 = texture(SAMPLER_2D(u_texture), vec2( vUv.x + 1.0 * vW, vUv.y) ).r;\n\n    float i31 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 1.0 * vW, vUv.y-1.0*vH) ).r;\n    float i32 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 0.0 * vW, vUv.y-1.0*vH) ).r;\n    float i33 = texture(SAMPLER_2D(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 = texture(u_texture, v_texCoord).r;\n    float intensity = getBlurIndusty();\n    vec4 color = texture(SAMPLER_2D(u_colorTexture), vec2(intensity, 0.0));\n    outputColor = color;\n    outputColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n}\n";
 /* babel-plugin-inline-import '../shaders/heatmap/heatmap_vert.glsl' */
-var heatmap_vert = "\nlayout(location = 0) in vec3 a_Position;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\n\n#pragma include \"scene_uniforms\"\n\nout vec2 v_texCoord;\nvoid main() {\n  v_texCoord = a_Uv;\n  #ifdef VIEWPORT_ORIGIN_TL\n    v_texCoord.y = 1.0 - v_texCoord.y;\n  #endif\n\n  gl_Position = vec4(a_Position.xy, 0, 1.);\n}\n";
+const heatmap_vert = "\nlayout(location = 0) in vec3 a_Position;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\n\n#pragma include \"scene_uniforms\"\n\nout vec2 v_texCoord;\nvoid main() {\n  v_texCoord = a_Uv;\n  #ifdef VIEWPORT_ORIGIN_TL\n    v_texCoord.y = 1.0 - v_texCoord.y;\n  #endif\n\n  gl_Position = vec4(a_Position.xy, 0, 1.);\n}\n";
 import { ShaderLocation } from "../../core/CommonStyleAttribute";
 /* babel-plugin-inline-import '../shaders/heatmap/heatmap_framebuffer_frag.glsl' */
-var heatmap_framebuffer_frag = "layout(std140) uniform commonUniforms {\n  float u_radius;\n  float u_intensity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n};\n\nin vec2 v_extrude;\nin float v_weight;\nout vec4 outputColor;\n#define GAUSS_COEF  0.3989422804014327\n\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    outputColor = vec4(val, 1., 1., 1.);\n}\n";
+const heatmap_framebuffer_frag = "layout(std140) uniform commonUniforms {\n  float u_radius;\n  float u_intensity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n};\n\nin vec2 v_extrude;\nin float v_weight;\nout vec4 outputColor;\n#define GAUSS_COEF  0.3989422804014327\n\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    outputColor = vec4(val, 1., 1., 1.);\n}\n";
 /* babel-plugin-inline-import '../shaders/heatmap/heatmap_framebuffer_vert.glsl' */
-var heatmap_framebuffer_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 9) in float a_Size;\nlayout(location = 10) in vec2 a_Dir;\n\n\nlayout(std140) uniform commonUniforms {\n  float u_radius;\n  float u_intensity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n};\n\nout vec2 v_extrude;\nout float v_weight;\n\n#define GAUSS_COEF  0.3989422804014327\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main(){\n    vec3 picking_color_placeholder = u_PickingColor;\n\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";
+const heatmap_framebuffer_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 9) in float a_Size;\nlayout(location = 10) in vec2 a_Dir;\n\n\nlayout(std140) uniform commonUniforms {\n  float u_radius;\n  float u_intensity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n};\n\nout vec2 v_extrude;\nout float v_weight;\n\n#define GAUSS_COEF  0.3989422804014327\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main(){\n    vec3 picking_color_placeholder = u_PickingColor;\n\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";
 import { heatMap3DTriangulation } from "../triangulation";
-var isEqual = lodashUtil.isEqual;
-var HeatMapModel = /*#__PURE__*/function (_BaseModel) {
-  _inherits(HeatMapModel, _BaseModel);
-  var _super = _createSuper(HeatMapModel);
-  function HeatMapModel() {
-    var _this;
-    _classCallCheck(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));
-    _defineProperty(_assertThisInitialized(_this), "colorModelUniformBuffer", []);
-    _defineProperty(_assertThisInitialized(_this), "heat3DModelUniformBuffer", []);
-    return _this;
+const {
+  isEqual
+} = lodashUtil;
+export default class HeatMapModel extends BaseModel {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "texture", void 0);
+    _defineProperty(this, "colorTexture", void 0);
+    _defineProperty(this, "heatmapFramerBuffer", void 0);
+    _defineProperty(this, "heatmapTexture", void 0);
+    _defineProperty(this, "intensityModel", void 0);
+    _defineProperty(this, "colorModel", void 0);
+    _defineProperty(this, "shapeType", void 0);
+    _defineProperty(this, "preRampColors", void 0);
+    _defineProperty(this, "colorModelUniformBuffer", []);
+    _defineProperty(this, "heat3DModelUniformBuffer", []);
   }
-  _createClass(HeatMapModel, [{
-    key: "prerender",
-    value: function prerender() {
-      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(); // 密度图
+  prerender() {
+    const {
+      clear,
+      useFramebuffer
+    } = this.rendererService;
+    useFramebuffer(this.heatmapFramerBuffer, () => {
+      clear({
+        color: [0, 0, 0, 0],
+        depth: 1,
+        stencil: 0,
+        framebuffer: this.heatmapFramerBuffer
       });
+      this.drawIntensityMode(); // 密度图
+    });
+  }
+  render(options) {
+    const {
+      rampColors
+    } = this.layer.getLayerConfig();
+    if (!isEqual(this.preRampColors, rampColors)) {
+      this.updateColorTexture();
     }
-  }, {
-    key: "render",
-    value: function render(options) {
-      var _ref = this.layer.getLayerConfig(),
-        rampColors = _ref.rampColors;
-      if (!isEqual(this.preRampColors, rampColors)) {
-        this.updateColorTexture();
-      }
-      this.shapeType === 'heatmap' ? this.drawHeatMap(options) // 2D
-      : this.draw3DHeatMap(options); // 3D
-    }
-  }, {
-    key: "getUninforms",
-    value: function getUninforms() {
-      throw new Error('Method not implemented.');
-    }
-  }, {
-    key: "initModels",
-    value: function () {
-      var _initModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _shapeAttr$scale;
-        var _this$rendererService2, createFramebuffer, getViewportSize, createTexture2D, shapeAttr, shapeType, _getViewportSize, width, height;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _this$rendererService2 = this.rendererService, createFramebuffer = _this$rendererService2.createFramebuffer, getViewportSize = _this$rendererService2.getViewportSize, createTexture2D = _this$rendererService2.createTexture2D;
-              shapeAttr = this.styleAttributeService.getLayerStyleAttribute('shape');
-              shapeType = (shapeAttr === null || shapeAttr === 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.buildHeatmap() // 2D
-              : this.build3dHeatMap(); // 3D
-              _getViewportSize = getViewportSize(), width = _getViewportSize.width, height = _getViewportSize.height; // 初始化密度图纹理
-              this.heatmapTexture = createTexture2D({
-                width: Math.floor(width / 4),
-                height: Math.floor(height / 4),
-                wrapS: gl.CLAMP_TO_EDGE,
-                wrapT: gl.CLAMP_TO_EDGE,
-                min: gl.LINEAR,
-                mag: gl.LINEAR,
-                usage: TextureUsage.RENDER_TARGET
-              });
-              this.heatmapFramerBuffer = createFramebuffer({
-                color: this.heatmapTexture,
-                depth: true,
-                width: Math.floor(width / 4),
-                height: Math.floor(height / 4)
-              });
-              this.updateColorTexture();
-              return _context.abrupt("return", [this.intensityModel, this.colorModel]);
-            case 13:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function initModels() {
-        return _initModels.apply(this, arguments);
-      }
-      return initModels;
-    }()
-  }, {
-    key: "buildModels",
-    value: function () {
-      var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              return _context2.abrupt("return", this.initModels());
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function buildModels() {
-        return _buildModels.apply(this, arguments);
-      }
-      return buildModels;
-    }()
-  }, {
-    key: "registerBuiltinAttributes",
-    value: function registerBuiltinAttributes() {
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'dir',
-        type: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Dir',
-          shaderLocation: 10,
-          buffer: {
-            usage: gl.DYNAMIC_DRAW,
-            data: [],
-            type: gl.FLOAT
-          },
-          size: 2,
-          update: function update(feature, featureIdx, vertex) {
-            return [vertex[3], vertex[4]];
-          }
-        }
+    this.shapeType === 'heatmap' ? this.drawHeatMap(options) // 2D
+    : this.draw3DHeatMap(options); // 3D
+  }
+  getUninforms() {
+    throw new Error('Method not implemented.');
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      var _shapeAttr$scale;
+      const {
+        createFramebuffer,
+        getViewportSize,
+        createTexture2D
+      } = _this.rendererService;
+      const shapeAttr = _this.styleAttributeService.getLayerStyleAttribute('shape');
+      const shapeType = (shapeAttr === null || shapeAttr === void 0 || (_shapeAttr$scale = shapeAttr.scale) === null || _shapeAttr$scale === void 0 ? void 0 : _shapeAttr$scale.field) || 'heatmap';
+      _this.shapeType = shapeType;
+      // 生成热力图密度图
+      _this.intensityModel = yield _this.buildHeatMapIntensity();
+      // 渲染到屏幕
+      _this.colorModel = shapeType === 'heatmap' ? _this.buildHeatmap() // 2D
+      : _this.build3dHeatMap(); // 3D
+
+      const {
+        width,
+        height
+      } = getViewportSize();
+
+      // 初始化密度图纹理
+      _this.heatmapTexture = createTexture2D({
+        width: Math.floor(width / 4),
+        height: Math.floor(height / 4),
+        wrapS: gl.CLAMP_TO_EDGE,
+        wrapT: gl.CLAMP_TO_EDGE,
+        min: gl.LINEAR,
+        mag: gl.LINEAR,
+        usage: TextureUsage.RENDER_TARGET
       });
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'size',
-        type: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Size',
-          shaderLocation: ShaderLocation.SIZE,
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: gl.DYNAMIC_DRAW,
-            data: [],
-            type: gl.FLOAT
-          },
-          size: 1,
-          update: function update(feature) {
-            var _feature$size = feature.size,
-              size = _feature$size === void 0 ? 1 : _feature$size;
-            return [size];
-          }
-        }
+      _this.heatmapFramerBuffer = createFramebuffer({
+        color: _this.heatmapTexture,
+        depth: true,
+        width: Math.floor(width / 4),
+        height: Math.floor(height / 4)
       });
-    }
-  }, {
-    key: "buildHeatMapIntensity",
-    value: function () {
-      var _buildHeatMapIntensity = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-        var model;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              this.uniformBuffers = [this.rendererService.createBuffer({
-                // opacity
-                data: new Float32Array(4).fill(0),
-                // 长度需要大于等于 4
-                isUBO: true
-              })];
-              this.layer.triangulation = HeatmapTriangulation;
-              _context3.next = 4;
-              return this.layer.buildLayerModel({
-                moduleName: 'heatmapIntensity',
-                vertexShader: heatmap_framebuffer_vert,
-                fragmentShader: heatmap_framebuffer_frag,
-                triangulation: HeatmapTriangulation,
-                depth: {
-                  enable: false
-                },
-                cull: {
-                  enable: true,
-                  face: getCullFace(this.mapService.version)
-                }
-              });
-            case 4:
-              model = _context3.sent;
-              return _context3.abrupt("return", model);
-            case 6:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3, this);
-      }));
-      function buildHeatMapIntensity() {
-        return _buildHeatMapIntensity.apply(this, arguments);
+      _this.updateColorTexture();
+      return [_this.intensityModel, _this.colorModel];
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      return _this2.initModels();
+    })();
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'dir',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Dir',
+        shaderLocation: 10,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[3], vertex[4]];
+        }
       }
-      return buildHeatMapIntensity;
-    }()
-  }, {
-    key: "buildHeatmap",
-    value: function buildHeatmap() {
-      this.shaderModuleService.registerModule('heatmapColor', {
-        vs: heatmap_vert,
-        fs: heatmap_frag
-      });
-      this.colorModelUniformBuffer = [this.rendererService.createBuffer({
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: ShaderLocation.SIZE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 1
+          } = feature;
+          return [size];
+        }
+      }
+    });
+  }
+  buildHeatMapIntensity() {
+    var _this3 = this;
+    return _asyncToGenerator(function* () {
+      _this3.uniformBuffers = [_this3.rendererService.createBuffer({
         // opacity
         data: new Float32Array(4).fill(0),
         // 长度需要大于等于 4
         isUBO: true
       })];
-      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,
-        uniformBuffers: [].concat(_toConsumableArray(this.colorModelUniformBuffer), _toConsumableArray(this.rendererService.uniformBuffers)),
-        attributes: {
-          a_Position: createAttribute({
-            shaderLocation: ShaderLocation.POSITION,
-            buffer: createBuffer({
-              data: [-1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0],
-              type: gl.FLOAT
-            }),
-            size: 3
-          }),
-          a_Uv: createAttribute({
-            shaderLocation: ShaderLocation.UV,
-            buffer: createBuffer({
-              data: [0, 1, 1, 1, 0, 0, 1, 0],
-              type: gl.FLOAT
-            }),
-            size: 2
-          })
-        },
-        uniforms: _objectSpread({}, uniforms),
+      _this3.layer.triangulation = HeatmapTriangulation;
+      const model = yield _this3.layer.buildLayerModel({
+        moduleName: 'heatmapIntensity',
+        vertexShader: heatmap_framebuffer_vert,
+        fragmentShader: heatmap_framebuffer_frag,
+        triangulation: HeatmapTriangulation,
         depth: {
           enable: false
         },
-        elements: createElements({
-          data: [0, 2, 1, 2, 3, 1],
-          type: gl.UNSIGNED_INT,
-          count: 6
-        })
-      });
-    }
-    // 绘制密度图
-  }, {
-    key: "drawIntensityMode",
-    value: function drawIntensityMode() {
-      var _this$intensityModel;
-      var _ref2 = this.layer.getLayerConfig(),
-        _ref2$intensity = _ref2.intensity,
-        intensity = _ref2$intensity === void 0 ? 10 : _ref2$intensity,
-        _ref2$radius = _ref2.radius,
-        radius = _ref2$radius === void 0 ? 5 : _ref2$radius;
-      var commonOptions = {
-        u_radius: radius,
-        u_intensity: intensity
-      };
-      this.uniformBuffers[0].subData({
-        offset: 0,
-        data: [radius, intensity]
-      });
-      this.layerService.beforeRenderData(this.layer);
-      this.layer.hooks.beforeRender.call();
-
-      // 绘制密度图
-      (_this$intensityModel = this.intensityModel) === null || _this$intensityModel === void 0 || _this$intensityModel.draw({
-        uniforms: commonOptions,
-        blend: {
+        cull: {
           enable: true,
-          func: {
-            srcRGB: gl.ONE,
-            srcAlpha: 1,
-            dstRGB: gl.ONE,
-            dstAlpha: 1
-          }
-        },
-        stencil: {
-          enable: false,
-          mask: 0xff,
-          func: {
-            cmp: 514,
-            // gl.EQUAL,
-            ref: 1,
-            mask: 0xff
-          }
+          face: getCullFace(_this3.mapService.version)
         }
       });
-      this.layer.hooks.afterRender.call();
-    }
-  }, {
-    key: "drawHeatMap",
-    value: function drawHeatMap(options) {
-      var _this$colorModel;
-      var _ref3 = this.layer.getLayerConfig(),
-        _ref3$opacity = _ref3.opacity,
-        opacity = _ref3$opacity === void 0 ? 1.0 : _ref3$opacity;
-      var commonOptions = {
-        u_opacity: opacity,
-        u_colorTexture: this.colorTexture,
-        u_texture: this.heatmapFramerBuffer
-      };
-      var textures = [this.heatmapTexture, this.colorTexture];
-      this.colorModelUniformBuffer[0].subData({
-        offset: 0,
-        data: [opacity]
-      });
-      (_this$colorModel = this.colorModel) === null || _this$colorModel === void 0 || _this$colorModel.draw({
-        uniforms: commonOptions,
-        textures: textures,
-        blend: this.getBlend(),
-        stencil: this.getStencil(options)
-      });
-    }
-  }, {
-    key: "draw3DHeatMap",
-    value: function draw3DHeatMap(options) {
-      var _this$colorModel2;
-      var _ref4 = this.layer.getLayerConfig(),
-        _ref4$opacity = _ref4.opacity,
-        opacity = _ref4$opacity === void 0 ? 1.0 : _ref4$opacity;
-      var invert = mat4.create();
-      mat4.invert(invert, this.cameraService.getViewProjectionMatrixUncentered());
-      var commonOptions = {
-        u_opacity: opacity,
-        u_colorTexture: this.colorTexture,
-        u_texture: this.heatmapFramerBuffer,
-        u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
-        u_InverseViewProjectionMatrix: _toConsumableArray(invert)
-      };
-      this.heat3DModelUniformBuffer[0].subData({
-        offset: 0,
-        data: [].concat(_toConsumableArray(commonOptions.u_ViewProjectionMatrixUncentered), _toConsumableArray(commonOptions.u_InverseViewProjectionMatrix), [opacity])
-      });
-      var textures = [this.heatmapTexture, this.colorTexture];
-      (_this$colorModel2 = this.colorModel) === null || _this$colorModel2 === void 0 || _this$colorModel2.draw({
-        uniforms: commonOptions,
-        textures: textures,
-        blend: {
-          enable: true,
-          func: {
-            srcRGB: gl.SRC_ALPHA,
-            srcAlpha: 1,
-            dstRGB: gl.ONE_MINUS_SRC_ALPHA,
-            dstAlpha: 1
-          }
-        },
-        stencil: this.getStencil(options)
-      });
-    }
-  }, {
-    key: "build3dHeatMap",
-    value: function build3dHeatMap() {
-      var getViewportSize = this.rendererService.getViewportSize;
-      var _getViewportSize2 = getViewportSize(),
-        width = _getViewportSize2.width,
-        height = _getViewportSize2.height;
-      var triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0);
-      this.shaderModuleService.registerModule('heatmap3dColor', {
-        vs: heatmap_3d_vert,
-        fs: heatmap_3d_frag
-      });
-      this.heat3DModelUniformBuffer = [this.rendererService.createBuffer({
-        // opacity
-        data: new Float32Array(16 * 2 + 4).fill(0),
-        // 长度需要大于等于 4
-        isUBO: true
-      })];
-      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({
-            shaderLocation: ShaderLocation.POSITION,
-            buffer: createBuffer({
-              data: triangulation.vertices,
-              type: gl.FLOAT
-            }),
-            size: 3
+      return model;
+    })();
+  }
+  buildHeatmap() {
+    this.shaderModuleService.registerModule('heatmapColor', {
+      vs: heatmap_vert,
+      fs: heatmap_frag
+    });
+    this.colorModelUniformBuffer = [this.rendererService.createBuffer({
+      // opacity
+      data: new Float32Array(4).fill(0),
+      // 长度需要大于等于 4
+      isUBO: true
+    })];
+    const {
+      vs,
+      fs,
+      uniforms
+    } = this.shaderModuleService.getModule('heatmapColor');
+    const {
+      createAttribute,
+      createElements,
+      createBuffer,
+      createModel
+    } = this.rendererService;
+    return createModel({
+      vs,
+      fs,
+      uniformBuffers: [...this.colorModelUniformBuffer, ...this.rendererService.uniformBuffers],
+      attributes: {
+        a_Position: createAttribute({
+          shaderLocation: ShaderLocation.POSITION,
+          buffer: createBuffer({
+            data: [-1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0],
+            type: gl.FLOAT
           }),
-          a_Uv: createAttribute({
-            shaderLocation: ShaderLocation.UV,
-            buffer: createBuffer({
-              data: triangulation.uvs,
-              type: gl.FLOAT
-            }),
-            size: 2
-          })
-        },
-        primitive: gl.TRIANGLES,
-        uniformBuffers: [].concat(_toConsumableArray(this.heat3DModelUniformBuffer), _toConsumableArray(this.rendererService.uniformBuffers)),
-        uniforms: _objectSpread({}, uniforms),
-        depth: {
-          enable: true
-        },
-        blend: {
-          enable: true,
-          func: {
-            srcRGB: gl.SRC_ALPHA,
-            srcAlpha: 1,
-            dstRGB: gl.ONE_MINUS_SRC_ALPHA,
-            dstAlpha: 1
-          }
-        },
-        elements: createElements({
-          data: triangulation.indices,
-          type: gl.UNSIGNED_INT,
-          count: triangulation.indices.length
+          size: 3
+        }),
+        a_Uv: createAttribute({
+          shaderLocation: ShaderLocation.UV,
+          buffer: createBuffer({
+            data: [0, 1, 1, 1, 0, 0, 1, 0],
+            type: gl.FLOAT
+          }),
+          size: 2
         })
-      });
-    }
-  }, {
-    key: "updateColorTexture",
-    value: function updateColorTexture() {
-      var createTexture2D = this.rendererService.createTexture2D;
-      if (this.texture) {
-        this.texture.destroy();
+      },
+      uniforms: _objectSpread({}, uniforms),
+      depth: {
+        enable: false
+      },
+      elements: createElements({
+        data: [0, 2, 1, 2, 3, 1],
+        type: gl.UNSIGNED_INT,
+        count: 6
+      })
+    });
+  }
+  // 绘制密度图
+  drawIntensityMode() {
+    var _this$intensityModel;
+    const {
+      intensity = 10,
+      radius = 5
+    } = this.layer.getLayerConfig();
+    const commonOptions = {
+      u_radius: radius,
+      u_intensity: intensity
+    };
+    this.uniformBuffers[0].subData({
+      offset: 0,
+      data: [radius, intensity]
+    });
+    this.layerService.beforeRenderData(this.layer);
+    this.layer.hooks.beforeRender.call();
+
+    // 绘制密度图
+    (_this$intensityModel = this.intensityModel) === null || _this$intensityModel === void 0 || _this$intensityModel.draw({
+      uniforms: commonOptions,
+      blend: {
+        enable: true,
+        func: {
+          srcRGB: gl.ONE,
+          srcAlpha: 1,
+          dstRGB: gl.ONE,
+          dstAlpha: 1
+        }
+      },
+      stencil: {
+        enable: false,
+        mask: 0xff,
+        func: {
+          cmp: 514,
+          // gl.EQUAL,
+          ref: 1,
+          mask: 0xff
+        }
       }
-      var _ref5 = this.layer.getLayerConfig(),
-        rampColors = _ref5.rampColors;
-      var imageData = generateColorRamp(rampColors);
-      this.colorTexture = createTexture2D({
-        data: imageData.data,
-        usage: TextureUsage.SAMPLED,
-        width: imageData.width,
-        height: imageData.height,
-        wrapS: gl.CLAMP_TO_EDGE,
-        wrapT: gl.CLAMP_TO_EDGE,
-        min: gl.NEAREST,
-        mag: gl.NEAREST,
-        flipY: false,
-        unorm: true
-      });
-      this.preRampColors = rampColors;
+    });
+    this.layer.hooks.afterRender.call();
+  }
+  drawHeatMap(options) {
+    var _this$colorModel;
+    const {
+      opacity = 1.0
+    } = this.layer.getLayerConfig();
+    const commonOptions = {
+      u_opacity: opacity,
+      u_colorTexture: this.colorTexture,
+      u_texture: this.heatmapFramerBuffer
+    };
+    const textures = [this.heatmapTexture, this.colorTexture];
+    this.colorModelUniformBuffer[0].subData({
+      offset: 0,
+      data: [opacity]
+    });
+    (_this$colorModel = this.colorModel) === null || _this$colorModel === void 0 || _this$colorModel.draw({
+      uniforms: commonOptions,
+      textures,
+      blend: this.getBlend(),
+      stencil: this.getStencil(options)
+    });
+  }
+  draw3DHeatMap(options) {
+    var _this$colorModel2;
+    const {
+      opacity = 1.0
+    } = this.layer.getLayerConfig();
+    const invert = mat4.create();
+    mat4.invert(invert, this.cameraService.getViewProjectionMatrixUncentered());
+    const commonOptions = {
+      u_opacity: opacity,
+      u_colorTexture: this.colorTexture,
+      u_texture: this.heatmapFramerBuffer,
+      u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
+      u_InverseViewProjectionMatrix: [...invert]
+    };
+    this.heat3DModelUniformBuffer[0].subData({
+      offset: 0,
+      data: [...commonOptions.u_ViewProjectionMatrixUncentered, ...commonOptions.u_InverseViewProjectionMatrix, opacity]
+    });
+    const textures = [this.heatmapTexture, this.colorTexture];
+    (_this$colorModel2 = this.colorModel) === null || _this$colorModel2 === void 0 || _this$colorModel2.draw({
+      uniforms: commonOptions,
+      textures,
+      blend: {
+        enable: true,
+        func: {
+          srcRGB: gl.SRC_ALPHA,
+          srcAlpha: 1,
+          dstRGB: gl.ONE_MINUS_SRC_ALPHA,
+          dstAlpha: 1
+        }
+      },
+      stencil: this.getStencil(options)
+    });
+  }
+  build3dHeatMap() {
+    const {
+      getViewportSize
+    } = this.rendererService;
+    const {
+      width,
+      height
+    } = getViewportSize();
+    const triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0);
+    this.shaderModuleService.registerModule('heatmap3dColor', {
+      vs: heatmap_3d_vert,
+      fs: heatmap_3d_frag
+    });
+    this.heat3DModelUniformBuffer = [this.rendererService.createBuffer({
+      // opacity
+      data: new Float32Array(16 * 2 + 4).fill(0),
+      // 长度需要大于等于 4
+      isUBO: true
+    })];
+    const {
+      vs,
+      fs,
+      uniforms
+    } = this.shaderModuleService.getModule('heatmap3dColor');
+    const {
+      createAttribute,
+      createElements,
+      createBuffer,
+      createModel
+    } = this.rendererService;
+    return createModel({
+      vs,
+      fs,
+      attributes: {
+        a_Position: createAttribute({
+          shaderLocation: ShaderLocation.POSITION,
+          buffer: createBuffer({
+            data: triangulation.vertices,
+            type: gl.FLOAT
+          }),
+          size: 3
+        }),
+        a_Uv: createAttribute({
+          shaderLocation: ShaderLocation.UV,
+          buffer: createBuffer({
+            data: triangulation.uvs,
+            type: gl.FLOAT
+          }),
+          size: 2
+        })
+      },
+      primitive: gl.TRIANGLES,
+      uniformBuffers: [...this.heat3DModelUniformBuffer, ...this.rendererService.uniformBuffers],
+      uniforms: _objectSpread({}, uniforms),
+      depth: {
+        enable: true
+      },
+      blend: {
+        enable: true,
+        func: {
+          srcRGB: gl.SRC_ALPHA,
+          srcAlpha: 1,
+          dstRGB: gl.ONE_MINUS_SRC_ALPHA,
+          dstAlpha: 1
+        }
+      },
+      elements: createElements({
+        data: triangulation.indices,
+        type: gl.UNSIGNED_INT,
+        count: triangulation.indices.length
+      })
+    });
+  }
+  updateColorTexture() {
+    const {
+      createTexture2D
+    } = this.rendererService;
+    if (this.texture) {
+      this.texture.destroy();
     }
-  }]);
-  return HeatMapModel;
-}(BaseModel);
-export { HeatMapModel as default };
+    const {
+      rampColors
+    } = this.layer.getLayerConfig();
+    const imageData = generateColorRamp(rampColors);
+    this.colorTexture = createTexture2D({
+      data: imageData.data,
+      usage: TextureUsage.SAMPLED,
+      width: imageData.width,
+      height: imageData.height,
+      wrapS: gl.CLAMP_TO_EDGE,
+      wrapT: gl.CLAMP_TO_EDGE,
+      min: gl.NEAREST,
+      mag: gl.NEAREST,
+      flipY: false,
+      unorm: true
+    });
+    this.preRampColors = rampColors;
+  }
+}