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

package/es/earth/shaders/base_vert.glsl

@@ -0,0 +1,52 @@
+// attribute vec4 a_Color;
+attribute vec3 a_Position;
+attribute vec3 a_Normal;
+attribute vec2 a_Uv;
+varying vec2 v_texCoord;
+
+// attribute vec2 a_Extrude;
+// attribute float a_Size;
+// attribute float a_Shape;
+
+uniform vec3 u_CameraPosition;
+uniform mat4 u_ViewProjectionMatrix;
+uniform mat4 u_ModelMatrix;
+uniform float u_ambientRatio : 0.5;
+uniform float u_diffuseRatio : 0.3;
+uniform float u_specularRatio : 0.2;
+uniform vec3 u_sunLight: [1.0, -10.5, 12.0];
+
+
+
+float calc_lighting(vec4 pos) {
+
+    vec3 worldPos = vec3(pos * u_ModelMatrix);
+
+    vec3 worldNormal = a_Normal;
+
+    // cal light weight
+    vec3 viewDir = normalize(u_CameraPosition - worldPos);
+
+    vec3 lightDir = normalize(u_sunLight);
+
+    vec3 halfDir = normalize(viewDir+lightDir);
+    // lambert
+    float lambert = dot(worldNormal, lightDir);
+    // specular
+    float specular = pow(max(0.0, dot(worldNormal, halfDir)), 32.0);
+    //sum to light weight
+    float lightWeight = u_ambientRatio + u_diffuseRatio * lambert + u_specularRatio * specular;
+
+    return lightWeight;
+}
+
+varying float v_lightWeight;
+void main() {
+
+    v_texCoord = a_Uv;
+
+    float lightWeight = calc_lighting(vec4(a_Position, 1.0));
+    v_lightWeight = lightWeight;
+
+    gl_Position = u_ViewProjectionMatrix * u_ModelMatrix * vec4(a_Position, 1.0);
+}

package/es/earth/shaders/bloomsphere_frag.glsl

@@ -0,0 +1,15 @@
+
+uniform float u_opacity;
+uniform vec3 u_CameraPosition;
+varying vec3 vVertexNormal;
+
+varying vec4 v_Color;
+void main() {
+
+
+    float intensity =  - dot(normalize(vVertexNormal), normalize(u_CameraPosition));
+    // TODO: 去除背面
+    if(intensity > 1.0) intensity = 0.0;
+
+    gl_FragColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);
+}

package/es/earth/shaders/bloomsphere_vert.glsl

@@ -0,0 +1,20 @@
+
+attribute vec3 a_Position;
+attribute vec3 a_Normal;
+attribute vec2 a_Uv;
+attribute vec4 a_Color;
+uniform vec3 u_CameraPosition;
+uniform mat4 u_ViewProjectionMatrix;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_ViewMatrix;
+
+varying vec3 vVertexNormal;
+varying vec4 v_Color;
+
+void main() {
+    v_Color = a_Color;
+
+    vVertexNormal = a_Normal;
+
+    gl_Position = u_ViewProjectionMatrix * u_ModelMatrix * vec4(a_Position, 1.0);
+}

package/es/earth/utils.js

@@ -1,22 +1,45 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import { mat4, vec3 } from 'gl-matrix';
+import { mat4, vec3 } from 'gl-matrix'; // 该文件专门记录地球模式的数值
+// 地球网格半径
+
 export var EARTH_RADIUS = 100;
 export var EARTH_SEGMENTS = 36;
 export var EARTH_RADIUS_OUTER = 40;
+/**
+ * 角度转弧度
+ * @param deg
+ * @returns
+ */
 
 function torad(deg) {
   return deg / 180 * Math.acos(-1);
 }
+/**
+ * 经纬度转xyz
+ * @param longitude 经度
+ * @param latitude 纬度
+ * @param radius 半径
+ */
+
 
 export function lglt2xyz(lnglat) {
+  // TODO: + Math.PI/2 是为了对齐坐标
   var lng = torad(lnglat[0]) + Math.PI / 2;
-  var lat = torad(lnglat[1]);
+  var lat = torad(lnglat[1]); // TODO: 手动增加一些偏移，减轻面的冲突
+
   var radius = EARTH_RADIUS + Math.random() * 0.4;
   var z = radius * Math.cos(lat) * Math.cos(lng);
   var x = radius * Math.cos(lat) * Math.sin(lng);
   var y = radius * Math.sin(lat);
   return [x, y, z];
 }
+/**
+ * 构建地球球体网格
+ * @param radius
+ * @param opt
+ * @returns
+ */
+
 export function primitiveSphere(radius, opt) {
   var matRotY = mat4.create();
   var matRotZ = mat4.create();
@@ -52,7 +75,8 @@ export function primitiveSphere(radius, opt) {
       positionsArr.push.apply(positionsArr, _toConsumableArray(tmpVec3.slice()));
       vec3.normalize(tmpVec3, tmpVec3);
       normalArr.push.apply(normalArr, _toConsumableArray(tmpVec3.slice()));
-      uvs.push([normalizedY, 1 - normalizedZ]);
+      uvs.push([normalizedY, 1 - normalizedZ]); // position 和 uv 一起存储
+
       positionsArr.push(normalizedY, 1 - normalizedZ);
     }
 
@@ -77,5 +101,4 @@ export function primitiveSphere(radius, opt) {
     indicesArr: indicesArr,
     normalArr: normalArr
   };
-}
-//# sourceMappingURL=utils.js.map
+}

package/es/heatmap/index.js

@@ -10,10 +10,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 BaseLayer from '../core/BaseLayer';
-import HeatMapModels from './models';
+import BaseLayer from "../core/BaseLayer";
+import HeatMapModels from "./models";
 
-var HeatMapLayer = function (_BaseLayer) {
+var HeatMapLayer = /*#__PURE__*/function (_BaseLayer) {
   _inherits(HeatMapLayer, _BaseLayer);
 
   var _super = _createSuper(HeatMapLayer);
@@ -65,7 +65,7 @@ var HeatMapLayer = function (_BaseLayer) {
 
       if (shape === 'heatmap') {
         if (this.layerModel) {
-          this.layerModel.render();
+          this.layerModel.render(); // 独立的渲染流程
         }
 
         return this;
@@ -74,7 +74,9 @@ var HeatMapLayer = function (_BaseLayer) {
       if (this.layerModelNeedUpdate) {
         this.layerModel.buildModels(function (models) {
           return _this4.models = models;
-        });
+        }); // @ts-ignore
+        // this.models = this.layerModel.buildModels();
+
         this.layerModelNeedUpdate = false;
       }
 
@@ -140,5 +142,4 @@ var HeatMapLayer = function (_BaseLayer) {
   return HeatMapLayer;
 }(BaseLayer);
 
-export { HeatMapLayer as default };
-//# sourceMappingURL=index.js.map
+export { HeatMapLayer as default };

package/es/heatmap/models/grid.js

@@ -10,12 +10,16 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import { AttributeType, gl } from '@antv/l7-core';
 import { getMask } from '@antv/l7-utils';
-import BaseModel from '../../core/BaseModel';
-import { HeatmapGridTriangulation } from '../../core/triangulation';
+import BaseModel from "../../core/BaseModel";
+import { HeatmapGridTriangulation } from "../../core/triangulation";
+
+/* babel-plugin-inline-import '../shaders/grid_vert.glsl' */
 var heatmapGridVert = "precision highp float;\r\n// \u591A\u8FB9\u5F62\u9876\u70B9\u5750\u6807\r\nattribute vec3 a_Position;\r\n// \u591A\u8FB9\u5F62\u7ECF\u7EAC\u5EA6\u5750\u6807\r\nattribute vec3 a_Pos;\r\nattribute float a_Size;\r\nattribute vec4 a_Color;\r\nuniform vec2 u_radius;\r\nuniform float u_coverage: 0.9;\r\nuniform float u_angle: 0;\r\nuniform mat4 u_ModelMatrix;\r\nuniform mat4 u_Mvp;\r\nvarying vec4 v_color;\r\n\r\nuniform vec2 u_SceneCenterMKT;\r\n\r\n#pragma include \"projection\"\r\n#pragma include \"project\"\r\n#pragma include \"picking\"\r\n\r\nvoid main() {\r\n  v_color = a_Color;\r\n\r\n  mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));\r\n  vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;\r\n  // vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n  // vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\r\n  // gl_Position = project_common_position_to_clipspace(project_pos);\r\n\r\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\r\n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n    vec2 customLnglat = customProject(lnglat) - u_SceneCenterMKT; // \u5C06\u7ECF\u7EAC\u5EA6\u8F6C\u6362\u4E3A\u9AD8\u5FB72.0\u9700\u8981\u7684\u5E73\u9762\u5750\u6807\r\n    vec4 project_pos = project_position(vec4(customLnglat, 0, 1.0));\r\n    gl_Position = u_Mvp * (project_pos);\r\n  } else {\r\n     vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n    vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\r\n    gl_Position = project_common_position_to_clipspace(project_pos);\r\n  }\r\n\r\n  setPickingColor(a_PickingColor);\r\n}\r\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";
 
-var GridModel = function (_BaseModel) {
+var GridModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(GridModel, _BaseModel);
 
   var _super = _createSuper(GridModel);
@@ -77,16 +81,19 @@ var GridModel = function (_BaseModel) {
     value: function registerBuiltinAttributes() {
       this.styleAttributeService.registerStyleAttribute({
         name: 'pos',
+        // 顶点经纬度位置
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Pos',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
           },
           size: 3,
           update: function update(feature, featureIdx) {
+            // const coordinates = feature.coordinates as number[];
             var coordinates = feature.version === 'GAODE2.x' ? feature.originCoordinates : feature.coordinates;
             return [coordinates[0], coordinates[1], 0];
           }
@@ -98,5 +105,4 @@ var GridModel = function (_BaseModel) {
   return GridModel;
 }(BaseModel);
 
-export { GridModel as default };
-//# sourceMappingURL=grid.js.map
+export { GridModel as default };

package/es/heatmap/models/grid3d.js

@@ -10,12 +10,16 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import { AttributeType, gl } from '@antv/l7-core';
 import { getMask } from '@antv/l7-utils';
-import BaseModel from '../../core/BaseModel';
-import { PointExtrudeTriangulation } from '../../core/triangulation';
+import BaseModel from "../../core/BaseModel";
+import { PointExtrudeTriangulation } from "../../core/triangulation";
+
+/* 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;\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 \"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  // vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u5B9E\u9645\u7684\u7ECF\u7EAC\u5EA6\n  // vec2 lnglat = (a_Pos.xy + offset); \n  // vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));\n  // gl_Position = project_common_position_to_clipspace(project_pos);\n  // float lightWeight = calc_lighting(project_pos);\n  // v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);\n\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    // vec2 lnglat = (a_Pos.xy + offset); \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 = u_Mvp * vec4(lnglat , a_Position.z * a_Size, 1.0);\n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u7ECF\u7EAC\u5EA6\n    vec2 customLnglat = customProject(lnglat) - u_SceneCenterMKT; // \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";
 
-var Grid3DModel = function (_BaseModel) {
+var Grid3DModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(Grid3DModel, _BaseModel);
 
   var _super = _createSuper(Grid3DModel);
@@ -76,12 +80,14 @@ var Grid3DModel = function (_BaseModel) {
   }, {
     key: "registerBuiltinAttributes",
     value: function registerBuiltinAttributes() {
+      // point layer size;
       this.styleAttributeService.registerStyleAttribute({
         name: 'size',
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
@@ -92,13 +98,15 @@ var Grid3DModel = function (_BaseModel) {
             return Array.isArray(size) ? [size[0]] : [size];
           }
         }
-      });
+      }); // point layer size;
+
       this.styleAttributeService.registerStyleAttribute({
         name: 'normal',
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Normal',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.STATIC_DRAW,
             data: [],
             type: gl.FLOAT
@@ -111,17 +119,21 @@ var Grid3DModel = function (_BaseModel) {
       });
       this.styleAttributeService.registerStyleAttribute({
         name: 'pos',
+        // 顶点经纬度位置
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Pos',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
           },
           size: 3,
           update: function update(feature, featureIdx) {
-            var coordinates = feature.version === 'GAODE2.x' ? feature.originCoordinates : feature.coordinates;
+            var coordinates = feature.version === 'GAODE2.x' ? feature.originCoordinates : feature.coordinates; // const coordinates = feature.coordinates as number[];
+            // const coordinates = feature.originCoordinates as number[];
+
             return [coordinates[0], coordinates[1], 0];
           }
         }
@@ -132,5 +144,4 @@ var Grid3DModel = function (_BaseModel) {
   return Grid3DModel;
 }(BaseModel);
 
-export { Grid3DModel as default };
-//# sourceMappingURL=grid3d.js.map
+export { Grid3DModel as default };

package/es/heatmap/models/heatmap.js

@@ -1,19 +1,14 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _dec, _class;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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); }; }
@@ -25,50 +20,42 @@ import { generateColorRamp, getCullFace, getMask } from '@antv/l7-utils';
 import { mat4 } from 'gl-matrix';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
-import BaseModel from '../../core/BaseModel';
-import { HeatmapTriangulation } from '../../core/triangulation';
+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";
-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";
+
+/* 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 = function (_BaseModel) {
+import { heatMap3DTriangulation } from "../triangulation";
+var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_BaseModel) {
   _inherits(HeatMapModel, _BaseModel);
 
   var _super = _createSuper(HeatMapModel);
 
   function HeatMapModel() {
-    var _this;
-
     _classCallCheck(this, HeatMapModel);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "texture", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "colorTexture", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "heatmapFramerBuffer", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "intensityModel", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "colorModel", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "shapeType", void 0);
-
-    return _this;
+    return _super.apply(this, arguments);
   }
 
   _createClass(HeatMapModel, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this = this;
 
       var _this$rendererService = this.rendererService,
           clear = _this$rendererService.clear,
@@ -78,10 +65,10 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = function (_BaseModel) {
           color: [0, 0, 0, 0],
           depth: 1,
           stencil: 0,
-          framebuffer: _this2.heatmapFramerBuffer
+          framebuffer: _this.heatmapFramerBuffer
         });
 
-        _this2.drawIntensityMode();
+        _this.drawIntensityMode();
       });
 
       if (this.layer.styleNeedUpdate) {
@@ -98,7 +85,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = function (_BaseModel) {
   }, {
     key: "initModels",
     value: function () {
-      var _initModels = _asyncToGenerator(_regeneratorRuntime.mark(function _callee(callbackModel) {
+      var _initModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(callbackModel) {
         var _shapeAttr$scale;
 
         var _this$rendererService2, createFramebuffer, clear, getViewportSize, createTexture2D, useFramebuffer, shapeAttr, shapeType, _getViewportSize, width, height;
@@ -110,14 +97,19 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = function (_BaseModel) {
                 _this$rendererService2 = this.rendererService, createFramebuffer = _this$rendererService2.createFramebuffer, clear = _this$rendererService2.clear, getViewportSize = _this$rendererService2.getViewportSize, createTexture2D = _this$rendererService2.createTexture2D, useFramebuffer = _this$rendererService2.useFramebuffer;
                 shapeAttr = this.styleAttributeService.getLayerStyleAttribute('shape');
                 shapeType = (shapeAttr === null || shapeAttr === void 0 ? void 0 : (_shapeAttr$scale = shapeAttr.scale) === null || _shapeAttr$scale === void 0 ? void 0 : _shapeAttr$scale.field) || 'heatmap';
-                this.shapeType = shapeType;
+                this.shapeType = shapeType; // 生成热力图密度图
+
                 _context.next = 6;
                 return this.buildHeatMapIntensity();
 
               case 6:
                 this.intensityModel = _context.sent;
-                this.colorModel = shapeType === 'heatmap' ? this.buildHeatmapColor() : this.build3dHeatMap();
-                _getViewportSize = getViewportSize(), width = _getViewportSize.width, height = _getViewportSize.height;
+                // 渲染到屏幕
+                this.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),
@@ -160,6 +152,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = function (_BaseModel) {
         descriptor: {
           name: 'a_Dir',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
@@ -169,13 +162,15 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = function (_BaseModel) {
             return [vertex[3], vertex[4]];
           }
         }
-      });
+      }); // point layer size;
+
       this.styleAttributeService.registerStyleAttribute({
         name: 'size',
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
@@ -192,7 +187,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = function (_BaseModel) {
   }, {
     key: "buildHeatMapIntensity",
     value: function () {
-      var _buildHeatMapIntensity = _asyncToGenerator(_regeneratorRuntime.mark(function _callee2() {
+      var _buildHeatMapIntensity = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var model;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
@@ -340,7 +335,14 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = function (_BaseModel) {
       var _this$colorModel2;
 
       var _ref4 = this.layer.getLayerConfig(),
-          opacity = _ref4.opacity;
+          opacity = _ref4.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());
@@ -459,5 +461,4 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = function (_BaseModel) {
 
   return HeatMapModel;
 }(BaseModel)) || _class);
-export { HeatMapModel as default };
-//# sourceMappingURL=heatmap.js.map
+export { HeatMapModel as default };

package/es/heatmap/models/hexagon.js

@@ -10,12 +10,16 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import { AttributeType, gl } from '@antv/l7-core';
 import { getMask } from '@antv/l7-utils';
-import BaseModel from '../../core/BaseModel';
-import { HeatmapGridTriangulation } from '../../core/triangulation';
+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 = function (_BaseModel) {
+var HexagonModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(HexagonModel, _BaseModel);
 
   var _super = _createSuper(HexagonModel);
@@ -78,17 +82,22 @@ var HexagonModel = function (_BaseModel) {
     value: function registerBuiltinAttributes() {
       this.styleAttributeService.registerStyleAttribute({
         name: 'pos',
+        // 顶点经纬度位置
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Pos',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
           },
           size: 3,
           update: function update(feature, featureIdx) {
-            var coordinates = feature.version === 'GAODE2.x' ? feature.originCoordinates : feature.coordinates;
+            // const coordinates = (feature.verison==='GAODE2.x'?feature.originoordinates:feature.coordinates) as number[];
+            var coordinates = feature.version === 'GAODE2.x' ? feature.originCoordinates : feature.coordinates; // const coordinates = feature.coordinates as number[];
+            // const coordinates = feature.originCoordinates as number[];
+
             return [coordinates[0], coordinates[1], 0];
           }
         }
@@ -99,5 +108,4 @@ var HexagonModel = function (_BaseModel) {
   return HexagonModel;
 }(BaseModel);
 
-export { HexagonModel as default };
-//# sourceMappingURL=hexagon.js.map
+export { HexagonModel as default };

package/es/heatmap/models/index.js

@@ -1,7 +1,7 @@
-import GridModel from './grid';
-import Grid3DModel from './grid3d';
-import HeatMapModel from './heatmap';
-import HexagonModel from './hexagon';
+import GridModel from "./grid";
+import Grid3DModel from "./grid3d";
+import HeatMapModel from "./heatmap";
+import HexagonModel from "./hexagon";
 var HeatMapModels = {
   heatmap: HeatMapModel,
   heatmap3d: HeatMapModel,
@@ -9,5 +9,4 @@ var HeatMapModels = {
   grid3d: Grid3DModel,
   hexagon: HexagonModel
 };
-export default HeatMapModels;
-//# sourceMappingURL=index.js.map
+export default HeatMapModels;

package/es/heatmap/shaders/grid_vert.glsl

@@ -0,0 +1,42 @@
+precision highp float;
+// 多边形顶点坐标
+attribute vec3 a_Position;
+// 多边形经纬度坐标
+attribute vec3 a_Pos;
+attribute float a_Size;
+attribute vec4 a_Color;
+uniform vec2 u_radius;
+uniform float u_coverage: 0.9;
+uniform float u_angle: 0;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+varying vec4 v_color;
+
+uniform vec2 u_SceneCenterMKT;
+
+#pragma include "projection"
+#pragma include "project"
+#pragma include "picking"
+
+void main() {
+  v_color = a_Color;
+
+  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);
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
+    vec2 customLnglat = customProject(lnglat) - u_SceneCenterMKT; // 将经纬度转换为高德2.0需要的平面坐标
+    vec4 project_pos = project_position(vec4(customLnglat, 0, 1.0));
+    gl_Position = u_Mvp * (project_pos);
+  } else {
+     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);
+}