@antv/l7-layers 2.25.7 → 2.25.10

package/es/earth/utils.js

@@ -0,0 +1,99 @@
+import { mat4, vec3 } from 'gl-matrix';
+// 该文件专门记录地球模式的数值
+
+// 地球网格半径
+export const EARTH_RADIUS = 100;
+export const EARTH_SEGMENTS = 36;
+export const 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 是为了对齐坐标
+  const lng = torad(lnglat[0]) + Math.PI / 2;
+  const lat = torad(lnglat[1]);
+
+  // TODO: 手动增加一些偏移，减轻面的冲突
+  const radius = EARTH_RADIUS + Math.random() * 0.4;
+  const z = radius * Math.cos(lat) * Math.cos(lng);
+  const x = radius * Math.cos(lat) * Math.sin(lng);
+  const y = radius * Math.sin(lat);
+  return [x, y, z];
+}
+
+/**
+ * 构建地球球体网格
+ * @param radius
+ * @param opt
+ * @returns
+ */
+export function primitiveSphere(radius, opt) {
+  const matRotY = mat4.create();
+  const matRotZ = mat4.create();
+  const up = vec3.fromValues(0, 1, 0);
+  const tmpVec3 = vec3.fromValues(0, 0, 0);
+  opt = opt || {};
+  radius = typeof radius !== 'undefined' ? radius : 1;
+  const segments = typeof opt.segments !== 'undefined' ? opt.segments : 32;
+  const totalZRotationSteps = 2 + segments;
+  const totalYRotationSteps = 2 * totalZRotationSteps;
+  const indices = [];
+  const indicesArr = [];
+  const positions = [];
+  const positionsArr = [];
+  const normalArr = [];
+  const uvs = [];
+  for (let zRotationStep = 0; zRotationStep <= totalZRotationSteps; zRotationStep++) {
+    const normalizedZ = zRotationStep / totalZRotationSteps;
+    const angleZ = normalizedZ * Math.PI;
+    for (let yRotationStep = 0; yRotationStep <= totalYRotationSteps; yRotationStep++) {
+      const normalizedY = yRotationStep / totalYRotationSteps;
+      const angleY = normalizedY * Math.PI * 2;
+      mat4.identity(matRotZ);
+      mat4.rotateZ(matRotZ, matRotZ, -angleZ);
+      mat4.identity(matRotY);
+      mat4.rotateY(matRotY, matRotY, angleY);
+      vec3.transformMat4(tmpVec3, up, matRotZ);
+      vec3.transformMat4(tmpVec3, tmpVec3, matRotY);
+      vec3.scale(tmpVec3, tmpVec3, -radius);
+      positions.push(tmpVec3.slice());
+      positionsArr.push(...tmpVec3.slice());
+      vec3.normalize(tmpVec3, tmpVec3);
+      normalArr.push(...tmpVec3.slice());
+      uvs.push([normalizedY, 1 - normalizedZ]);
+
+      // position 和 uv 一起存储
+      positionsArr.push(normalizedY, 1 - normalizedZ);
+    }
+    if (zRotationStep > 0) {
+      const verticesCount = positions.length;
+      let firstIndex = verticesCount - 2 * (totalYRotationSteps + 1);
+      for (; firstIndex + totalYRotationSteps + 2 < verticesCount; firstIndex++) {
+        indices.push([firstIndex, firstIndex + 1, firstIndex + totalYRotationSteps + 1]);
+        indicesArr.push(firstIndex, firstIndex + 1, firstIndex + totalYRotationSteps + 1);
+        indices.push([firstIndex + totalYRotationSteps + 1, firstIndex + 1, firstIndex + totalYRotationSteps + 2]);
+        indicesArr.push(firstIndex + totalYRotationSteps + 1, firstIndex + 1, firstIndex + totalYRotationSteps + 2);
+      }
+    }
+  }
+  return {
+    cells: indices,
+    positions,
+    uvs,
+    positionsArr,
+    indicesArr,
+    normalArr
+  };
+}

package/es/geometry/index.d.ts

@@ -0,0 +1,22 @@
+import BaseLayer from '../core/BaseLayer';
+import type { IGeometryLayerStyleOptions } from '../core/interface';
+import type { GeometryModelType } from './models';
+export default class GeometryLayer extends BaseLayer<IGeometryLayerStyleOptions> {
+    type: string;
+    defaultSourceConfig: {
+        data: {
+            x: number;
+            y: number;
+        }[];
+        options: {
+            parser: {
+                type: string;
+                x: string;
+                y: string;
+            };
+        };
+    };
+    buildModels(): Promise<void>;
+    protected getDefaultConfig(): {} | {} | {};
+    getModelType(): GeometryModelType;
+}

package/es/geometry/index.js

@@ -0,0 +1,53 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import BaseLayer from "../core/BaseLayer";
+import GeometryModels from "./models";
+export default class GeometryLayer extends BaseLayer {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "type", 'GeometryLayer');
+    _defineProperty(this, "defaultSourceConfig", {
+      data: [{
+        x: 0,
+        y: 0
+      }],
+      options: {
+        parser: {
+          type: 'json',
+          x: 'x',
+          y: 'y'
+        }
+      }
+    });
+  }
+  buildModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const modelType = _this.getModelType();
+      _this.layerModel = new GeometryModels[modelType](_this);
+      yield _this.initLayerModels();
+    })();
+  }
+  getDefaultConfig() {
+    const type = this.getModelType();
+    const defaultConfig = {
+      plane: {},
+      sprite: {},
+      billboard: {}
+    };
+    return defaultConfig[type];
+  }
+  getModelType() {
+    var _this$shapeOption;
+    const shape = (_this$shapeOption = this.shapeOption) === null || _this$shapeOption === void 0 ? void 0 : _this$shapeOption.field;
+    if (shape === 'plane') {
+      return 'plane';
+    } else if (shape === 'sprite') {
+      return 'sprite';
+    } else if (shape === 'billboard') {
+      return 'billboard';
+    } else {
+      return 'plane';
+    }
+  }
+}

package/es/geometry/models/billboard.d.ts

@@ -0,0 +1,39 @@
+import type { IModel, IModelUniform, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class BillBoardModel 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;
+        EXTRUDE: number;
+        UV: number;
+    };
+    protected texture: ITexture2D;
+    private radian;
+    planeGeometryTriangulation: () => {
+        size: number;
+        indices: number[];
+        vertices: number[];
+    };
+    getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    clearModels(): void;
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    updateTexture(drawCanvas: (canvas: HTMLCanvasElement) => void): void;
+    protected registerBuiltinAttributes(): void;
+}

package/es/geometry/models/billboard.js

@@ -0,0 +1,175 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { AttributeType, gl } from '@antv/l7-core';
+import BaseModel from "../../core/BaseModel";
+/* babel-plugin-inline-import '../shaders/billboard_frag.glsl' */
+const planeFrag = "layout(std140) uniform commonUniforms {\n  vec2 u_size;\n  float u_raisingHeight;\n  float u_rotation;\n  float u_opacity;\n};\n\nuniform sampler2D u_texture;\n\nin vec2 v_uv;\nout vec4 outputColor;\n\n#pragma include \"picking\"\nvoid main() {\n  outputColor = texture(SAMPLER_2D(u_texture), vec2(v_uv.x, 1.0 - v_uv.y));\n  outputColor.a *= u_opacity;\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/billboard_vert.glsl' */
+const planeVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_EXTRUDE) in vec3 a_Extrude;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  vec2 u_size;\n  float u_raisingHeight;\n  float u_rotation;\n  float u_opacity;\n};\n\nout vec2 v_uv;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\nvoid main() {\n  vec3 extrude = a_Extrude;\n  v_uv = a_Uv;\n  float raiseHeight = u_raisingHeight;\n  if (\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n  ) {\n    float mapboxZoomScale = 4.0 / pow(2.0, 21.0 - u_Zoom);\n    raiseHeight = u_raisingHeight * mapboxZoomScale;\n  }\n\n  // \u8BA1\u7B97\u7ECF\u7EAC\u5EA6\u70B9\u4F4D\u5750\u6807\n  vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n\n  // \u8BA1\u7B97\u7ED5 z \u8F74\u65CB\u8F6C\u540E\u7684\u504F\u79FB\n  vec2 offsetXY = project_pixel(rotate_matrix(vec2(extrude.x * u_size.x, 0.0), u_rotation));\n  // \u7ED5 z \u8F74\u65CB\u8F6C\n  float x = project_pos.x + offsetXY.x;\n  float y = project_pos.y + offsetXY.y;\n  // z \u8F74\u4E0D\u53C2\u4E0E\u65CB\u8F6C\n  float z = project_pixel(extrude.y * u_size.y + raiseHeight);\n\n  gl_Position = project_common_position_to_clipspace(vec4(x, y, z, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+export default class BillBoardModel extends BaseModel {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "texture", void 0);
+    _defineProperty(this, "radian", 0);
+    // 旋转的弧度
+    _defineProperty(this, "planeGeometryTriangulation", () => {
+      const {
+        center = [120, 30]
+      } = this.layer.getLayerConfig();
+      return {
+        size: 4,
+        indices: [0, 1, 2, 2, 3, 0],
+        vertices: [...center, ...[1, 1], ...center, ...[0, 1], ...center, ...[0, 0], ...center, ...[1, 0]]
+      };
+    });
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      EXTRUDE: 9,
+      UV: 10
+    });
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return _objectSpread(_objectSpread({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      opacity,
+      width = 1,
+      height = 1,
+      raisingHeight = 0
+    } = this.layer.getLayerConfig();
+
+    /**
+     *               rotateFlag
+     * DEFAULT            1
+     * MAPBOX             1
+     * AMAP              -1
+     */
+    let rotateFlag = 1;
+    if (this.mapService.getType() === 'amap') {
+      rotateFlag = -1;
+    }
+    // 控制图标的旋转角度（绕 Z 轴旋转）
+    this.radian = rotateFlag * Math.PI * (this.mapService.getRotation() % 360) / 180;
+    const commonOptions = {
+      u_size: [width, height],
+      u_raisingHeight: Number(raisingHeight),
+      u_rotation: this.radian,
+      u_opacity: opacity || 1,
+      u_texture: this.texture
+    };
+    this.textures = [this.texture];
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  clearModels() {
+    var _this$texture;
+    (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const {
+        drawCanvas
+      } = _this.layer.getLayerConfig();
+      const {
+        createTexture2D
+      } = _this.rendererService;
+      _this.texture = createTexture2D({
+        height: 0,
+        width: 0
+      });
+      if (drawCanvas) {
+        _this.updateTexture(drawCanvas);
+      }
+      _this.initUniformsBuffer();
+      const model = yield _this.layer.buildLayerModel({
+        moduleName: 'geometryBillboard',
+        vertexShader: planeVert,
+        fragmentShader: planeFrag,
+        triangulation: _this.planeGeometryTriangulation,
+        defines: _this.getDefines(),
+        inject: _this.getInject(),
+        primitive: gl.TRIANGLES,
+        depth: {
+          enable: true
+        }
+      });
+      return [model];
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      return _this2.initModels();
+    })();
+  }
+  updateTexture(drawCanvas) {
+    const {
+      createTexture2D
+    } = this.rendererService;
+    const {
+      canvasWidth = 1,
+      canvasHeight = 1
+    } = this.layer.getLayerConfig();
+    const canvas = document.createElement('canvas');
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      drawCanvas(canvas);
+      this.texture = createTexture2D({
+        data: canvas,
+        width: canvas.width,
+        height: canvas.height,
+        wrapS: gl.CLAMP_TO_EDGE,
+        wrapT: gl.CLAMP_TO_EDGE
+      });
+      this.layerService.reRender();
+    }
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'extrude',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Extrude',
+        shaderLocation: this.attributeLocation.EXTRUDE,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex, attributeIdx) => {
+          const extrude = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0];
+          const extrudeIndex = attributeIdx % 4 * 3;
+          return [extrude[extrudeIndex], extrude[extrudeIndex + 1], extrude[extrudeIndex + 2]];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Uv',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[2], vertex[3]];
+        }
+      }
+    });
+  }
+}

package/es/geometry/models/index.d.ts

@@ -0,0 +1,5 @@
+export type GeometryModelType = 'plane' | 'sprite' | 'billboard';
+declare const GeometryModels: {
+    [key in GeometryModelType]: any;
+};
+export default GeometryModels;

package/es/geometry/models/index.js

@@ -0,0 +1,9 @@
+import BillBoardModel from "./billboard";
+import PlaneModel from "./plane";
+import SpriteModel from "./sprite";
+const GeometryModels = {
+  plane: PlaneModel,
+  sprite: SpriteModel,
+  billboard: BillBoardModel
+};
+export default GeometryModels;

package/es/geometry/models/plane.d.ts

@@ -0,0 +1,58 @@
+import type { IModel, IModelUniform, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class PlaneModel 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;
+        UV: number;
+    };
+    protected texture: ITexture2D;
+    protected terrainImage: HTMLImageElement;
+    protected terrainImageLoaded: boolean;
+    protected mapTexture: string | undefined;
+    initPlane(width?: number, height?: number, widthSegments?: number, heightSegments?: number, lng?: number, lat?: number): {
+        indices: number[];
+        positions: number[];
+    };
+    planeGeometryTriangulation: () => {
+        vertices: number[];
+        indices: number[];
+        size: number;
+    };
+    getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    clearModels(): void;
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    createModelData(options?: any): {
+        attributes: {
+            [attributeName: string]: import("@antv/l7-core").IAttribute;
+        };
+        elements: import("@antv/l7-core").IElements;
+        count: number | null;
+    };
+    updateTexture(mapTexture: string | undefined): void;
+    protected getImageData(img: HTMLImageElement): ImageData;
+    protected translateVertex(positions: number[], indices: number[], image: HTMLImageElement, widthSegments: number, heightSegments: number, rgb2height: (r: number, g: number, b: number) => number): {
+        vertices: number[];
+        indices: number[];
+        size: number;
+    };
+    private loadTerrainImage;
+    protected registerBuiltinAttributes(): void;
+}