@antv/l7-layers 2.25.7 → 2.25.9

package/es/plugins/LayerModelPlugin.js

@@ -0,0 +1,60 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { IDebugLog, ILayerStage } from '@antv/l7-core';
+// import TileLayer from '../tile/core/BaseLayer';
+/**
+ * Layer Model 初始化，更新，销毁
+ */
+export default class LayerModelPlugin {
+  build(layer) {
+    return _asyncToGenerator(function* () {
+      // 更新Model 配置项 style options
+      layer.prepareBuildModel();
+      // 初始化 Model
+      yield layer.buildModels();
+    })();
+  }
+  initLayerModel(layer) {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      yield _this.build(layer);
+      layer.styleNeedUpdate = false;
+    })();
+  }
+  prepareLayerModel(layer) {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      yield _this2.build(layer);
+      layer.styleNeedUpdate = false;
+    })();
+  }
+  apply(layer) {
+    var _this3 = this;
+    layer.hooks.init.tapPromise('LayerModelPlugin', /*#__PURE__*/_asyncToGenerator(function* () {
+      if (layer.getSource().isTile) {
+        layer.prepareBuildModel();
+        return;
+      }
+      layer.log(IDebugLog.BuildModelStart, ILayerStage.INIT);
+      yield _this3.initLayerModel(layer);
+      layer.log(IDebugLog.BuildModelEnd, ILayerStage.INIT);
+    }));
+    layer.hooks.beforeRenderData.tapPromise('LayerModelPlugin', /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(function* (flag) {
+        if (!flag) {
+          // TileLayer  不需要rebuilder
+          return false;
+        }
+        if (layer.getSource().isTile) {
+          return false;
+        }
+        layer.log(IDebugLog.BuildModelStart, ILayerStage.UPDATE);
+        yield _this3.prepareLayerModel(layer);
+        layer.log(IDebugLog.BuildModelEnd, ILayerStage.UPDATE);
+        return true;
+      });
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+  }
+}

package/es/plugins/LayerStylePlugin.d.ts

@@ -0,0 +1,7 @@
+import type { ILayer, ILayerPlugin } from '@antv/l7-core';
+/**
+ * 更新图层样式，初始图层相关配置
+ */
+export default class LayerStylePlugin implements ILayerPlugin {
+    apply(layer: ILayer): void;
+}

package/es/plugins/LayerStylePlugin.js

@@ -0,0 +1,18 @@
+/**
+ * 更新图层样式，初始图层相关配置
+ */
+export default class LayerStylePlugin {
+  apply(layer) {
+    layer.hooks.afterInit.tap('LayerStylePlugin', () => {
+      const {
+        autoFit,
+        fitBoundsOptions
+      } = layer.getLayerConfig();
+      // mask 初始化
+      if (autoFit) {
+        layer.fitBounds(fitBoundsOptions);
+      }
+      layer.styleNeedUpdate = false;
+    });
+  }
+}

package/es/plugins/LightingPlugin.d.ts

@@ -0,0 +1,35 @@
+import type { ILayer, ILayerPlugin } from '@antv/l7-core';
+interface IDirectionalLight {
+    type: 'directional';
+    direction: [number, number, number];
+    ambient: [number, number, number];
+    diffuse: [number, number, number];
+    specular: [number, number, number];
+}
+interface ISpotLight {
+    type: 'spot';
+    position: [number, number, number];
+    direction: [number, number, number];
+    ambient: [number, number, number];
+    diffuse: [number, number, number];
+    specular: [number, number, number];
+    constant: number;
+    linear: number;
+    quadratic: number;
+    angle: number;
+    exponent: number;
+    blur: number;
+}
+export declare function generateLightingUniforms(lights?: Array<Partial<IDirectionalLight | ISpotLight>>): {
+    u_DirectionalLights: Array<Omit<IDirectionalLight, 'type'>>;
+    u_NumOfDirectionalLights: number;
+    u_SpotLights: Array<Omit<ISpotLight, 'type'>>;
+    u_NumOfSpotLights: number;
+};
+/**
+ * 光照 & Shadow
+ */
+export default class LightingPlugin implements ILayerPlugin {
+    apply(layer: ILayer): void;
+}
+export {};

package/es/plugins/LightingPlugin.js

@@ -0,0 +1,84 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+const _excluded = ["type"];
+const lightTypeUniformMap = {
+  directional: {
+    lights: 'u_DirectionalLights',
+    num: 'u_NumOfDirectionalLights'
+  },
+  spot: {
+    lights: 'u_SpotLights',
+    num: 'u_NumOfSpotLights'
+  }
+};
+const DEFAULT_LIGHT = {
+  type: 'directional',
+  direction: [1, 10.5, 12],
+  ambient: [0.2, 0.2, 0.2],
+  diffuse: [0.6, 0.6, 0.6],
+  specular: [0.1, 0.1, 0.1]
+};
+const DEFAULT_DIRECTIONAL_LIGHT = {
+  direction: [0, 0, 0],
+  ambient: [0, 0, 0],
+  diffuse: [0, 0, 0],
+  specular: [0, 0, 0]
+};
+const DEFAULT_SPOT_LIGHT = {
+  position: [0, 0, 0],
+  direction: [0, 0, 0],
+  ambient: [0, 0, 0],
+  diffuse: [0, 0, 0],
+  specular: [0, 0, 0],
+  constant: 1,
+  linear: 0,
+  quadratic: 0,
+  angle: 14,
+  exponent: 40,
+  blur: 5
+};
+export function generateLightingUniforms(lights) {
+  const lightsMap = {
+    u_DirectionalLights: new Array(3).fill(_objectSpread({}, DEFAULT_DIRECTIONAL_LIGHT)),
+    u_NumOfDirectionalLights: 0,
+    u_SpotLights: new Array(3).fill(_objectSpread({}, DEFAULT_SPOT_LIGHT)),
+    u_NumOfSpotLights: 0
+  };
+  if (!lights || !lights.length) {
+    lights = [DEFAULT_LIGHT];
+  }
+  lights.forEach(_ref => {
+    let {
+        type = 'directional'
+      } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    const lightsUniformName = lightTypeUniformMap[type].lights;
+    const lightsNumUniformName = lightTypeUniformMap[type].num;
+
+    // @ts-ignore
+    const num = lightsMap[lightsNumUniformName];
+    // @ts-ignore
+    lightsMap[lightsUniformName][num] = _objectSpread(_objectSpread({}, lightsMap[lightsUniformName][num]), rest);
+    // @ts-ignore
+    lightsMap[lightsNumUniformName]++;
+  });
+  return lightsMap;
+}
+
+/**
+ * 光照 & Shadow
+ */
+export default class LightingPlugin {
+  apply(layer) {
+    layer.hooks.beforeRender.tap('LightingPlugin', () => {
+      const {
+        enableLighting
+      } = layer.getLayerConfig();
+      if (enableLighting) {
+        layer.models.forEach(model =>
+        // @ts-ignore
+        model.addUniforms(_objectSpread({}, generateLightingUniforms())));
+      }
+    });
+  }
+}

package/es/plugins/MultiPassRendererPlugin.d.ts

@@ -0,0 +1,22 @@
+import type { ILayer, ILayerPlugin, IPass, IPostProcessingPass, IRendererService } from '@antv/l7-core';
+/**
+ * 自定义渲染管线：
+ * ClearPass -> PixelPickingPass(可选) -> RenderPass/TAAPass -> PostProcessing -> CopyPass
+ * 根据 Layer 配置的 passes 创建 PostProcessing
+ * @example
+ * new PolygonLayer({
+ *   enableMultiPassRenderer: true,
+ *   passes: [
+ *     'blurH',
+ *     ['blurV', { radius: 10 }],
+ *   ],
+ * })
+ */
+export default class MultiPassRendererPlugin implements ILayerPlugin {
+    private enabled;
+    apply(layer: ILayer, { rendererService, postProcessingPassFactory, normalPassFactory, }: {
+        rendererService: IRendererService;
+        postProcessingPassFactory: (name: string) => IPostProcessingPass<unknown>;
+        normalPassFactory: (name: string) => IPass<unknown>;
+    }): void;
+}

package/es/plugins/MultiPassRendererPlugin.js

@@ -0,0 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createMultiPassRenderer } from "../utils/multiPassRender";
+
+/**
+ * 自定义渲染管线：
+ * ClearPass -> PixelPickingPass(可选) -> RenderPass/TAAPass -> PostProcessing -> CopyPass
+ * 根据 Layer 配置的 passes 创建 PostProcessing
+ * @example
+ * new PolygonLayer({
+ *   enableMultiPassRenderer: true,
+ *   passes: [
+ *     'blurH',
+ *     ['blurV', { radius: 10 }],
+ *   ],
+ * })
+ */
+export default class MultiPassRendererPlugin {
+  constructor() {
+    _defineProperty(this, "enabled", void 0);
+  }
+  apply(layer, {
+    rendererService,
+    postProcessingPassFactory,
+    normalPassFactory
+  }) {
+    layer.hooks.init.tapPromise('MultiPassRendererPlugin', () => {
+      const {
+        enableMultiPassRenderer,
+        passes = []
+      } = layer.getLayerConfig();
+
+      // SceneConfig 的 enableMultiPassRenderer 配置项可以统一关闭
+      this.enabled = !!enableMultiPassRenderer && layer.getLayerConfig().enableMultiPassRenderer !== false;
+
+      // 根据 LayerConfig passes 配置项初始化
+      if (this.enabled) {
+        layer.multiPassRenderer = createMultiPassRenderer(layer, passes, postProcessingPassFactory, normalPassFactory);
+        layer.multiPassRenderer.setRenderFlag(true);
+      }
+    });
+    layer.hooks.beforeRender.tap('MultiPassRendererPlugin', () => {
+      if (this.enabled) {
+        // 渲染前根据 viewport 调整 FBO size
+        const {
+          width,
+          height
+        } = rendererService.getViewportSize();
+        layer.multiPassRenderer.resize(width, height);
+      }
+    });
+  }
+}

package/es/plugins/PixelPickingPlugin.d.ts

@@ -0,0 +1,11 @@
+import type { ILayer, ILayerPlugin, L7Container } from '@antv/l7-core';
+export default class PixelPickingPlugin implements ILayerPlugin {
+    /**
+     * Use map to keep order of insertion.
+     * @see https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order
+     */
+    private pickingUniformMap;
+    private pickOption2Array;
+    private updatePickOption;
+    apply(layer: ILayer, { styleAttributeService }: L7Container): void;
+}

package/es/plugins/PixelPickingPlugin.js

@@ -0,0 +1,146 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { AttributeType, gl } from '@antv/l7-core';
+import { decodePickingColor, encodePickingColor, lodashUtil, rgb2arr } from '@antv/l7-utils';
+import { COMMON_ATTRIBUTE_LOCATION } from "../core/CommonStyleAttribute";
+const {
+  isNumber
+} = lodashUtil;
+const PickingStage = {
+  NONE: 0.0,
+  ENCODE: 1.0,
+  HIGHLIGHT: 2.0
+};
+export default class PixelPickingPlugin {
+  constructor() {
+    /**
+     * Use map to keep order of insertion.
+     * @see https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order
+     */
+    _defineProperty(this, "pickingUniformMap", void 0);
+  }
+  pickOption2Array() {
+    const array = [];
+    this.pickingUniformMap.forEach(value => {
+      if (isNumber(value)) {
+        array.push(value);
+      } else {
+        array.push(...value);
+      }
+    });
+    return array;
+  }
+  updatePickOption(options, layer) {
+    Object.keys(options).forEach(key => {
+      this.pickingUniformMap.set(key, options[key]);
+    });
+    const u_PickingBuffer = layer.getLayerConfig().pickingBuffer || 0;
+    // Tip: 当前地图是否在拖动
+    const u_shaderPick = Number(layer.getShaderPickStat());
+    this.pickingUniformMap.set('u_PickingBuffer', u_PickingBuffer);
+    this.pickingUniformMap.set('u_shaderPick', u_shaderPick);
+    const uniformBuffer = layer.getPickingUniformBuffer();
+    uniformBuffer.subData({
+      offset: 0,
+      data: this.pickOption2Array()
+    });
+  }
+  apply(layer, {
+    styleAttributeService
+  }) {
+    this.pickingUniformMap = new Map([['u_HighlightColor', [1, 0, 0, 1]], ['u_SelectColor', [1, 0, 0, 1]], ['u_PickingColor', [0, 0, 0]], ['u_PickingStage', 0], ['u_CurrentSelectedId', [0, 0, 0]], ['u_PickingThreshold', 10], ['u_PickingBuffer', 0], ['u_shaderPick', 0], ['u_activeMix', 0]]);
+
+    // TODO: 由于 Shader 目前无法根据是否开启拾取进行内容修改，因此即使不开启也需要生成 a_PickingColor
+    layer.hooks.init.tapPromise('PixelPickingPlugin', () => {
+      const {
+        enablePicking
+      } = layer.getLayerConfig();
+      styleAttributeService.registerStyleAttribute({
+        name: 'pickingColor',
+        type: AttributeType.Attribute,
+        descriptor: {
+          name: 'a_PickingColor',
+          shaderLocation: COMMON_ATTRIBUTE_LOCATION.PICKING_COLOR,
+          buffer: {
+            data: [],
+            type: gl.FLOAT
+          },
+          size: 3,
+          // TODO: 固定 feature range 范围内的 pickingColor 都是固定的，可以生成 cache
+          update: feature => {
+            // 只有开启拾取才需要 encode
+            const {
+              id
+            } = feature;
+            return enablePicking ? encodePickingColor(id) : [0, 0, 0];
+          }
+        }
+      });
+    });
+    // 必须要与 PixelPickingPass 结合使用，因此必须开启 multiPassRenderer
+    layer.hooks.beforePickingEncode.tap('PixelPickingPlugin', () => {
+      const {
+        enablePicking
+      } = layer.getLayerConfig();
+      if (enablePicking && layer.isVisible()) {
+        this.updatePickOption({
+          u_PickingStage: PickingStage.ENCODE
+        }, layer);
+        layer.models.forEach(model => model.addUniforms({
+          u_PickingStage: PickingStage.ENCODE
+        }));
+      }
+    });
+    layer.hooks.afterPickingEncode.tap('PixelPickingPlugin', () => {
+      const {
+        enablePicking
+      } = layer.getLayerConfig();
+      // 区分选中高亮 和滑过高亮
+      if (enablePicking && layer.isVisible()) {
+        this.updatePickOption({
+          u_PickingStage: PickingStage.HIGHLIGHT
+        }, layer);
+        layer.models.forEach(model => model.addUniforms({
+          u_PickingStage: PickingStage.HIGHLIGHT
+        }));
+      }
+    });
+    layer.hooks.beforeHighlight.tap('PixelPickingPlugin', pickedColor => {
+      const {
+        highlightColor,
+        activeMix = 0
+      } = layer.getLayerConfig();
+      const highlightColorInArray = typeof highlightColor === 'string' ? rgb2arr(highlightColor) : highlightColor || [1, 0, 0, 1];
+      layer.updateLayerConfig({
+        pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor))
+      });
+      const option = {
+        u_PickingStage: PickingStage.HIGHLIGHT,
+        u_PickingColor: pickedColor,
+        u_HighlightColor: highlightColorInArray.map(c => c * 255),
+        u_activeMix: activeMix
+      };
+      this.updatePickOption(option, layer);
+      layer.models.forEach(model => model.addUniforms(option));
+    });
+    layer.hooks.beforeSelect.tap('PixelPickingPlugin', pickedColor => {
+      const {
+        selectColor,
+        selectMix = 0
+      } = layer.getLayerConfig();
+      const highlightColorInArray = typeof selectColor === 'string' ? rgb2arr(selectColor) : selectColor || [1, 0, 0, 1];
+      layer.updateLayerConfig({
+        pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor))
+      });
+      const option = {
+        u_PickingStage: PickingStage.HIGHLIGHT,
+        u_PickingColor: pickedColor,
+        u_HighlightColor: highlightColorInArray.map(c => c * 255),
+        u_activeMix: selectMix,
+        u_CurrentSelectedId: pickedColor,
+        u_SelectColor: highlightColorInArray.map(c => c * 255)
+      };
+      this.updatePickOption(option, layer);
+      layer.models.forEach(model => model.addUniforms(option));
+    });
+  }
+}

package/es/plugins/RegisterStyleAttributePlugin.d.ts

@@ -0,0 +1,10 @@
+import type { ILayer, ILayerPlugin, L7Container } from '@antv/l7-core';
+/**
+ * 在初始化阶段完成属性的注册，以及首次根据 Layer 指定的三角化方法完成 indices 和 attribute 的创建
+ */
+export default class RegisterStyleAttributePlugin implements ILayerPlugin {
+    apply(layer: ILayer, { styleAttributeService }: L7Container): void;
+    private registerBuiltinAttributes;
+    private registerPositionAttribute;
+    private registerColorAttribute;
+}

package/es/plugins/RegisterStyleAttributePlugin.js

@@ -0,0 +1,72 @@
+import { AttributeType, gl } from '@antv/l7-core';
+import { COMMON_ATTRIBUTE_LOCATION } from "../core/CommonStyleAttribute";
+import { isTileGroup } from "../tile/utils/utils";
+
+/**
+ * 在初始化阶段完成属性的注册，以及首次根据 Layer 指定的三角化方法完成 indices 和 attribute 的创建
+ */
+export default class RegisterStyleAttributePlugin {
+  apply(layer, {
+    styleAttributeService
+  }) {
+    layer.hooks.init.tapPromise('RegisterStyleAttributePlugin', () => {
+      // 过滤 tileGroup layer （瓦片图层不需要注册）
+      if (isTileGroup(layer)) {
+        return;
+      }
+      this.registerBuiltinAttributes(styleAttributeService, layer);
+    });
+  }
+  registerBuiltinAttributes(styleAttributeService, layer) {
+    // MaskLayer 只需要注册 a_Position
+    if (layer.type === 'MaskLayer') {
+      this.registerPositionAttribute(styleAttributeService);
+      return;
+    }
+    // Tip: normal render layer
+    this.registerPositionAttribute(styleAttributeService);
+    // this.registerFilterAttribute(styleAttributeService);//数据层数据过滤
+    this.registerColorAttribute(styleAttributeService);
+  }
+  registerPositionAttribute(styleAttributeService) {
+    styleAttributeService.registerStyleAttribute({
+      name: 'position',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Position',
+        shaderLocation: COMMON_ATTRIBUTE_LOCATION.POSITION,
+        buffer: {
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex) => {
+          return vertex.length === 2 ? [vertex[0], vertex[1], 0] : [vertex[0], vertex[1], vertex[2]];
+        }
+      }
+    });
+  }
+  registerColorAttribute(styleAttributeService) {
+    styleAttributeService.registerStyleAttribute({
+      name: 'color',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Color',
+        shaderLocation: COMMON_ATTRIBUTE_LOCATION.COLOR,
+        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 {
+            color
+          } = feature;
+          return !color || !color.length ? [1, 1, 1, 1] : color;
+        }
+      }
+    });
+  }
+}

package/es/plugins/ShaderUniformPlugin.d.ts

@@ -0,0 +1,17 @@
+import type { ILayer, ILayerPlugin, L7Container } from '@antv/l7-core';
+/**
+ * 在渲染之前需要获取当前 Shader 所需 Uniform，例如：
+ * 1. 从相机服务中获取 View & ProjectionMatrix，当前缩放等级等等
+ * 2. 从坐标系服务中获取当前坐标系，例如是否是偏移坐标系
+ *    @see https://yuque.antfin-inc.com/yuqi.pyq/fgetpa/doml91
+ * 3. 当前 Layer 本身的样式属性
+ */
+export default class ShaderUniformPlugin implements ILayerPlugin {
+    private cameraService;
+    private coordinateSystemService;
+    private rendererService;
+    private mapService;
+    private layerService;
+    apply(layer: ILayer, { rendererService, mapService, layerService, coordinateSystemService, cameraService, }: L7Container): void;
+    private generateUBO;
+}