@antv/l7-layers 2.16.0 → 2.16.1

package/es/heatmap/models/heatmap.js

@@ -6,10 +6,15 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+
 var _dec, _class;
+
 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, gl } from '@antv/l7-core';
 import { generateColorRamp, getCullFace } from '@antv/l7-utils';
 import { mat4 } from 'gl-matrix';
@@ -17,33 +22,44 @@ import { injectable } from 'inversify';
 import 'reflect-metadata';
 import BaseModel from "../../core/BaseModel";
 import { HeatmapTriangulation } from "../../core/triangulation";
+
 /* babel-plugin-inline-import '../shaders/heatmap_3d_frag.glsl' */
 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";
+
 /* babel-plugin-inline-import '../shaders/heatmap_3d_vert.glsl' */
 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"; // 绘制平面热力的 shader
+
 /* babel-plugin-inline-import '../shaders/heatmap_frag.glsl' */
 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";
+
 /* babel-plugin-inline-import '../shaders/heatmap_vert.glsl' */
 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";
+
 /* babel-plugin-inline-import '../shaders/heatmap_framebuffer_frag.glsl' */
 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";
+
 /* babel-plugin-inline-import '../shaders/heatmap_framebuffer_vert.glsl' */
 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";
 import { heatMap3DTriangulation } from "../triangulation";
 var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_BaseModel) {
   _inherits(HeatMapModel, _BaseModel);
+
   var _super = _createSuper(HeatMapModel);
+
   function HeatMapModel() {
     _classCallCheck(this, HeatMapModel);
+
     return _super.apply(this, arguments);
   }
+
   _createClass(HeatMapModel, [{
     key: "render",
     value: function render(options) {
       var _this = this;
+
       var _this$rendererService = this.rendererService,
-        clear = _this$rendererService.clear,
-        useFramebuffer = _this$rendererService.useFramebuffer;
+          clear = _this$rendererService.clear,
+          useFramebuffer = _this$rendererService.useFramebuffer;
       useFramebuffer(this.heatmapFramerBuffer, function () {
         clear({
           color: [0, 0, 0, 0],
@@ -51,11 +67,14 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
           stencil: 0,
           framebuffer: _this.heatmapFramerBuffer
         });
+
         _this.drawIntensityMode();
       });
+
       if (this.layer.styleNeedUpdate) {
         this.updateColorTexture();
       }
+
       this.shapeType === 'heatmap' ? this.drawColorMode(options) : this.draw3DHeatMap(options);
     }
   }, {
@@ -68,45 +87,55 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
     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 ? 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() // 2D
-              : this.build3dHeatMap(); // 3D
-              _getViewportSize = getViewportSize(), width = _getViewportSize.width, height = _getViewportSize.height; // 初始化密度图纹理
-              this.heatmapFramerBuffer = createFramebuffer({
-                color: 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
-                }),
-                depth: false
-              });
-              this.updateColorTexture();
-              return _context.abrupt("return", [this.intensityModel, this.colorModel]);
-            case 12:
-            case "end":
-              return _context.stop();
+          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 ? 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() // 2D
+                : this.build3dHeatMap(); // 3D
+
+                _getViewportSize = getViewportSize(), width = _getViewportSize.width, height = _getViewportSize.height; // 初始化密度图纹理
+
+                this.heatmapFramerBuffer = createFramebuffer({
+                  color: 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
+                  }),
+                  depth: false
+                });
+                this.updateColorTexture();
+                return _context.abrupt("return", [this.intensityModel, this.colorModel]);
+
+              case 12:
+              case "end":
+                return _context.stop();
+            }
           }
         }, _callee, this);
       }));
+
       function initModels() {
         return _initModels.apply(this, arguments);
       }
+
       return initModels;
     }()
   }, {
@@ -114,18 +143,23 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
     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();
+          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;
     }()
   }, {
@@ -161,7 +195,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
           size: 1,
           update: function update(feature) {
             var _feature$size = feature.size,
-              size = _feature$size === void 0 ? 1 : _feature$size;
+                size = _feature$size === void 0 ? 1 : _feature$size;
             return [size];
           }
         }
@@ -173,35 +207,41 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
       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.layer.triangulation = HeatmapTriangulation;
-              _context3.next = 3;
-              return this.layer.buildLayerModel({
-                moduleName: 'heatmapIntensity',
-                vertexShader: heatmapFramebufferVert,
-                fragmentShader: heatmapFramebufferFrag,
-                triangulation: HeatmapTriangulation,
-                depth: {
-                  enable: false
-                },
-                cull: {
-                  enable: true,
-                  face: getCullFace(this.mapService.version)
-                }
-              });
-            case 3:
-              model = _context3.sent;
-              return _context3.abrupt("return", model);
-            case 5:
-            case "end":
-              return _context3.stop();
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                this.layer.triangulation = HeatmapTriangulation;
+                _context3.next = 3;
+                return this.layer.buildLayerModel({
+                  moduleName: 'heatmapIntensity',
+                  vertexShader: heatmapFramebufferVert,
+                  fragmentShader: heatmapFramebufferFrag,
+                  triangulation: HeatmapTriangulation,
+                  depth: {
+                    enable: false
+                  },
+                  cull: {
+                    enable: true,
+                    face: getCullFace(this.mapService.version)
+                  }
+                });
+
+              case 3:
+                model = _context3.sent;
+                return _context3.abrupt("return", model);
+
+              case 5:
+              case "end":
+                return _context3.stop();
+            }
           }
         }, _callee3, this);
       }));
+
       function buildHeatMapIntensity() {
         return _buildHeatMapIntensity.apply(this, arguments);
       }
+
       return buildHeatMapIntensity;
     }()
   }, {
@@ -211,15 +251,17 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
         vs: heatmapColorVert,
         fs: heatmapColorFrag
       });
+
       var _this$shaderModuleSer = this.shaderModuleService.getModule('heatmapColor'),
-        vs = _this$shaderModuleSer.vs,
-        fs = _this$shaderModuleSer.fs,
-        uniforms = _this$shaderModuleSer.uniforms;
+          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;
+          createAttribute = _this$rendererService3.createAttribute,
+          createElements = _this$rendererService3.createElements,
+          createBuffer = _this$rendererService3.createBuffer,
+          createModel = _this$rendererService3.createModel;
       return createModel({
         vs: vs,
         fs: fs,
@@ -254,15 +296,17 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
     key: "drawIntensityMode",
     value: function drawIntensityMode() {
       var _this$intensityModel;
+
       var _ref = this.layer.getLayerConfig(),
-        opacity = _ref.opacity,
-        _ref$intensity = _ref.intensity,
-        intensity = _ref$intensity === void 0 ? 10 : _ref$intensity,
-        _ref$radius = _ref.radius,
-        radius = _ref$radius === void 0 ? 5 : _ref$radius;
+          opacity = _ref.opacity,
+          _ref$intensity = _ref.intensity,
+          intensity = _ref$intensity === void 0 ? 10 : _ref$intensity,
+          _ref$radius = _ref.radius,
+          radius = _ref$radius === void 0 ? 5 : _ref$radius;
+
       this.layerService.beforeRenderData(this.layer);
-      this.layer.hooks.beforeRender.call();
-      // 绘制密度图
+      this.layer.hooks.beforeRender.call(); // 绘制密度图
+
       (_this$intensityModel = this.intensityModel) === null || _this$intensityModel === void 0 ? void 0 : _this$intensityModel.draw({
         uniforms: {
           u_opacity: opacity || 1.0,
@@ -295,8 +339,10 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
     key: "drawColorMode",
     value: function drawColorMode(options) {
       var _this$colorModel;
+
       var _ref2 = this.layer.getLayerConfig(),
-        opacity = _ref2.opacity;
+          opacity = _ref2.opacity;
+
       (_this$colorModel = this.colorModel) === null || _this$colorModel === void 0 ? void 0 : _this$colorModel.draw({
         uniforms: {
           u_opacity: opacity || 1.0,
@@ -311,16 +357,17 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
     key: "draw3DHeatMap",
     value: function draw3DHeatMap(options) {
       var _this$colorModel2;
-      var _ref3 = this.layer.getLayerConfig(),
-        opacity = _ref3.opacity;
 
-      // const invert = mat4.invert(
+      var _ref3 = this.layer.getLayerConfig(),
+          opacity = _ref3.opacity; // const invert = mat4.invert(
       //   mat4.create(),
       //   mat4.fromValues(
       //     // @ts-ignore
       //     ...this.cameraService.getViewProjectionMatrixUncentered(),
       //   ),
       // ) as mat4;
+
+
       var invert = mat4.create();
       mat4.invert(invert, this.cameraService.getViewProjectionMatrixUncentered());
       (_this$colorModel2 = this.colorModel) === null || _this$colorModel2 === void 0 ? void 0 : _this$colorModel2.draw({
@@ -347,23 +394,27 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
     key: "build3dHeatMap",
     value: function build3dHeatMap() {
       var getViewportSize = this.rendererService.getViewportSize;
+
       var _getViewportSize2 = getViewportSize(),
-        width = _getViewportSize2.width,
-        height = _getViewportSize2.height;
+          width = _getViewportSize2.width,
+          height = _getViewportSize2.height;
+
       var triangulation = 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;
+          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;
+          createAttribute = _this$rendererService4.createAttribute,
+          createElements = _this$rendererService4.createElements,
+          createBuffer = _this$rendererService4.createBuffer,
+          createModel = _this$rendererService4.createModel;
       return createModel({
         vs: vs,
         fs: fs,
@@ -413,11 +464,14 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
     key: "updateColorTexture",
     value: function updateColorTexture() {
       var createTexture2D = this.rendererService.createTexture2D;
+
       if (this.texture) {
         this.texture.destroy();
       }
+
       var _ref4 = this.layer.getLayerConfig(),
-        rampColors = _ref4.rampColors;
+          rampColors = _ref4.rampColors;
+
       var imageData = generateColorRamp(rampColors);
       this.colorTexture = createTexture2D({
         data: new Uint8Array(imageData.data),
@@ -431,6 +485,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
       });
     }
   }]);
+
   return HeatMapModel;
 }(BaseModel)) || _class);
 export { HeatMapModel as default };

package/es/heatmap/models/hexagon.js

@@ -5,29 +5,40 @@ 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 _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, gl } from '@antv/l7-core';
 import BaseModel from "../../core/BaseModel";
 import { HeatmapGridTriangulation } from "../../core/triangulation";
+
 /* babel-plugin-inline-import '../shaders/hexagon_frag.glsl' */
 var heatmapGridFrag = "precision highp float;\nvarying vec4 v_color;\nuniform float u_opacity: 1;\n\n#pragma include \"picking\"\n\nvoid main() {\n  gl_FragColor = v_color;\n  gl_FragColor.a *= u_opacity;\n\n  gl_FragColor = filterColor(gl_FragColor);\n}\n";
+
 /* babel-plugin-inline-import '../shaders/hexagon_vert.glsl' */
 var heatmapGridVert = "precision highp float;\n// \u591A\u8FB9\u5F62\u9876\u70B9\u5750\u6807\nattribute vec3 a_Position;\n// \u591A\u8FB9\u5F62\u7ECF\u7EAC\u5EA6\u5750\u6807\nattribute vec3 a_Pos;\nattribute float a_Size;\nattribute vec4 a_Color;\nuniform vec2 u_radius;\nuniform float u_coverage: 0.9;\nuniform float u_angle: 0;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nvarying vec4 v_color;\n\nuniform vec2 u_SceneCenterMKT;\n\n#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"picking\"\n\nvoid main() {\n  v_color = a_Color;\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., 1.0));\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    // gl_Position = u_Mvp * (vec4(project_pos.xy, 0., 1.0));\n    // gl_Position = u_Mvp * (vec4(a_Pos.xy + offset, 0., 1.0));\n    vec2 customLnglat = customProject(lnglat) - u_SceneCenterMKT;\n    vec4 project_pos = project_position(vec4(customLnglat, 0, 1.0));\n    gl_Position = u_Mvp * vec4(project_pos.xy, 0.0, 1.0);\n  } else {\n    vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\n    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));\n  }\n  setPickingColor(a_PickingColor);\n}\n";
+
 var HexagonModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(HexagonModel, _BaseModel);
+
   var _super = _createSuper(HexagonModel);
+
   function HexagonModel() {
     _classCallCheck(this, HexagonModel);
+
     return _super.apply(this, arguments);
   }
+
   _createClass(HexagonModel, [{
     key: "getUninforms",
     value: function getUninforms() {
       var _ref = this.layer.getLayerConfig(),
-        opacity = _ref.opacity,
-        coverage = _ref.coverage,
-        angle = _ref.angle;
+          opacity = _ref.opacity,
+          coverage = _ref.coverage,
+          angle = _ref.angle;
+
       return {
         u_opacity: opacity || 1.0,
         u_coverage: coverage || 0.9,
@@ -40,18 +51,23 @@ var HexagonModel = /*#__PURE__*/function (_BaseModel) {
     value: function () {
       var _initModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              return _context.abrupt("return", this.buildModels());
-            case 1:
-            case "end":
-              return _context.stop();
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", this.buildModels());
+
+              case 1:
+              case "end":
+                return _context.stop();
+            }
           }
         }, _callee, this);
       }));
+
       function initModels() {
         return _initModels.apply(this, arguments);
       }
+
       return initModels;
     }()
   }, {
@@ -60,31 +76,37 @@ var HexagonModel = /*#__PURE__*/function (_BaseModel) {
       var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var model;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return this.layer.buildLayerModel({
-                moduleName: 'heatmapHexagon',
-                vertexShader: heatmapGridVert,
-                fragmentShader: heatmapGridFrag,
-                triangulation: HeatmapGridTriangulation,
-                depth: {
-                  enable: false
-                },
-                primitive: gl.TRIANGLES
-              });
-            case 2:
-              model = _context2.sent;
-              return _context2.abrupt("return", [model]);
-            case 4:
-            case "end":
-              return _context2.stop();
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this.layer.buildLayerModel({
+                  moduleName: 'heatmapHexagon',
+                  vertexShader: heatmapGridVert,
+                  fragmentShader: heatmapGridFrag,
+                  triangulation: HeatmapGridTriangulation,
+                  depth: {
+                    enable: false
+                  },
+                  primitive: gl.TRIANGLES
+                });
+
+              case 2:
+                model = _context2.sent;
+                return _context2.abrupt("return", [model]);
+
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
           }
         }, _callee2, this);
       }));
+
       function buildModels() {
         return _buildModels.apply(this, arguments);
       }
+
       return buildModels;
     }()
   }, {
@@ -110,6 +132,8 @@ var HexagonModel = /*#__PURE__*/function (_BaseModel) {
       });
     }
   }]);
+
   return HexagonModel;
 }(BaseModel);
+
 export { HexagonModel as default };

package/es/heatmap/triangulation.js

@@ -6,8 +6,10 @@ export function heatMap3DTriangulation(width, height) {
   var gridY1 = height + 1;
   var widthHalf = width / 2;
   var heightHalf = height / 2;
+
   for (var iy = 0; iy < gridY1; iy++) {
     var y = iy - heightHalf;
+
     for (var ix = 0; ix < gridX1; ix++) {
       var x = ix - widthHalf;
       vertices.push(x / widthHalf, -y / heightHalf, 0);
@@ -15,6 +17,7 @@ export function heatMap3DTriangulation(width, height) {
       uvs.push(1 - iy / height);
     }
   }
+
   for (var _iy = 0; _iy < height; _iy++) {
     for (var _ix = 0; _ix < width; _ix++) {
       var a = _ix + gridX1 * _iy;
@@ -25,6 +28,7 @@ export function heatMap3DTriangulation(width, height) {
       indices.push(b, c, d);
     }
   }
+
   return {
     vertices: vertices,
     indices: indices,