@antv/l7-layers 2.25.7 → 2.25.10

package/es/core/BaseModel.d.ts

@@ -0,0 +1,95 @@
+import type { IAnimateOption, IAttribute, IBlendOptions, IBuffer, ICameraService, IElements, IFontService, IGlobalConfigService, IIconService, ILayer, ILayerModel, ILayerService, IMapService, IModel, IModelUniform, IPickingService, IRenderOptions, IRendererService, IShaderModuleService, IStencilOptions, IStyleAttributeService, ITexture2D, ITexture2DInitializationOptions, ShaderDefine, ShaderInject, Triangulation } from '@antv/l7-core';
+import { COMMON_ATTRIBUTE_LOCATION } from './CommonStyleAttribute';
+export type styleSingle = number | string | [string, (single: any) => number] | [string, [number, number]];
+export type styleOffset = string | [number, number] | [string, (single: any) => number];
+export type styleColor = string | [string, (single: any) => string] | [string, [string, string]];
+export interface IDataTextureFrame {
+    data: number[];
+    width: number;
+    height: number;
+}
+export interface ICellProperty {
+    attr: string;
+    count: number;
+}
+type AttributeLayoutLocationType = typeof COMMON_ATTRIBUTE_LOCATION & Record<string, number>;
+export default class BaseModel<ChildLayerStyleOptions = {}> implements ILayerModel {
+    triangulation: Triangulation;
+    uniformBuffers: IBuffer[];
+    textures: ITexture2D[];
+    /**
+     * Attribute Layout Location in Shader
+     */
+    protected get attributeLocation(): AttributeLayoutLocationType;
+    createTexture2D: (options: ITexture2DInitializationOptions) => ITexture2D;
+    preStyleAttribute: Record<string, any>;
+    protected encodeStyleAttribute: Record<string, boolean>;
+    protected layer: ILayer;
+    protected dataTexture: ITexture2D;
+    protected DATA_TEXTURE_WIDTH: number;
+    protected dataTextureTest: boolean;
+    protected readonly configService: IGlobalConfigService;
+    protected shaderModuleService: IShaderModuleService;
+    protected rendererService: IRendererService;
+    protected iconService: IIconService;
+    protected fontService: IFontService;
+    protected styleAttributeService: IStyleAttributeService;
+    protected mapService: IMapService;
+    protected cameraService: ICameraService;
+    protected layerService: ILayerService;
+    protected pickingService: IPickingService;
+    protected attributeUnifoms: IBuffer;
+    protected commonUnifoms: IBuffer;
+    constructor(layer: ILayer);
+    getBlend(): IBlendOptions;
+    getStencil(option: Partial<IRenderOptions>): Partial<IStencilOptions>;
+    getDefaultStyle(): unknown;
+    getUninforms(): IModelUniform;
+    getAnimateUniforms(): IModelUniform;
+    needUpdate(): Promise<boolean>;
+    buildModels(): Promise<IModel[]>;
+    initModels(): Promise<IModel[]>;
+    clearModels(refresh?: boolean): void;
+    getAttribute(): {
+        attributes: {
+            [attributeName: string]: IAttribute;
+        };
+        elements: IElements;
+    };
+    prerender(): void;
+    render(renderOptions?: Partial<IRenderOptions>): void;
+    protected registerBuiltinAttributes(): void;
+    protected animateOption2Array(option: IAnimateOption): number[];
+    protected startModelAnimate(): void;
+    protected getInject(): ShaderInject;
+    protected getDefines(): Record<string, ShaderDefine>;
+    protected getStyleAttribute(): {
+        [key: string]: any;
+    };
+    protected registerStyleAttribute(): void;
+    /**
+     * 注册 Position 属性 64 位地位部分，当经纬度数据开启双精度浮点数使用，
+     * 避免大于 20层级以上出现数据偏移
+     */
+    protected registerPosition64LowAttribute(enable64bitPosition?: boolean): void;
+    updateEncodeAttribute(type: string, flag: boolean): void;
+    initUniformsBuffer(): void;
+    protected getUniformsBufferInfo(uniformsOption: {
+        [key: string]: any;
+    }): {
+        uniformsOption: {
+            [key: string]: any;
+        };
+        uniformsLength: number;
+        uniformsArray: number[];
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    updateStyleUnifoms(): void;
+}
+export {};

package/es/core/BaseModel.js

@@ -0,0 +1,367 @@
+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, BlendType, MaskOperation, StencilType, gl } from '@antv/l7-core';
+import { fp64LowPart, rgb2arr } from '@antv/l7-utils';
+import { BlendTypes } from "../utils/blend";
+import { getStencil, getStencilMask } from "../utils/stencil";
+import { COMMON_ATTRIBUTE_LOCATION, getCommonStyleAttributeOptions } from "./CommonStyleAttribute";
+import { DefaultUniformStyleType, DefaultUniformStyleValue } from "./constant";
+import { MultipleOfFourNumber } from "./utils";
+// 属性索引宏定义前缀，使用命名空间避免 define 名称重复情况
+const DEFINE_ATTRIBUTE_LOCATION_PREFIX = 'ATTRIBUTE_LOCATION_';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default class BaseModel {
+  /**
+   * Attribute Layout Location in Shader
+   */
+  get attributeLocation() {
+    return _objectSpread({}, COMMON_ATTRIBUTE_LOCATION);
+  }
+
+  // style texture data mapping
+
+  // 不支持数据映射的buffer
+
+  // style texture data mapping
+
+  constructor(layer) {
+    _defineProperty(this, "triangulation", void 0);
+    _defineProperty(this, "uniformBuffers", []);
+    _defineProperty(this, "textures", []);
+    _defineProperty(this, "createTexture2D", void 0);
+    _defineProperty(this, "preStyleAttribute", {});
+    _defineProperty(this, "encodeStyleAttribute", {});
+    _defineProperty(this, "layer", void 0);
+    _defineProperty(this, "dataTexture", void 0);
+    // 用于数据传递的数据纹理
+    _defineProperty(this, "DATA_TEXTURE_WIDTH", void 0);
+    // 默认有多少列（宽度）
+    _defineProperty(this, "dataTextureTest", void 0);
+    _defineProperty(this, "configService", void 0);
+    _defineProperty(this, "shaderModuleService", void 0);
+    _defineProperty(this, "rendererService", void 0);
+    _defineProperty(this, "iconService", void 0);
+    _defineProperty(this, "fontService", void 0);
+    _defineProperty(this, "styleAttributeService", void 0);
+    _defineProperty(this, "mapService", void 0);
+    _defineProperty(this, "cameraService", void 0);
+    _defineProperty(this, "layerService", void 0);
+    _defineProperty(this, "pickingService", void 0);
+    _defineProperty(this, "attributeUnifoms", void 0);
+    // 支持数据映射的buffer
+    _defineProperty(this, "commonUnifoms", void 0);
+    this.layer = layer;
+    this.configService = layer.getContainer().globalConfigService;
+    this.rendererService = layer.getContainer().rendererService;
+    this.pickingService = layer.getContainer().pickingService;
+    this.shaderModuleService = layer.getContainer().shaderModuleService;
+    this.styleAttributeService = layer.getContainer().styleAttributeService;
+    this.mapService = layer.getContainer().mapService;
+    this.iconService = layer.getContainer().iconService;
+    this.fontService = layer.getContainer().fontService;
+    this.cameraService = layer.getContainer().cameraService;
+    this.layerService = layer.getContainer().layerService;
+    // 初始化支持数据映射的 Style 属性
+
+    this.registerStyleAttribute();
+    // 注册 Attribute
+    this.registerBuiltinAttributes();
+    // 开启动画
+    this.startModelAnimate();
+    const {
+      createTexture2D
+    } = this.rendererService;
+    this.createTexture2D = createTexture2D;
+  }
+
+  // style datatexture mapping
+
+  getBlend() {
+    const {
+      blend = 'normal'
+    } = this.layer.getLayerConfig();
+    return BlendTypes[BlendType[blend]];
+  }
+  getStencil(option) {
+    const {
+      mask = false,
+      maskInside = true,
+      enableMask,
+      maskOperation = MaskOperation.AND
+    } = this.layer.getLayerConfig();
+    // TODO 临时处理，后期移除MaskLayer
+    if (this.layer.type === 'MaskLayer') {
+      return getStencilMask({
+        isStencil: true,
+        stencilType: StencilType.SINGLE
+      }); // 用于遮罩的stencil 参数
+    }
+    if (option.isStencil) {
+      return getStencilMask(_objectSpread(_objectSpread({}, option), {}, {
+        maskOperation
+      })); // 用于遮罩的stencil 参数
+    }
+    const maskflag = mask ||
+    //  mask 兼容历史写法
+    enableMask && this.layer.masks.length !== 0 ||
+    // 外部图层的mask
+    this.layer.tileMask !== undefined; // 瓦片图层
+    // !!(mask || enableMask || this.layer.tileMask);
+    return getStencil(maskflag, maskInside);
+  }
+  getDefaultStyle() {
+    return {};
+  }
+  // public getUninforms(): IModelUniform {
+  //   throw new Error('Method not implemented.');
+  // }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    const result = _objectSpread(_objectSpread({}, attributeInfo.uniformsOption), commoninfo.uniformsOption);
+    // 兼容 Regl Boolean 类型
+    Object.keys(result).forEach(key => {
+      if (typeof result[key] === 'boolean') {
+        result[key] = result[key] ? 1 : 0;
+      }
+    });
+    //如果是regl渲染 需要在uniform中带上u_texture 暂时用this.rendererService.device判断
+    if (!this.rendererService.hasOwnProperty('device') && this.textures && this.textures.length === 1) {
+      result['u_texture'] = this.textures[0];
+    }
+    return result;
+  }
+  getAnimateUniforms() {
+    return {};
+  }
+  needUpdate() {
+    return _asyncToGenerator(function* () {
+      return false;
+    })();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  buildModels() {
+    return _asyncToGenerator(function* () {
+      throw new Error('Method not implemented.');
+    })();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  initModels() {
+    return _asyncToGenerator(function* () {
+      throw new Error('Method not implemented.');
+    })();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  clearModels(refresh = true) {
+    return;
+  }
+  getAttribute() {
+    throw new Error('Method not implemented.');
+  }
+  prerender() {}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render(renderOptions) {
+    throw new Error('Method not implemented.');
+  }
+  registerBuiltinAttributes() {
+    throw new Error('Method not implemented.');
+  }
+  animateOption2Array(option) {
+    return [option.enable ? 0 : 1.0, option.duration || 4.0, option.interval || 0.2, option.trailLength || 0.1];
+  }
+  startModelAnimate() {
+    const {
+      animateOption
+    } = this.layer.getLayerConfig();
+    if (animateOption.enable) {
+      this.layer.setAnimateStartTime();
+    }
+  }
+  getInject() {
+    const shaderInject = getDynamicStyleInject(this.layer.enableShaderEncodeStyles, this.layer.encodeStyleAttribute);
+    return shaderInject;
+  }
+  getDefines() {
+    // define atribute Layout Location
+    const atributeLocationDefines = Object.keys(this.attributeLocation).reduce((result, key) => {
+      const normalizedKey = DEFINE_ATTRIBUTE_LOCATION_PREFIX + key;
+      result[normalizedKey] = this.attributeLocation[key];
+      return result;
+    }, {});
+    return _objectSpread({}, atributeLocationDefines);
+  }
+
+  // 获取数据映射样式
+  getStyleAttribute() {
+    const options = {};
+    // TODO: 优化
+    this.layer.enableShaderEncodeStyles.forEach(key => {
+      if (!this.layer.encodeStyleAttribute[key]) {
+        // 没有设置样式映射
+        // @ts-ignore
+        const keyValue = this.layer.getLayerConfig()[key];
+        let value = typeof keyValue === 'undefined' ? DefaultUniformStyleValue[key] : keyValue;
+        if (key === 'stroke') {
+          value = rgb2arr(value);
+        }
+        options['u_' + key] = value;
+      }
+    });
+    return options;
+  }
+
+  // 注册数据映射样式
+  registerStyleAttribute() {
+    Object.keys(this.layer.encodeStyleAttribute).forEach(key => {
+      const options = getCommonStyleAttributeOptions(key);
+      if (options) {
+        this.styleAttributeService.registerStyleAttribute(options);
+      }
+    });
+  }
+
+  /**
+   * 注册 Position 属性 64 位地位部分，当经纬度数据开启双精度浮点数使用，
+   * 避免大于 20层级以上出现数据偏移
+   */
+  registerPosition64LowAttribute(enable64bitPosition = true) {
+    // save low part for enabled double precision POSITION attribute
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'position64Low',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Position64Low',
+        shaderLocation: this.attributeLocation.POSITION_64LOW,
+        buffer: {
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return enable64bitPosition ? [fp64LowPart(vertex[0]), fp64LowPart(vertex[1])] : [0, 0];
+        }
+      }
+    });
+  }
+  updateEncodeAttribute(type, flag) {
+    this.encodeStyleAttribute[type] = flag;
+  }
+  initUniformsBuffer() {
+    const attrUniforms = this.getUniformsBufferInfo(this.getStyleAttribute());
+    const commonUniforms = this.getCommonUniformsInfo();
+    if (attrUniforms.uniformsLength !== 0) {
+      this.attributeUnifoms = this.rendererService.createBuffer({
+        data: new Float32Array(MultipleOfFourNumber(attrUniforms.uniformsLength)).fill(0),
+        // 长度需要大于等于 4
+        isUBO: true,
+        label: 'layerModelAttributeUnifoms'
+      });
+      this.uniformBuffers.push(this.attributeUnifoms);
+    }
+    if (commonUniforms.uniformsLength !== 0) {
+      this.commonUnifoms = this.rendererService.createBuffer({
+        data: new Float32Array(MultipleOfFourNumber(commonUniforms.uniformsLength)).fill(0),
+        isUBO: true,
+        label: 'layerModelCommonUnifoms'
+      });
+      this.uniformBuffers.push(this.commonUnifoms);
+    }
+  }
+  // 获取数据映射 uniform 信息
+  getUniformsBufferInfo(uniformsOption) {
+    let uniformsLength = 0;
+    const uniformsArray = [];
+    Object.values(uniformsOption).forEach(value => {
+      if (Array.isArray(value)) {
+        uniformsArray.push(...value);
+        uniformsLength += value.length;
+      } else if (typeof value === 'number') {
+        // 排除纹理
+        uniformsArray.push(value);
+        uniformsLength += 1;
+      } else if (typeof value === 'boolean') {
+        uniformsArray.push(Number(value));
+        uniformsLength += 1;
+      }
+    });
+    return {
+      uniformsOption,
+      uniformsLength,
+      uniformsArray
+    };
+  }
+  getCommonUniformsInfo() {
+    return {
+      uniformsLength: 0,
+      uniformsArray: [],
+      uniformsOption: {}
+    };
+  }
+
+  // 更新支持数据映射的uniform
+  updateStyleUnifoms() {
+    var _this$attributeUnifom, _this$commonUnifoms;
+    const {
+      uniformsArray
+    } = this.getUniformsBufferInfo(this.getStyleAttribute());
+    const {
+      uniformsArray: commonUniformsArray
+    } = this.getCommonUniformsInfo();
+    (_this$attributeUnifom = this.attributeUnifoms) === null || _this$attributeUnifom === void 0 || _this$attributeUnifom.subData({
+      offset: 0,
+      data: new Uint8Array(new Float32Array(uniformsArray).buffer)
+    });
+    (_this$commonUnifoms = this.commonUnifoms) === null || _this$commonUnifoms === void 0 || _this$commonUnifoms.subData({
+      offset: 0,
+      data: new Uint8Array(new Float32Array(commonUniformsArray).buffer)
+    });
+  }
+}
+
+/**
+ * 获取动态注入参与数据映射 uniform/attribute
+ */
+function getDynamicStyleInject(shaderEncodeStyles, styleAttribute) {
+  const uniforms = [];
+  let vsDeclInjection = '';
+
+  // 支持数据映射的类型
+  shaderEncodeStyles.forEach(key => {
+    const upperCaseKey = key.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase();
+    const shaderDefineName = DEFINE_ATTRIBUTE_LOCATION_PREFIX + upperCaseKey;
+    if (styleAttribute[key]) {
+      // 配置了数据映射的类型
+      vsDeclInjection += `#define USE_ATTRIBUTE_${upperCaseKey} 0.0 \n`;
+    } else {
+      uniforms.push(`  ${DefaultUniformStyleType[key]} u_${key};`);
+    }
+    vsDeclInjection += `
+#ifdef USE_ATTRIBUTE_${upperCaseKey}
+layout(location = ${shaderDefineName}) in ${DefaultUniformStyleType[key]} a_${key.charAt(0).toUpperCase() + key.slice(1)};
+#endif \n`;
+  });
+  const fsDeclInjection = uniforms.length ? `
+layout(std140) uniform AttributeUniforms {
+  ${uniforms.join('\n')}
+};\n` : '';
+  vsDeclInjection += fsDeclInjection;
+  let vsMainInjection = '';
+  shaderEncodeStyles.forEach(key => {
+    const upperCaseKey = key.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase();
+    vsMainInjection += `
+  #ifdef USE_ATTRIBUTE_${upperCaseKey}
+    ${DefaultUniformStyleType[key]} ${key} = a_${key.charAt(0).toUpperCase() + key.slice(1)};
+  #else
+    ${DefaultUniformStyleType[key]} ${key} = u_${key};
+  #endif
+  `;
+  });
+  return {
+    'vs:#decl': vsDeclInjection,
+    'fs:#decl': fsDeclInjection,
+    'vs:#main-start': vsMainInjection
+  };
+}

package/es/core/CommonStyleAttribute.d.ts

@@ -0,0 +1,16 @@
+import type { IStyleAttribute } from '@antv/l7-core';
+/**
+ * Attribute Layout Location in Shader
+ */
+export declare const COMMON_ATTRIBUTE_LOCATION: {
+    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;
+};
+export declare function getCommonStyleAttributeOptions(name: string): Partial<IStyleAttribute> | undefined;

package/es/core/CommonStyleAttribute.js

@@ -0,0 +1,114 @@
+import { AttributeType, gl } from '@antv/l7-core';
+
+/**
+ * Attribute Layout Location in Shader
+ */
+export const COMMON_ATTRIBUTE_LOCATION = {
+  // common attribute in RegisterStyleAttributePlugin
+  POSITION: 0,
+  // low part for double precision POSITION attribute
+  POSITION_64LOW: 1,
+  COLOR: 2,
+  PICKING_COLOR: 3,
+  // common style attribute
+  STROKE: 4,
+  OPACITY: 5,
+  OFFSETS: 6,
+  ROTATION: 7,
+  // last index
+  MAX: 8
+};
+export function getCommonStyleAttributeOptions(name) {
+  switch (name) {
+    // // roate
+    case 'rotation':
+      return {
+        name: 'Rotation',
+        type: AttributeType.Attribute,
+        descriptor: {
+          name: 'a_Rotation',
+          shaderLocation: COMMON_ATTRIBUTE_LOCATION.ROTATION,
+          buffer: {
+            usage: gl.DYNAMIC_DRAW,
+            data: [],
+            type: gl.FLOAT
+          },
+          size: 1,
+          update: feature => {
+            const {
+              rotation = 0
+            } = feature;
+            return Array.isArray(rotation) ? [rotation[0]] : [rotation];
+          }
+        }
+      };
+    case 'stroke':
+      return {
+        name: 'stroke',
+        type: AttributeType.Attribute,
+        descriptor: {
+          name: 'a_Stroke',
+          shaderLocation: COMMON_ATTRIBUTE_LOCATION.STROKE,
+          buffer: {
+            // give the WebGL driver a hint that this buffer may change
+            usage: gl.DYNAMIC_DRAW,
+            data: [],
+            type: gl.FLOAT
+          },
+          size: 4,
+          update: feature => {
+            const {
+              stroke = [1, 1, 1, 1]
+            } = feature;
+            return stroke;
+          }
+        }
+      };
+    case 'opacity':
+      return {
+        name: 'opacity',
+        type: AttributeType.Attribute,
+        descriptor: {
+          name: 'a_Opacity',
+          shaderLocation: COMMON_ATTRIBUTE_LOCATION.OPACITY,
+          buffer: {
+            // give the WebGL driver a hint that this buffer may change
+            usage: gl.STATIC_DRAW,
+            data: [],
+            type: gl.FLOAT
+          },
+          size: 1,
+          update: feature => {
+            const {
+              opacity: op = 1
+            } = feature;
+            return [op];
+          }
+        }
+      };
+    case 'offsets':
+      return {
+        name: 'offsets',
+        type: AttributeType.Attribute,
+        descriptor: {
+          name: 'a_Offsets',
+          shaderLocation: COMMON_ATTRIBUTE_LOCATION.OFFSETS,
+          buffer: {
+            // give the WebGL driver a hint that this buffer may change
+            usage: gl.STATIC_DRAW,
+            data: [],
+            type: gl.FLOAT
+          },
+          size: 2,
+          update: feature => {
+            const {
+              offsets: epo
+            } = feature;
+            return epo;
+          }
+        }
+      };
+    default:
+      return undefined;
+  }
+}

package/es/core/LayerPickService.d.ts

@@ -0,0 +1,12 @@
+import type { IInteractionTarget, ILayer, ILayerPickService, IMapService } from '@antv/l7-core';
+export default class BaseLayerPickService implements ILayerPickService {
+    private layer;
+    constructor(layer: ILayer);
+    pickRender(target: IInteractionTarget): void;
+    pick(layer: ILayer, target: IInteractionTarget): Promise<boolean>;
+    pickRasterLayer(layer: ILayer, target: IInteractionTarget, parent?: ILayer): boolean;
+    readRasterValue(layer: ILayer, bbox: number[], mapService: IMapService, x: number, y: number): any;
+    selectFeature(pickedColors: Uint8Array | undefined): void;
+    highlightPickedFeature(pickedColors: Uint8Array | undefined): void;
+    getFeatureById(pickedFeatureIdx: number): any;
+}