feat(layer): add imagelayer

packages/core/src/services/layer/ILayerService.ts

@@ -1,4 +1,4 @@
-import { ISourceCFG } from '@l7/source';
+import { ISourceCFG } from '@l7/core';
 import { AsyncParallelHook, SyncHook } from 'tapable';
 import { IModel } from '../renderer/IModel';
 import { IMultiPassRenderer } from '../renderer/IMultiPassRenderer';

packages/core/src/services/renderer/ITexture2D.ts

@@ -33,6 +33,7 @@ export interface ITexture2DInitializationOptions {
    */
   data?:
     | undefined
+    | HTMLImageElement
     | number[]
     | number[][]
     | Uint8Array

packages/core/src/services/source/ISourceService.ts

@@ -12,7 +12,7 @@ type CallBack = (...args: any[]) => any;
 export interface ITransform {
   type: string;
   [key: string]: any;
-  callback: CallBack;
+  callback?: CallBack;
 }
 
 export interface ISourceCFG {

packages/layers/package.json

@@ -29,7 +29,9 @@
     "earcut": "^2.2.1",
     "eventemitter3": "^3.1.0",
     "gl-matrix": "^3.1.0",
+    "gl-vec2": "^1.3.0",
     "lodash": "^4.17.15",
+    "polyline-miter-util": "^1.0.1",
     "tapable": "^2.0.0-beta.8"
   },
   "devDependencies": {

packages/layers/src/core/BaseBuffer.ts

@@ -1,9 +1,10 @@
-import { ILayerStyleOptions } from '@l7/core';
+import { IICONMap, ILayerStyleOptions } from '@l7/core';
 import { lngLatToMeters } from '@l7/utils';
 import { vec3 } from 'gl-matrix';
+import { IExtrudeGeomety } from '../point/shape/extrude';
 interface IBufferCfg {
   data: unknown[];
-  imagePos?: unknown;
+  iconMap?: IICONMap;
   style?: ILayerStyleOptions;
 }
 export type Position = number[];
@@ -26,21 +27,22 @@ export interface IEncodeFeature {
   coordinates: unknown;
   bufferInfo: unknown;
 }
+
 export default class Buffer {
   public attributes: {
     [key: string]: Float32Array;
   } = {};
   public verticesCount: number = 0;
   public indexArray: Uint32Array = new Uint32Array(0);
   public indexCount: number = 0;
-
+  public instanceGeometry: IExtrudeGeomety;
   protected data: unknown[];
-  protected imagePos: unknown;
+  protected iconMap: IICONMap;
   protected style: any;
 
-  constructor({ data, imagePos, style }: IBufferCfg) {
+  constructor({ data, iconMap, style }: IBufferCfg) {
     this.data = data;
-    this.imagePos = imagePos;
+    this.iconMap = iconMap as IICONMap;
     this.style = style;
     this.init();
   }
@@ -126,7 +128,7 @@ export default class Buffer {
     const { color, id, pattern, size } = feature;
     const bufferInfo = feature.bufferInfo as IBufferInfo;
     const { verticesOffset } = bufferInfo;
-    const imagePos = this.imagePos;
+    const imagePos = this.iconMap;
     const start1 = verticesOffset;
     for (let i = 0; i < num; i++) {
       if (color) {

packages/layers/src/core/BaseLayer.ts

@@ -10,12 +10,13 @@ import {
   IMultiPassRenderer,
   IRendererService,
   ISource,
+  ISourceCFG,
   lazyInject,
   StyleAttributeField,
   StyleAttributeOption,
   TYPES,
 } from '@l7/core';
-import Source, { ISourceCFG } from '@l7/source';
+import Source from '@l7/source';
 import { isFunction } from 'lodash';
 import { SyncHook } from 'tapable';
 import DataEncodePlugin from '../plugins/DataEncodePlugin';

packages/layers/src/core/StyleAttribute.ts

@@ -46,7 +46,9 @@ export default class StyleAttribute implements ILayerStyleAttribute {
     if (scales.some((scale) => scale.type === StyleScaleType.VARIABLE)) {
       this.type = StyleScaleType.VARIABLE;
       scales.forEach((scale) => {
-        scale.scale.range(this.values);
+        if (this.values.length > 0) {
+          scale.scale.range(this.values);
+        }
       });
     } else {
       // 设置attribute 常量值

packages/layers/src/heatmap/buffers/GridBuffer.ts

@@ -0,0 +1,46 @@
+import BufferBase, { IEncodeFeature, Position } from '../../core/BaseBuffer';
+import extrudePolygon, {
+  fillPolygon,
+  IExtrudeGeomety,
+} from '../../point/shape/extrude';
+import {
+  geometryShape,
+  ShapeType2D,
+  ShapeType3D,
+} from '../../point/shape/Path';
+export default class GridHeatMapBuffer extends BufferBase {
+  private verticesOffset: number = 0;
+  protected buildFeatures() {
+    this.verticesOffset = 0;
+    const layerData = this.data as IEncodeFeature[];
+    layerData.forEach((feature: IEncodeFeature) => {
+      this.calculateFill(feature);
+    });
+  }
+  protected calculateFeatures() {
+    const layerData = this.data as IEncodeFeature[];
+    const shape = layerData[0].shape as ShapeType3D | ShapeType2D;
+    this.verticesCount = layerData.length;
+    this.indexCount = 0;
+    this.instanceGeometry = this.getGeometry(shape as
+      | ShapeType2D
+      | ShapeType3D);
+  }
+  protected calculateFill(feature: IEncodeFeature) {
+    feature.bufferInfo = { verticesOffset: this.verticesOffset };
+    const coordinates = feature.coordinates as Position;
+    this.encodeArray(feature, 1);
+    this.attributes.positions.set([...coordinates, 1], this.verticesOffset * 3);
+    this.verticesOffset++;
+  }
+  private getGeometry(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/index.ts

@@ -0,0 +1,114 @@
+import {
+  gl,
+  IRendererService,
+  IShaderModuleService,
+  lazyInject,
+  TYPES,
+} from '@l7/core';
+import BaseLayer from '../core/BaseLayer';
+import GridHeatMapBuffer from './buffers/GridBuffer';
+import hexagon_frag from './shaders/hexagon_frag.glsl';
+import hexagon_vert from './shaders/hexagon_vert.glsl';
+
+export default class HeatMapLayer extends BaseLayer {
+  public name: string = 'HeatMapLayer';
+
+  @lazyInject(TYPES.IShaderModuleService)
+  private readonly shaderModule: IShaderModuleService;
+
+  @lazyInject(TYPES.IRendererService)
+  private readonly renderer: IRendererService;
+
+  protected renderModels() {
+    this.models.forEach((model) =>
+      model.draw({
+        uniforms: {
+          u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+        },
+      }),
+    );
+    return this;
+  }
+
+  protected buildModels(): void {
+    this.shaderModule.registerModule('grid', {
+      vs: hexagon_vert,
+      fs: hexagon_frag,
+    });
+    this.models = [];
+    const { vs, fs, uniforms } = this.shaderModule.getModule('grid');
+    const buffer = new GridHeatMapBuffer({
+      data: this.getEncodedData(),
+    });
+    console.log(this.getSource());
+    console.log(buffer);
+    const {
+      createAttribute,
+      createBuffer,
+      createElements,
+      createModel,
+    } = this.renderer;
+
+    this.models.push(
+      createModel({
+        attributes: {
+          a_miter: createAttribute({
+            buffer: createBuffer({
+              data: buffer.instanceGeometry.positions,
+              type: gl.FLOAT,
+            }),
+            size: 3,
+            divisor: 0,
+          }),
+          // a_normal: createAttribute({
+          //   buffer: createBuffer({
+          //     data: buffer.attributes.normals,
+          //     type: gl.FLOAT,
+          //   }),
+          //   size: 3,
+          // }),
+          a_color: createAttribute({
+            buffer: createBuffer({
+              data: buffer.attributes.colors,
+              type: gl.FLOAT,
+            }),
+            size: 4,
+            divisor: 1,
+          }),
+          // a_size: createAttribute({
+          //   buffer: createBuffer({
+          //     data: buffer.attributes.sizes,
+          //     type: gl.FLOAT,
+          //   }),
+          //   size: 1,
+          //   divisor: 1,
+          // }),
+          a_Position: createAttribute({
+            buffer: createBuffer({
+              data: buffer.attributes.positions,
+              type: gl.FLOAT,
+            }),
+            size: 3,
+            divisor: 1,
+          }),
+        },
+        uniforms: {
+          ...uniforms,
+          u_opacity: (this.styleOption.opacity as number) || 1.0,
+          u_radius: [
+            this.getSource().data.xOffset,
+            this.getSource().data.yOffset,
+          ],
+        },
+        fs,
+        vs,
+        count: buffer.instanceGeometry.index.length,
+        instances: buffer.verticesCount,
+        elements: createElements({
+          data: buffer.instanceGeometry.index,
+          type: gl.UNSIGNED_INT,
+        }),
+      }),
+    );
+  }
+}

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

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

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

@@ -0,0 +1,18 @@
+precision highp float;
+attribute vec3 a_Position;
+attribute vec3 a_miter;
+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;
+    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));
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));
+}

packages/layers/src/index.ts

@@ -1,5 +1,16 @@
 import BaseLayer from './core/BaseLayer';
+import HeatMapLayer from './heatmap';
+import Line from './line';
 import PointLayer from './point';
 import Point from './point/point';
 import PolygonLayer from './polygon';
-export { BaseLayer, PointLayer, PolygonLayer, Point };
+import ImageLayer from './raster';
+export {
+  BaseLayer,
+  PointLayer,
+  PolygonLayer,
+  Point,
+  Line,
+  ImageLayer,
+  HeatMapLayer,
+};

packages/layers/src/line/buffers/line.ts

@@ -1,4 +1,6 @@
+import { lngLatToMeters, Point } from '@l7/utils';
 import BufferBase, { IEncodeFeature, Position } from '../../core/BaseBuffer';
+import getNormals from '../../utils/polylineNormal';
 interface IBufferInfo {
   normals: number[];
   arrayIndex: number[];
@@ -8,7 +10,7 @@ interface IBufferInfo {
   verticesOffset: number;
   indexOffset: number;
 }
-export default class FillBuffer extends BufferBase {
+export default class LineBuffer extends BufferBase {
   private hasPattern: boolean;
   protected buildFeatures() {
     const layerData = this.data as IEncodeFeature[];
@@ -32,13 +34,19 @@ export default class FillBuffer extends BufferBase {
   protected calculateFeatures() {
     const layerData = this.data as IEncodeFeature[];
     // 计算长
-    layerData.forEach((feature: IEncodeFeature) => {
-      let { coordinates } = feature;
+    layerData.forEach((feature: IEncodeFeature, index: number) => {
+      let coordinates = feature.coordinates as Position[] | Position[][];
       if (Array.isArray(coordinates[0][0])) {
-        coordinates = coordinates[0];
+        coordinates = coordinates[0] as Position[];
       }
+      // @ts-ignore
+      const projectCoord: number[][] = coordinates.map((item: Position[]) => {
+        // @ts-ignore
+        const p: Point = [...item];
+        return lngLatToMeters(p);
+      });
       const { normals, attrIndex, attrPos, attrDistance, miters } = getNormals(
-        coordinates,
+        coordinates as number[][],
         false,
         this.verticesCount,
       );

packages/layers/src/line/shaders/line_frag.glsl

@@ -1,9 +1,9 @@
-uniform float u_blur : 0.9;
+uniform float u_blur : 0.99;
 varying vec4 v_color;
 varying vec3 v_normal;
 void main() {
    gl_FragColor = v_color;
   // anti-alias
-  // float blur = 1. - smoothstep(u_blur, 1., length(v_normal));
-  // gl_FragColor.a *= blur;
+  float blur = smoothstep(u_blur, 1., length(v_normal.xy));
+  gl_FragColor.a *= blur;
 }

packages/layers/src/plugins/DataEncodePlugin.ts

@@ -60,7 +60,11 @@ export default class DataEncodePlugin implements ILayerPlugin {
     let scale = this.scaleCache[field as string];
     if (!scale) {
       scale = this.scaleController.createScale(field as string, data);
-      if (scale.type === StyleScaleType.VARIABLE) {
+      if (
+        scale.type === StyleScaleType.VARIABLE &&
+        attribute.values &&
+        attribute.values.length > 0
+      ) {
         scale.scale.range(attribute.values);
       }
       this.scaleCache[field as string] = scale;

packages/layers/src/plugins/DataSourcePlugin.ts

@@ -9,7 +9,8 @@ import {
   StyleScaleType,
   TYPES,
 } from '@l7/core';
-import Source, { ISourceCFG } from '@l7/source';
+import { ISourceCFG } from '@l7/core';
+import Source from '@l7/source';
 export default class DataSourcePlugin implements ILayerPlugin {
   public apply(layer: ILayer) {
     layer.hooks.init.tap('DataSourcePlugin', () => {