@antv/l7-layers 2.25.7 → 2.25.10

package/es/heatmap/models/heatmap.js

@@ -0,0 +1,447 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { AttributeType, TextureUsage, gl } from '@antv/l7-core';
+import { generateColorRamp, 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' */
+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  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, 0.1, intensity) * u_opacity;\n}\n";
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_3d_vert.glsl' */
+const heatmap_3d_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 10) 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 +\n  P1 * 3.0 * t * one_minus_t2 +\n  P2 * 3.0 * t2 * one_minus_t +\n  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  vec4 p2 = vec4(pos, 1.0, 1.0); // \u5E73\u884C\u4E8Ex/y\u5E73\u9762\u3001z==1 \u7684\u5E73\u9762\u4E0A\u7684\u70B9\n\n  vec4 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  vec4 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  inverseP2 = inverseP2 / inverseP2.w;\n\n  float zPos = (0.0 - inverseP1.z) / (inverseP2.z - inverseP1.z); // ??\n  vec4 position = inverseP1 + zPos * (inverseP2 - inverseP1);\n\n  vec4 b = vec4(0.5, 0.0, 1.0, 0.5);\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.0), 1.0);\n\n}\n"; // 绘制平面热力的 shader
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_frag.glsl' */
+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 (i11 + i12 + i13 + i21 + i21 + i22 + i23 + i31 + i32 + i33) / 9.0;\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, 0.1, intensity) * u_opacity;\n}\n";
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_vert.glsl' */
+const heatmap_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 10) 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.0);\n}\n";
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_framebuffer_frag.glsl' */
+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.0, 1.0, 1.0);\n}\n";
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_framebuffer_vert.glsl' */
+const heatmap_framebuffer_vert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_DIR) in vec2 a_Dir;\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}\n";
+import { heatMap3DTriangulation } from "../triangulation";
+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", []);
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      UV: 10,
+      DIR: 11
+    });
+  }
+  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();
+    }
+    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 _this$layer$shapeOpti;
+      const {
+        createFramebuffer,
+        getViewportSize,
+        createTexture2D
+      } = _this.rendererService;
+      const shapeType = ((_this$layer$shapeOpti = _this.layer.shapeOption) === null || _this$layer$shapeOpti === void 0 ? void 0 : _this$layer$shapeOpti.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.heatmapFramerBuffer = createFramebuffer({
+        color: _this.heatmapTexture,
+        depth: true,
+        width: Math.floor(width / 4),
+        height: Math.floor(height / 4)
+      });
+      _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: this.attributeLocation.DIR,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[3], vertex[4]];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 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
+      })];
+      _this3.layer.triangulation = HeatmapTriangulation;
+      const model = yield _this3.layer.buildLayerModel({
+        moduleName: 'heatmapIntensity',
+        vertexShader: heatmap_framebuffer_vert,
+        fragmentShader: heatmap_framebuffer_frag,
+        triangulation: HeatmapTriangulation,
+        defines: _this3.getDefines(),
+        depth: {
+          enable: false
+        },
+        cull: {
+          enable: true,
+          face: gl.FRONT
+        }
+      });
+      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: this.attributeLocation.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: this.attributeLocation.UV,
+          buffer: createBuffer({
+            data: [0, 1, 1, 1, 0, 0, 1, 0],
+            type: gl.FLOAT
+          }),
+          size: 2
+        })
+      },
+      uniforms: _objectSpread({}, uniforms),
+      depth: {
+        enable: false
+      },
+      elements: createElements({
+        data: [0, 2, 1, 2, 3, 1],
+        type: gl.UNSIGNED_INT,
+        count: 6
+      })
+    });
+  }
+  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: this.attributeLocation.POSITION,
+          buffer: createBuffer({
+            data: triangulation.vertices,
+            type: gl.FLOAT
+          }),
+          size: 3
+        }),
+        a_Uv: createAttribute({
+          shaderLocation: this.attributeLocation.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
+      })
+    });
+  }
+
+  // 绘制密度图
+  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
+        }
+      }
+    });
+    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)
+    });
+  }
+  updateColorTexture() {
+    const {
+      createTexture2D
+    } = this.rendererService;
+    if (this.texture) {
+      this.texture.destroy();
+    }
+    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;
+  }
+}

package/es/heatmap/models/hexagon.d.ts

@@ -0,0 +1,29 @@
+import type { IModel, IModelUniform } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class HexagonModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        POS: number;
+    };
+    getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    protected registerBuiltinAttributes(): void;
+}

package/es/heatmap/models/hexagon.js

@@ -0,0 +1,83 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { AttributeType, gl } from '@antv/l7-core';
+import BaseModel from "../../core/BaseModel";
+import { HeatmapGridTriangulation } from "../../core/triangulation";
+/* babel-plugin-inline-import '../shaders/hexagon/hexagon_frag.glsl' */
+const hexagon_frag = "in vec4 v_color;\n\n#pragma include \"picking\"\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_color;\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/hexagon/hexagon_vert.glsl' */
+const hexagon_vert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_POS) in vec3 a_Pos;\n\nlayout(std140) uniform commonUniforms {\n  vec2 u_radius;\n  float u_opacity;\n  float u_coverage;\n  float u_angle;\n};\n\nout vec4 v_color;\n\n#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"picking\"\n\nvoid main() {\n  v_color = a_Color;\n  v_color.a *= u_opacity;\n\n  mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));\n  vec2 offset = vec2(a_Position.xy * u_radius * rotationMatrix * u_coverage);\n  vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\n\n  vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+export default class HexagonModel extends BaseModel {
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      POS: 9
+    });
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return _objectSpread(_objectSpread({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      opacity,
+      coverage,
+      angle
+    } = this.layer.getLayerConfig();
+    const commonOptions = {
+      u_radius: [this.layer.getSource().data.xOffset, this.layer.getSource().data.yOffset],
+      u_opacity: opacity || 1.0,
+      u_coverage: coverage || 0.9,
+      u_angle: angle || 0
+    };
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      _this2.initUniformsBuffer();
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'heatmapHexagon',
+        vertexShader: hexagon_vert,
+        fragmentShader: hexagon_frag,
+        defines: _this2.getDefines(),
+        triangulation: HeatmapGridTriangulation,
+        depth: {
+          enable: false
+        },
+        primitive: gl.TRIANGLES
+      });
+      return [model];
+    })();
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'pos',
+      // 顶点经纬度位置
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Pos',
+        shaderLocation: this.attributeLocation.POS,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: feature => {
+          const coordinates = feature.coordinates;
+          return [coordinates[0], coordinates[1], 0];
+        }
+      }
+    });
+  }
+}

package/es/heatmap/models/index.d.ts

@@ -0,0 +1,5 @@
+export type HeatMapModelType = 'heatmap' | 'heatmap3d' | 'hexagon' | 'grid' | 'grid3d';
+declare const HeatMapModels: {
+    [key in HeatMapModelType]: any;
+};
+export default HeatMapModels;

package/es/heatmap/models/index.js

@@ -0,0 +1,12 @@
+import GridModel from "./grid";
+import Grid3DModel from "./grid3d";
+import HeatMapModel from "./heatmap";
+import HexagonModel from "./hexagon";
+const HeatMapModels = {
+  heatmap: HeatMapModel,
+  heatmap3d: HeatMapModel,
+  grid: GridModel,
+  grid3d: Grid3DModel,
+  hexagon: HexagonModel
+};
+export default HeatMapModels;

package/es/heatmap/shaders/grid/grid_frag.glsl

@@ -0,0 +1,9 @@
+in vec4 v_color;
+
+#pragma include "scene_uniforms"
+#pragma include "picking"
+out vec4 outputColor;
+void main() {
+  outputColor = v_color;
+  outputColor = filterColor(outputColor);
+}

package/es/heatmap/shaders/grid/grid_vert.glsl

@@ -0,0 +1,30 @@
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;
+layout(location =  ATTRIBUTE_LOCATION_POS) in vec3 a_Pos;
+
+layout(std140) uniform commonUniforms {
+    vec2 u_radius;
+    float u_opacity;
+    float u_coverage;
+    float u_angle;
+};
+
+out vec4 v_color;
+
+#pragma include "projection"
+#pragma include "project"
+#pragma include "picking"
+
+void main() {
+  v_color = a_Color;
+  v_color.a *= u_opacity;
+
+  mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
+  vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage;
+
+  vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
+  vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));
+  gl_Position = project_common_position_to_clipspace(project_pos);
+
+  setPickingColor(a_PickingColor);
+}

package/es/heatmap/shaders/grid3d/grid_3d_frag.glsl

@@ -0,0 +1,17 @@
+in vec4 v_color;
+
+layout(std140) uniform commonUniforms {
+  vec2 u_radius;
+  float u_opacity;
+  float u_coverage;
+  float u_angle;
+};
+
+#pragma include "scene_uniforms"
+#pragma include "picking"
+
+out vec4 outputColor;
+void main() {
+  outputColor = v_color;
+  outputColor = filterColor(outputColor);
+}

package/es/heatmap/shaders/grid3d/grid_3d_vert.glsl

@@ -0,0 +1,34 @@
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;
+layout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;
+layout(location = ATTRIBUTE_LOCATION_POS) in vec3 a_Pos;
+layout(location = ATTRIBUTE_LOCATION_NORMAL) in vec3 a_Normal;
+
+layout(std140) uniform commonUniforms {
+  vec2 u_radius;
+  float u_opacity;
+  float u_coverage;
+  float u_angle;
+};
+
+out vec4 v_color;
+
+#pragma include "projection"
+#pragma include "project"
+#pragma include "light"
+#pragma include "picking"
+
+void main() {
+  mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
+  vec2 offset = vec2(a_Position.xy * u_radius * rotationMatrix * u_coverage);
+
+  vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // 实际的经纬度
+  vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));
+
+  float lightWeight = calc_lighting(project_pos);
+  v_color = vec4(a_Color.rgb * lightWeight, a_Color.w);
+
+  gl_Position = project_common_position_to_clipspace(project_pos);
+
+  setPickingColor(a_PickingColor);
+}