@antv/l7-layers 2.21.1 → 2.21.2

package/lib/plugins/PixelPickingPlugin.js

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

package/lib/plugins/RegisterStyleAttributePlugin.d.ts

@@ -0,0 +1,11 @@
+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;
+    private registerVertexIdAttribute;
+}

package/lib/plugins/RegisterStyleAttributePlugin.js

@@ -1,115 +1,100 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _l7Core = require("@antv/l7-core");
 var _CommonStyleAttribute = require("../core/CommonStyleAttribute");
 var _utils = require("../tile/utils/utils");
 /**
  * 在初始化阶段完成属性的注册，以及首次根据 Layer 指定的三角化方法完成 indices 和 attribute 的创建
  */
-var RegisterStyleAttributePlugin = exports.default = /*#__PURE__*/function () {
-  function RegisterStyleAttributePlugin() {
-    (0, _classCallCheck2.default)(this, RegisterStyleAttributePlugin);
-  }
-  (0, _createClass2.default)(RegisterStyleAttributePlugin, [{
-    key: "apply",
-    value: function apply(layer, _ref) {
-      var _this = this;
-      var styleAttributeService = _ref.styleAttributeService;
-      layer.hooks.init.tapPromise('RegisterStyleAttributePlugin', function () {
-        // 过滤 tileGroup layer （瓦片图层不需要注册）
-        if ((0, _utils.isTileGroup)(layer)) {
-          return;
-        }
-        _this.registerBuiltinAttributes(styleAttributeService, layer);
-      });
-    }
-  }, {
-    key: "registerBuiltinAttributes",
-    value: function registerBuiltinAttributes(styleAttributeService, layer) {
-      // MaskLayer 只需要注册 a_Position
-      if (layer.type === 'MaskLayer') {
-        this.registerPositionAttribute(styleAttributeService);
+class RegisterStyleAttributePlugin {
+  apply(layer, {
+    styleAttributeService
+  }) {
+    layer.hooks.init.tapPromise('RegisterStyleAttributePlugin', () => {
+      // 过滤 tileGroup layer （瓦片图层不需要注册）
+      if ((0, _utils.isTileGroup)(layer)) {
         return;
       }
-      // Tip: normal render layer
+      this.registerBuiltinAttributes(styleAttributeService, layer);
+    });
+  }
+  registerBuiltinAttributes(styleAttributeService, layer) {
+    // MaskLayer 只需要注册 a_Position
+    if (layer.type === 'MaskLayer') {
       this.registerPositionAttribute(styleAttributeService);
-      // this.registerFilterAttribute(styleAttributeService);//数据层数据过滤
-      this.registerColorAttribute(styleAttributeService);
-      this.registerVertexIdAttribute(styleAttributeService);
+      return;
     }
-  }, {
-    key: "registerPositionAttribute",
-    value: function registerPositionAttribute(styleAttributeService) {
-      styleAttributeService.registerStyleAttribute({
-        name: 'position',
-        type: _l7Core.AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Position',
-          shaderLocation: _CommonStyleAttribute.ShaderLocation.POSITION,
-          buffer: {
-            data: [],
-            type: _l7Core.gl.FLOAT
-          },
-          size: 3,
-          update: function update(feature, featureIdx, vertex) {
-            return vertex.length === 2 ? [vertex[0], vertex[1], 0] : [vertex[0], vertex[1], vertex[2]];
-          }
+    // Tip: normal render layer
+    this.registerPositionAttribute(styleAttributeService);
+    // this.registerFilterAttribute(styleAttributeService);//数据层数据过滤
+    this.registerColorAttribute(styleAttributeService);
+    this.registerVertexIdAttribute(styleAttributeService);
+  }
+  registerPositionAttribute(styleAttributeService) {
+    styleAttributeService.registerStyleAttribute({
+      name: 'position',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Position',
+        shaderLocation: _CommonStyleAttribute.ShaderLocation.POSITION,
+        buffer: {
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex) => {
+          return vertex.length === 2 ? [vertex[0], vertex[1], 0] : [vertex[0], vertex[1], vertex[2]];
         }
-      });
-    }
-  }, {
-    key: "registerColorAttribute",
-    value: function registerColorAttribute(styleAttributeService) {
-      styleAttributeService.registerStyleAttribute({
-        name: 'color',
-        type: _l7Core.AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Color',
-          shaderLocation: _CommonStyleAttribute.ShaderLocation.COLOR,
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: _l7Core.gl.DYNAMIC_DRAW,
-            data: [],
-            type: _l7Core.gl.FLOAT
-          },
-          size: 4,
-          update: function update(feature) {
-            var color = feature.color;
-            return !color || !color.length ? [1, 1, 1, 1] : color;
-          }
+      }
+    });
+  }
+  registerColorAttribute(styleAttributeService) {
+    styleAttributeService.registerStyleAttribute({
+      name: 'color',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Color',
+        shaderLocation: _CommonStyleAttribute.ShaderLocation.COLOR,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: _l7Core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 4,
+        update: feature => {
+          const {
+            color
+          } = feature;
+          return !color || !color.length ? [1, 1, 1, 1] : color;
         }
-      });
-    }
-  }, {
-    key: "registerVertexIdAttribute",
-    value: function registerVertexIdAttribute(styleAttributeService) {
-      styleAttributeService.registerStyleAttribute({
-        // 统一注册每个顶点的唯一编号（目前用于样式的数据映射计算使用）
-        name: 'vertexId',
-        type: _l7Core.AttributeType.Attribute,
-        descriptor: {
-          name: 'a_vertexId',
-          shaderLocation: _CommonStyleAttribute.ShaderLocation.VERTEX_ID,
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: _l7Core.gl.DYNAMIC_DRAW,
-            data: [],
-            type: _l7Core.gl.FLOAT
-          },
-          size: 1,
-          update: function update(feature, featureIdx) {
-            return [featureIdx];
-          }
+      }
+    });
+  }
+  registerVertexIdAttribute(styleAttributeService) {
+    styleAttributeService.registerStyleAttribute({
+      // 统一注册每个顶点的唯一编号（目前用于样式的数据映射计算使用）
+      name: 'vertexId',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_vertexId',
+        shaderLocation: _CommonStyleAttribute.ShaderLocation.VERTEX_ID,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: _l7Core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 1,
+        update: (feature, featureIdx) => {
+          return [featureIdx];
         }
-      });
-    }
-  }]);
-  return RegisterStyleAttributePlugin;
-}();
+      }
+    });
+  }
+}
+exports.default = RegisterStyleAttributePlugin;

package/lib/plugins/ShaderUniformPlugin.d.ts

@@ -0,0 +1,22 @@
+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;
+    /**
+     * 对于每个 layer 都有不同的几何中心点，因此在绘制每个 layer 的时候都需要重新设置
+     * @param layer
+     */
+    private setLayerCenter;
+    private generateUBO;
+}