feat(layers): add girdheatmap add raster imagelayer

packages/layers/src/core/triangulation.ts

@@ -1,7 +1,7 @@
 import { IEncodeFeature } from '@l7/core';
 import { vec3 } from 'gl-matrix';
 import getNormals from '../utils/polylineNormal';
-import extrudePolygon, { IExtrudeGeomety } from './shape/extrude';
+import extrudePolygon, { fillPolygon, IExtrudeGeomety } from './shape/extrude';
 import {
   geometryShape,
   IPosition,
@@ -80,6 +80,67 @@ export function PolygonExtrudeTriangulation(feature: IEncodeFeature) {
   };
 }
 
+export function HeatmapGridTriangulation(feature: IEncodeFeature) {
+  const { shape } = feature;
+
+  const { positions, index } = getHeatmapGeometry(shape as
+    | ShapeType2D
+    | ShapeType3D);
+  return {
+    vertices: positions, // [ x, y, z ]
+    indices: index,
+    normals: Array.from(computeVertexNormals(positions, index)),
+    size: 3,
+  };
+}
+
+/**
+ * 图片图层顶点构造
+ * @param feature 数据
+ */
+export function RasterImageTriangulation(feature: IEncodeFeature) {
+  const coordinates = feature.coordinates as IPosition[];
+  // [ x, y, z. uv.x, uv.y]
+  const positions: number[] = [
+    ...coordinates[0],
+    0,
+    0,
+    1,
+    coordinates[1][0],
+    coordinates[0][1],
+    0,
+    1,
+    1,
+    ...coordinates[1],
+    0,
+    1,
+    0,
+    ...coordinates[0],
+    0,
+    0,
+    1,
+    ...coordinates[1],
+    0,
+    1,
+    0,
+    coordinates[0][0],
+    coordinates[1][1],
+    0,
+    0,
+    0,
+  ];
+  const indexs = [0, 1, 2, 3, 4, 5];
+  return {
+    vertices: positions,
+    indices: indexs,
+    size: 5,
+  };
+}
+
+/**
+ * 点图层3d geomerty
+ * @param shape 3D形状
+ */
 function getGeometry(shape: ShapeType3D): IExtrudeGeomety {
   if (GeometryCache && GeometryCache[shape]) {
     return GeometryCache[shape];
@@ -145,3 +206,14 @@ function checkIsClosed(points: number[][][]) {
   const p2 = points[0][points[0].length - 1];
   return p1[0] === p2[0] && p1[1] === p2[1];
 }
+
+function getHeatmapGeometry(shape: ShapeType2D | ShapeType3D): IExtrudeGeomety {
+  const path = geometryShape[shape]
+    ? geometryShape[shape]()
+    : geometryShape.circle();
+  // const geometry = ShapeType2D[str as ShapeType2D]
+  //   ? fillPolygon([path])
+  //   : extrudePolygon([path]);
+  const geometry = fillPolygon([path]);
+  return geometry;
+}

packages/layers/src/heatmap/grid.ts

@@ -0,0 +1,132 @@
+import { AttributeType, gl, IEncodeFeature, ILayer } from '@l7/core';
+import BaseLayer from '../core/BaseLayer';
+import { HeatmapGridTriangulation } from '../core/triangulation';
+import heatmapGridFrag from './shaders/hexagon_frag.glsl';
+import heatmapGridVert from './shaders/hexagon_vert.glsl';
+interface IHeatMapLayerStyleOptions {
+  opacity: number;
+  coverage: number;
+}
+export default class HeatMapGrid extends BaseLayer<IHeatMapLayerStyleOptions> {
+  public name: string = 'PointLayer';
+
+  protected getConfigSchema() {
+    return {
+      properties: {
+        opacity: {
+          type: 'number',
+          minimum: 0,
+          maximum: 1,
+        },
+      },
+    };
+  }
+
+  protected renderModels() {
+    const { opacity, coverage } = this.getStyleOptions();
+    this.models.forEach((model) =>
+      model.draw({
+        uniforms: {
+          u_Opacity: opacity || 1.0,
+          u_coverage: coverage || 1.0,
+          u_radius: [
+            this.getSource().data.xOffset,
+            this.getSource().data.yOffset,
+          ],
+        },
+      }),
+    );
+    return this;
+  }
+
+  protected buildModels() {
+    this.registerBuiltinAttributes(this);
+    this.models = [
+      this.buildLayerModel({
+        moduleName: 'pointExtrude',
+        vertexShader: heatmapGridVert,
+        fragmentShader: heatmapGridFrag,
+        triangulation: HeatmapGridTriangulation,
+        blend: {
+          enable: true,
+          func: {
+            srcRGB: gl.SRC_ALPHA,
+            srcAlpha: 1,
+            dstRGB: gl.ONE_MINUS_SRC_ALPHA,
+            dstAlpha: 1,
+          },
+        },
+      }),
+    ];
+  }
+
+  private registerBuiltinAttributes(layer: ILayer) {
+    // point layer size;
+    layer.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,
+        },
+        size: 3,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+        ) => {
+          const { size } = feature;
+          return Array.isArray(size) ? [size[0]] : [size as number];
+        },
+      },
+    });
+
+    // point layer size;
+    layer.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,
+        },
+        size: 3,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+          normal: number[],
+        ) => {
+          return normal;
+        },
+      },
+    });
+    layer.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: (feature: IEncodeFeature, featureIdx: number) => {
+          const coordinates = feature.coordinates as number[];
+          return [coordinates[0], coordinates[1], 0];
+        },
+      },
+    });
+  }
+}

packages/layers/src/heatmap/shaders/hexagon_frag.glsl

@@ -1,7 +1,7 @@
 precision highp float;
 varying vec4 v_color;
-uniform float u_opacity: 0.1;
+uniform float u_Opacity: 0.1;
 void main() {
   gl_FragColor = v_color;
-  gl_FragColor.a *= u_opacity;
-}
+  gl_FragColor.a *= u_Opacity;
+}

packages/layers/src/heatmap/shaders/hexagon_vert.glsl

@@ -1,18 +1,18 @@
 precision highp float;
 attribute vec3 a_Position;
-attribute vec3 a_miter;
-attribute float a_size;
-attribute vec4 a_color;
+attribute vec3 a_Pos;
+attribute float a_Size;
+attribute vec4 a_Color;
 uniform vec2 u_radius;
 uniform float u_coverage: 1.;
 uniform float u_angle: 0;
 uniform mat4 u_ModelMatrix;
 varying vec4 v_color;
 #pragma include "projection"
 void main() {
-    v_color = a_color;
+    v_color = a_Color;
     mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
-    vec2 offset =(vec2(a_miter.xy * u_radius * u_coverage * rotationMatrix));
-    vec4 project_pos = project_position(vec4(a_Position.xy + offset, 0, 1.0));
+    vec2 offset =(vec2(a_Position.xy * u_radius * u_coverage * rotationMatrix));
+    vec4 project_pos = project_position(vec4(a_Pos.xy + offset, 0, 1.0));
     gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));
-}
+}

packages/layers/src/index.ts

@@ -1,14 +1,14 @@
 import { container, ILayerPlugin, TYPES } from '@l7/core';
 import BaseLayer from './core/BaseLayer';
-// import HeatMapLayer from './heatmap';
+import HeatMapGridLayer from './heatmap/grid';
 import LineLayer from './line/index';
 import Point3dLayer from './point/extrude';
 import PointImageLayer from './point/image';
 import PointLayer from './point/index';
 // import Point from './point/point';
 import PolygonLayer from './polygon';
 import Polygon3DLayer from './polygon/polygon3D';
-// import ImageLayer from './raster';
+import ImageLayer from './raster/image';
 
 import ConfigSchemaValidationPlugin from './plugins/ConfigSchemaValidationPlugin';
 import DataMappingPlugin from './plugins/DataMappingPlugin';
@@ -70,6 +70,8 @@ export {
   PointImageLayer,
   LineLayer,
   Polygon3DLayer,
+  ImageLayer,
+  HeatMapGridLayer,
   // Line,
   // ImageLayer,
   // HeatMapLayer,