@antv/l7-layers 2.25.7 → 2.25.10

package/es/geometry/shaders/sprite_frag.glsl

@@ -0,0 +1,23 @@
+layout(std140) uniform commonUniforms {
+  float u_opacity;
+  float u_mapFlag;
+  float u_Scale;
+};
+uniform sampler2D u_texture;
+
+in vec3 v_Color;
+in float v_d;
+out vec4 outputColor;
+
+void main() {
+  if (v_d < 0.0) {
+    discard;
+  }
+
+  if (u_mapFlag > 0.0) {
+    outputColor = texture(SAMPLER_2D(u_texture), gl_PointCoord);
+    outputColor.a *= u_opacity;
+  } else {
+    outputColor = vec4(v_Color, u_opacity);
+  }
+}

package/es/geometry/shaders/sprite_vert.glsl

@@ -0,0 +1,21 @@
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_COLOR) in vec3 a_Color;
+
+layout(std140) uniform commonUniforms {
+  float u_opacity;
+  float u_mapFlag;
+  float u_Scale;
+};
+
+out vec3 v_Color;
+out float v_d;
+
+#pragma include "projection"
+void main() {
+  v_Color = a_Color.xyz;
+  v_d = a_Position.z;
+
+  vec4 project_pos = project_position(vec4(a_Position, 1.0));
+  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, a_Position.z, 1.0));
+  gl_PointSize = pow(u_Zoom - 1.0, 2.0) * u_Scale;
+}

package/es/heatmap/index.d.ts

@@ -0,0 +1,13 @@
+import type { IAttributeAndElements, ILegend, IRenderOptions } from '@antv/l7-core';
+import BaseLayer from '../core/BaseLayer';
+import type { IHeatMapLayerStyleOptions } from '../core/interface';
+import type { HeatMapModelType } from './models';
+export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
+    type: string;
+    buildModels(): Promise<void>;
+    prerender(): void;
+    renderModels(options?: Partial<IRenderOptions>): this;
+    updateModelData(data: IAttributeAndElements): void;
+    getModelType(): HeatMapModelType;
+    getLegend(name: string): ILegend;
+}

package/es/heatmap/index.js

@@ -0,0 +1,87 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import BaseLayer from "../core/BaseLayer";
+import { rampColor2legend } from "../utils/rampcolor_legend";
+import HeatMapModels from "./models";
+export default class HeatMapLayer extends BaseLayer {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "type", 'HeatMapLayer');
+  }
+  buildModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const shape = _this.getModelType();
+      _this.layerModel = new HeatMapModels[shape](_this);
+      yield _this.initLayerModels();
+    })();
+  }
+  prerender() {
+    const shape = this.getModelType();
+    if (shape === 'heatmap') {
+      if (this.layerModel) {
+        this.layerModel.prerender(); // 独立的渲染流程
+      }
+    }
+  }
+  renderModels(options = {}) {
+    const shape = this.getModelType();
+    if (shape === 'heatmap') {
+      if (this.layerModel) {
+        this.layerModel.render(options); // 独立的渲染流程
+      }
+      return this;
+    }
+    if (this.encodeDataLength <= 0 && !this.forceRender) {
+      return this;
+    }
+    this.hooks.beforeRender.call();
+    this.models.forEach(model => model.draw({
+      uniforms: this.layerModel.getUninforms(),
+      blend: this.layerModel.getBlend(),
+      stencil: this.layerModel.getStencil(options)
+    }));
+    this.hooks.afterRender.call();
+    return this;
+  }
+  updateModelData(data) {
+    if (data.attributes && data.elements) {
+      this.models[0].updateAttributesAndElements(data.attributes, data.elements);
+    } else {
+      console.warn('data error');
+    }
+  }
+  getModelType() {
+    var _source$data, _this$shapeOption;
+    const {
+      shape3d
+    } = this.getLayerConfig();
+    const source = this.getSource();
+    const sourceType = source === null || source === void 0 || (_source$data = source.data) === null || _source$data === void 0 ? void 0 : _source$data.type;
+    const shape = ((_this$shapeOption = this.shapeOption) === null || _this$shapeOption === void 0 ? void 0 : _this$shapeOption.field) || 'heatmap';
+    const isShape3D = Array.isArray(shape3d) && shape3d.includes(shape);
+    if (shape === 'heatmap' || shape === 'heatmap3d') {
+      return 'heatmap';
+    }
+    if (sourceType === 'hexagon') {
+      return isShape3D ? 'grid3d' : 'hexagon';
+    }
+    if (sourceType === 'grid') {
+      return isShape3D ? 'grid3d' : 'grid';
+    }
+    return 'heatmap';
+  }
+  getLegend(name) {
+    if (this.getModelType() === 'heatmap') {
+      if (name !== 'color') return {
+        type: undefined,
+        field: undefined,
+        items: []
+      };
+      const rampColors = this.getLayerConfig().rampColors;
+      return rampColor2legend(rampColors, name);
+    } else {
+      return super.getLegend(name);
+    }
+  }
+}

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

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

package/es/heatmap/models/grid.js

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

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

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

package/es/heatmap/models/grid3d.js

@@ -0,0 +1,122 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { AttributeType, gl } from '@antv/l7-core';
+import BaseModel from "../../core/BaseModel";
+import { PointExtrudeTriangulation } from "../../core/triangulation";
+/* babel-plugin-inline-import '../shaders/grid3d/grid_3d_frag.glsl' */
+const grid_3d_frag = "in vec4 v_color;\n\nlayout(std140) uniform commonUniforms {\n  vec2 u_radius;\n  float u_opacity;\n  float u_coverage;\n  float u_angle;\n};\n\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_color;\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/grid3d/grid_3d_vert.glsl' */
+const grid_3d_vert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_POS) in vec3 a_Pos;\nlayout(location = ATTRIBUTE_LOCATION_NORMAL) 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\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  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  setPickingColor(a_PickingColor);\n}\n";
+export default class Grid3DModel extends BaseModel {
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      POS: 10,
+      NORMAL: 11
+    });
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return _objectSpread(_objectSpread({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      opacity,
+      coverage,
+      angle
+    } = this.layer.getLayerConfig();
+    const commonOptions = {
+      u_radius: [this.layer.getSource().data.xOffset, this.layer.getSource().data.yOffset],
+      u_opacity: opacity || 1.0,
+      u_coverage: coverage || 0.9,
+      u_angle: angle || 0
+    };
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      _this2.initUniformsBuffer();
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'heatmapGrid3d',
+        vertexShader: grid_3d_vert,
+        fragmentShader: grid_3d_frag,
+        defines: _this2.getDefines(),
+        triangulation: PointExtrudeTriangulation,
+        primitive: gl.TRIANGLES,
+        depth: {
+          enable: true
+        }
+      });
+      return [model];
+    })();
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        shaderLocation: this.attributeLocation.SIZE,
+        name: 'a_Size',
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size
+          } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'normal',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Normal',
+        shaderLocation: this.attributeLocation.NORMAL,
+        buffer: {
+          usage: gl.STATIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex, attributeIdx, normal) => {
+          return normal;
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'pos',
+      // 顶点经纬度位置
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Pos',
+        shaderLocation: this.attributeLocation.POS,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: feature => {
+          const coordinates = feature.coordinates;
+          return [coordinates[0], coordinates[1], 0];
+        }
+      }
+    });
+  }
+}

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

@@ -0,0 +1,46 @@
+import type { IFramebuffer, IModel, IModelUniform, IRenderOptions, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class HeatMapModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        SIZE: number;
+        UV: number;
+        DIR: number;
+    };
+    protected texture: ITexture2D;
+    protected colorTexture: ITexture2D;
+    protected heatmapFramerBuffer: IFramebuffer;
+    protected heatmapTexture: ITexture2D;
+    private intensityModel;
+    private colorModel;
+    private shapeType;
+    private preRampColors;
+    private colorModelUniformBuffer;
+    private heat3DModelUniformBuffer;
+    prerender(): void;
+    render(options: Partial<IRenderOptions>): void;
+    getUninforms(): IModelUniform;
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    protected registerBuiltinAttributes(): void;
+    /**
+     * 热力图密度图
+     */
+    private buildHeatMapIntensity;
+    private buildHeatmap;
+    private build3dHeatMap;
+    private drawIntensityMode;
+    private drawHeatMap;
+    private draw3DHeatMap;
+    private updateColorTexture;
+}