@antv/l7-layers 2.20.5 → 2.20.6

package/lib/heatmap/models/grid3d.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -15,12 +16,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _l7Core = require("@antv/l7-core");
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _triangulation = require("../../core/triangulation");
+var _CommonStyleAttribute = require("../../core/CommonStyleAttribute");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/* babel-plugin-inline-import '../shaders/hexagon_3d_vert.glsl' */
-var heatmapGrid3dVert = "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;\n\nattribute vec3 a_Normal;\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;\n\nvarying vec4 v_color;\n\nuniform vec2 u_sceneCenterMercator;\n\n#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\n\nvoid main() {\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\n\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n \n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u7ECF\u7EAC\u5EA6\n    vec2 customLnglat = customProject(lnglat) - u_sceneCenterMercator; // \u5C06\u7ECF\u7EAC\u5EA6\u8F6C\u6362\u4E3A\u9AD8\u5FB72.0\u9700\u8981\u7684\u5E73\u9762\u5750\u6807\n    vec4 project_pos = project_position(vec4(customLnglat, a_Position.z * a_Size, 1.0));\n\n    float lightWeight = calc_lighting(project_pos);\n    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);\n  \n    gl_Position = u_Mvp * vec4(customLnglat , a_Position.z * a_Size, 1.0);\n  } else {\n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u5B9E\u9645\u7684\u7ECF\u7EAC\u5EA6\n    vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));\n    \n    float lightWeight = calc_lighting(project_pos);\n    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);\n    \n    gl_Position = project_common_position_to_clipspace(project_pos);\n  }\n\n\n\n  setPickingColor(a_PickingColor);\n}\n";
-/* 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/grid3d/grid_3d_vert.glsl' */
+var grid_3d_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in float a_Size;\nlayout(location = 10) in vec3 a_Pos;\nlayout(location = 13) in vec3 a_Normal;\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 \"light\"\n#pragma include \"picking\"\n\n\nvoid main() {\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\n\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n \n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u7ECF\u7EAC\u5EA6\n    vec2 customLnglat = customProject(lnglat) - u_sceneCenterMercator; // \u5C06\u7ECF\u7EAC\u5EA6\u8F6C\u6362\u4E3A\u9AD8\u5FB72.0\u9700\u8981\u7684\u5E73\u9762\u5750\u6807\n    vec4 project_pos = project_position(vec4(customLnglat, a_Position.z * a_Size, 1.0));\n\n    float lightWeight = calc_lighting(project_pos);\n    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w * u_opacity);\n  \n    gl_Position = u_Mvp * vec4(customLnglat , a_Position.z * a_Size, 1.0);\n  } else {\n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u5B9E\u9645\u7684\u7ECF\u7EAC\u5EA6\n    vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));\n    \n    float lightWeight = calc_lighting(project_pos);\n    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);\n    \n    gl_Position = project_common_position_to_clipspace(project_pos);\n  }\n\n\n\n  setPickingColor(a_PickingColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/grid3d/grid_3d_frag.glsl' */
+var grid_3d_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";
 var Grid3DModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(Grid3DModel, _BaseModel);
   var _super = _createSuper(Grid3DModel);
@@ -31,16 +33,26 @@ var Grid3DModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _createClass2.default)(Grid3DModel, [{
     key: "getUninforms",
     value: function getUninforms() {
+      var commoninfo = this.getCommonUniformsInfo();
+      var attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+      this.updateStyleUnifoms();
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+    }
+  }, {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref = this.layer.getLayerConfig(),
         opacity = _ref.opacity,
         coverage = _ref.coverage,
         angle = _ref.angle;
-      return {
+      var commonOptions = {
+        u_radius: [this.layer.getSource().data.xOffset, this.layer.getSource().data.yOffset],
         u_opacity: opacity || 1.0,
-        u_coverage: coverage || 1.0,
-        u_angle: angle || 0,
-        u_radius: [this.layer.getSource().data.xOffset, this.layer.getSource().data.yOffset]
+        u_coverage: coverage || 0.9,
+        u_angle: angle || 0
       };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -69,21 +81,22 @@ var Grid3DModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.next = 2;
+              this.initUniformsBuffer();
+              _context2.next = 3;
               return this.layer.buildLayerModel({
                 moduleName: 'heatmapGrid3d',
-                vertexShader: heatmapGrid3dVert,
-                fragmentShader: heatmapGridFrag,
+                vertexShader: grid_3d_vert,
+                fragmentShader: grid_3d_frag,
                 triangulation: _triangulation.PointExtrudeTriangulation,
                 primitive: _l7Core.gl.TRIANGLES,
                 depth: {
                   enable: true
                 }
               });
-            case 2:
+            case 3:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 4:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -101,6 +114,7 @@ var Grid3DModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         name: 'size',
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.SIZE,
           name: 'a_Size',
           buffer: {
             usage: _l7Core.gl.DYNAMIC_DRAW,
@@ -119,6 +133,7 @@ var Grid3DModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Normal',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.NORMAL,
           buffer: {
             usage: _l7Core.gl.STATIC_DRAW,
             data: [],
@@ -136,6 +151,7 @@ var Grid3DModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Pos',
+          shaderLocation: 10,
           buffer: {
             usage: _l7Core.gl.DYNAMIC_DRAW,
             data: [],

package/lib/heatmap/models/heatmap.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _l7Core = require("@antv/l7-core");
 var _l7Utils = require("@antv/l7-utils");
 var _glMatrix = require("gl-matrix");
@@ -21,34 +23,42 @@ var _inversify = require("inversify");
 require("reflect-metadata");
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _triangulation = require("../../core/triangulation");
+var _CommonStyleAttribute = require("../../core/CommonStyleAttribute");
 var _triangulation2 = require("../triangulation");
 var _dec, _class;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/* 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;\n\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";
+/* 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";
+/* 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
+/* 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";
+/* 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\n  gl_Position = vec4(a_Position.xy, 0, 1.);\n}\n";
+/* 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 float v_weight;\nin vec2 v_extrude;\nout vec4 outputColor;\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    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\n#define GAUSS_COEF  0.3989422804014327\n\n#pragma include \"projection\"\n\nvoid main(){\n    v_weight = a_Size;\n    float ZERO = 1.0 / 255.0 / 16.0;\n    float extrude_x = a_Dir.x * 2.0 -1.0;\n    float extrude_y = a_Dir.y * 2.0 -1.0;\n    vec2 extrude_dir = normalize(vec2(extrude_x,extrude_y));\n    float S = sqrt(-2.0 * log(ZERO / a_Size / u_intensity / GAUSS_COEF)) / 2.5;\n    v_extrude = extrude_dir * S;\n\n    vec2 offset = project_pixel(v_extrude * u_radius);\n    vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n\n    // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n\n    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n        gl_Position = u_Mvp * (vec4(project_pos.xy + offset, 0.0, 1.0));\n    } else {\n        gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n    }\n}\n";
 var isEqual = _l7Utils.lodashUtil.isEqual;
 var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(HeatMapModel, _BaseModel);
   var _super = _createSuper(HeatMapModel);
   function HeatMapModel() {
+    var _this;
     (0, _classCallCheck2.default)(this, HeatMapModel);
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "colorModelUniformBuffer", []);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "heat3DModelUniformBuffer", []);
+    return _this;
   }
   (0, _createClass2.default)(HeatMapModel, [{
     key: "render",
     value: function render(options) {
-      var _this = this;
+      var _this2 = this;
       var _this$rendererService = this.rendererService,
         clear = _this$rendererService.clear,
         useFramebuffer = _this$rendererService.useFramebuffer;
@@ -59,14 +69,16 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
           color: [0, 0, 0, 0],
           depth: 1,
           stencil: 0,
-          framebuffer: _this.heatmapFramerBuffer
+          framebuffer: _this2.heatmapFramerBuffer
         });
-        _this.drawIntensityMode();
+        _this2.drawIntensityMode(); // 密度图
       });
+
       if (!isEqual(this.preRampColors, rampColors)) {
         this.updateColorTexture();
       }
-      this.shapeType === 'heatmap' ? this.drawColorMode(options) : this.draw3DHeatMap(options);
+      this.shapeType === 'heatmap' ? this.drawHeatMap(options) // 2D
+      : this.draw3DHeatMap(options); // 3D
     }
   }, {
     key: "getUninforms",
@@ -92,23 +104,25 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
             case 6:
               this.intensityModel = _context.sent;
               // 渲染到屏幕
-              this.colorModel = shapeType === 'heatmap' ? this.buildHeatmapColor() // 2D
+              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: _l7Core.gl.CLAMP_TO_EDGE,
+                wrapT: _l7Core.gl.CLAMP_TO_EDGE,
+                min: _l7Core.gl.LINEAR,
+                mag: _l7Core.gl.LINEAR,
+                usage: _l7Core.TextureUsage.RENDER_TARGET
+              });
               this.heatmapFramerBuffer = createFramebuffer({
-                color: createTexture2D({
-                  width: Math.floor(width / 4),
-                  height: Math.floor(height / 4),
-                  wrapS: _l7Core.gl.CLAMP_TO_EDGE,
-                  wrapT: _l7Core.gl.CLAMP_TO_EDGE,
-                  min: _l7Core.gl.LINEAR,
-                  mag: _l7Core.gl.LINEAR
-                }),
+                color: this.heatmapTexture,
                 depth: false
               });
               this.updateColorTexture();
               return _context.abrupt("return", [this.intensityModel, this.colorModel]);
-            case 12:
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -146,6 +160,7 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Dir',
+          shaderLocation: 10,
           buffer: {
             usage: _l7Core.gl.DYNAMIC_DRAW,
             data: [],
@@ -162,6 +177,7 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.SIZE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,
@@ -185,12 +201,18 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
         return _regenerator.default.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 = _triangulation.HeatmapTriangulation;
-              _context3.next = 3;
+              _context3.next = 4;
               return this.layer.buildLayerModel({
                 moduleName: 'heatmapIntensity',
-                vertexShader: heatmapFramebufferVert,
-                fragmentShader: heatmapFramebufferFrag,
+                vertexShader: heatmap_framebuffer_vert,
+                fragmentShader: heatmap_framebuffer_frag,
                 triangulation: _triangulation.HeatmapTriangulation,
                 depth: {
                   enable: false
@@ -200,10 +222,10 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
                   face: (0, _l7Utils.getCullFace)(this.mapService.version)
                 }
               });
-            case 3:
+            case 4:
               model = _context3.sent;
               return _context3.abrupt("return", model);
-            case 5:
+            case 6:
             case "end":
               return _context3.stop();
           }
@@ -215,12 +237,18 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
       return buildHeatMapIntensity;
     }()
   }, {
-    key: "buildHeatmapColor",
-    value: function buildHeatmapColor() {
+    key: "buildHeatmap",
+    value: function buildHeatmap() {
       this.shaderModuleService.registerModule('heatmapColor', {
-        vs: heatmapColorVert,
-        fs: heatmapColorFrag
+        vs: heatmap_vert,
+        fs: heatmap_frag
       });
+      this.colorModelUniformBuffer = [this.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,
@@ -233,8 +261,10 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
       return createModel({
         vs: vs,
         fs: fs,
+        uniformBuffers: [].concat((0, _toConsumableArray2.default)(this.colorModelUniformBuffer), (0, _toConsumableArray2.default)(this.rendererService.uniformBuffers)),
         attributes: {
           a_Position: createAttribute({
+            shaderLocation: _CommonStyleAttribute.ShaderLocation.POSITION,
             buffer: createBuffer({
               data: [-1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0],
               type: _l7Core.gl.FLOAT
@@ -242,6 +272,7 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
             size: 3
           }),
           a_Uv: createAttribute({
+            shaderLocation: _CommonStyleAttribute.ShaderLocation.UV,
             buffer: createBuffer({
               data: [0, 1, 1, 1, 0, 0, 1, 0],
               type: _l7Core.gl.FLOAT
@@ -260,25 +291,30 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
         })
       });
     }
+    // 绘制密度图
   }, {
     key: "drawIntensityMode",
     value: function drawIntensityMode() {
       var _this$intensityModel;
       var _ref2 = this.layer.getLayerConfig(),
-        opacity = _ref2.opacity,
         _ref2$intensity = _ref2.intensity,
         intensity = _ref2$intensity === void 0 ? 10 : _ref2$intensity,
         _ref2$radius = _ref2.radius,
         radius = _ref2$radius === void 0 ? 5 : _ref2$radius;
+      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: {
-          u_opacity: opacity || 1.0,
-          u_radius: radius,
-          u_intensity: intensity
-        },
+        uniforms: commonOptions,
         blend: {
           enable: true,
           func: {
@@ -302,17 +338,25 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
       this.layer.hooks.afterRender.call();
     }
   }, {
-    key: "drawColorMode",
-    value: function drawColorMode(options) {
+    key: "drawHeatMap",
+    value: function drawHeatMap(options) {
       var _this$colorModel;
       var _ref3 = this.layer.getLayerConfig(),
-        opacity = _ref3.opacity;
+        _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: {
-          u_opacity: opacity || 1.0,
-          u_colorTexture: this.colorTexture,
-          u_texture: this.heatmapFramerBuffer
-        },
+        uniforms: commonOptions,
+        textures: textures,
         blend: this.getBlend(),
         stencil: this.getStencil(options)
       });
@@ -322,25 +366,25 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
     value: function draw3DHeatMap(options) {
       var _this$colorModel2;
       var _ref4 = this.layer.getLayerConfig(),
-        opacity = _ref4.opacity;
-
-      // const invert = mat4.invert(
-      //   mat4.create(),
-      //   mat4.fromValues(
-      //     // @ts-ignore
-      //     ...this.cameraService.getViewProjectionMatrixUncentered(),
-      //   ),
-      // ) as mat4;
+        _ref4$opacity = _ref4.opacity,
+        opacity = _ref4$opacity === void 0 ? 1.0 : _ref4$opacity;
       var invert = _glMatrix.mat4.create();
       _glMatrix.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: (0, _toConsumableArray2.default)(invert)
+      };
+      this.heat3DModelUniformBuffer[0].subData({
+        offset: 0,
+        data: [].concat((0, _toConsumableArray2.default)(commonOptions.u_ViewProjectionMatrixUncentered), (0, _toConsumableArray2.default)(commonOptions.u_InverseViewProjectionMatrix), [opacity])
+      });
+      var textures = [this.heatmapTexture, this.colorTexture];
       (_this$colorModel2 = this.colorModel) === null || _this$colorModel2 === void 0 || _this$colorModel2.draw({
-        uniforms: {
-          u_opacity: opacity || 1.0,
-          u_colorTexture: this.colorTexture,
-          u_texture: this.heatmapFramerBuffer,
-          u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
-          u_InverseViewProjectionMatrix: (0, _toConsumableArray2.default)(invert)
-        },
+        uniforms: commonOptions,
+        textures: textures,
         blend: {
           enable: true,
           func: {
@@ -362,9 +406,15 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
         height = _getViewportSize2.height;
       var triangulation = (0, _triangulation2.heatMap3DTriangulation)(width / 4.0, height / 4.0);
       this.shaderModuleService.registerModule('heatmap3dColor', {
-        vs: heatmap3DVert,
-        fs: heatmap3DFrag
+        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,
@@ -379,6 +429,7 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
         fs: fs,
         attributes: {
           a_Position: createAttribute({
+            shaderLocation: _CommonStyleAttribute.ShaderLocation.POSITION,
             buffer: createBuffer({
               data: triangulation.vertices,
               type: _l7Core.gl.FLOAT
@@ -386,6 +437,7 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
             size: 3
           }),
           a_Uv: createAttribute({
+            shaderLocation: _CommonStyleAttribute.ShaderLocation.UV,
             buffer: createBuffer({
               data: triangulation.uvs,
               type: _l7Core.gl.FLOAT
@@ -394,6 +446,7 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
           })
         },
         primitive: _l7Core.gl.TRIANGLES,
+        uniformBuffers: [].concat((0, _toConsumableArray2.default)(this.heat3DModelUniformBuffer), (0, _toConsumableArray2.default)(this.rendererService.uniformBuffers)),
         uniforms: (0, _objectSpread2.default)({}, uniforms),
         depth: {
           enable: true
@@ -414,11 +467,6 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
         })
       });
     }
-  }, {
-    key: "updateStyle",
-    value: function updateStyle() {
-      this.updateColorTexture();
-    }
   }, {
     key: "updateColorTexture",
     value: function updateColorTexture() {

package/lib/heatmap/models/hexagon.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -17,10 +18,10 @@ var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _triangulation = require("../../core/triangulation");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/* 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;\n\nvarying vec4 v_color;\n\nuniform vec2 u_sceneCenterMercator;\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_sceneCenterMercator;\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";
+/* babel-plugin-inline-import '../shaders/hexagon/hexagon_frag.glsl' */
+var 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' */
+var hexagon_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 10) 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\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., 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_sceneCenterMercator;\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 = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(HexagonModel, _BaseModel);
   var _super = _createSuper(HexagonModel);
@@ -31,16 +32,26 @@ var HexagonModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _createClass2.default)(HexagonModel, [{
     key: "getUninforms",
     value: function getUninforms() {
+      var commoninfo = this.getCommonUniformsInfo();
+      var attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+      this.updateStyleUnifoms();
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+    }
+  }, {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref = this.layer.getLayerConfig(),
         opacity = _ref.opacity,
         coverage = _ref.coverage,
         angle = _ref.angle;
-      return {
+      var 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,
-        u_radius: [this.layer.getSource().data.xOffset, this.layer.getSource().data.yOffset]
+        u_angle: angle || 0
       };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -69,21 +80,22 @@ var HexagonModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.next = 2;
+              this.initUniformsBuffer();
+              _context2.next = 3;
               return this.layer.buildLayerModel({
                 moduleName: 'heatmapHexagon',
-                vertexShader: heatmapGridVert,
-                fragmentShader: heatmapGridFrag,
+                vertexShader: hexagon_vert,
+                fragmentShader: hexagon_frag,
                 triangulation: _triangulation.HeatmapGridTriangulation,
                 depth: {
                   enable: false
                 },
                 primitive: _l7Core.gl.TRIANGLES
               });
-            case 2:
+            case 3:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 4:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -103,6 +115,7 @@ var HexagonModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Pos',
+          shaderLocation: 10,
           buffer: {
             usage: _l7Core.gl.DYNAMIC_DRAW,
             data: [],

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

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