@antv/l7-layers 2.21.0 → 2.21.2

package/es/plugins/PixelPickingPlugin.js

@@ -1,168 +1,146 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
+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 { ShaderLocation } from "../core/CommonStyleAttribute";
-var isNumber = lodashUtil.isNumber;
-var PickingStage = {
+const {
+  isNumber
+} = lodashUtil;
+const PickingStage = {
   NONE: 0.0,
   ENCODE: 1.0,
   HIGHLIGHT: 2.0
 };
-var PixelPickingPlugin = /*#__PURE__*/function () {
-  function PixelPickingPlugin() {
-    _classCallCheck(this, PixelPickingPlugin);
-  }
-  _createClass(PixelPickingPlugin, [{
-    key: "pickOption2Array",
-    value:
+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]]);
 
-    function pickOption2Array() {
-      var array = [];
-      this.pickingUniformMap.forEach(function (value) {
-        if (isNumber(value)) {
-          array.push(value);
-        } else {
-          array.push.apply(array, _toConsumableArray(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_EnableSelect', 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: AttributeType.Attribute,
-          descriptor: {
-            name: 'a_PickingColor',
-            shaderLocation: ShaderLocation.PICKING_COLOR,
-            buffer: {
-              data: [],
-              type: gl.FLOAT
-            },
-            size: 3,
-            // TODO: 固定 feature range 范围内的 pickingColor 都是固定的，可以生成 cache
-            update: function update(feature) {
-              // 只有开启拾取才需要 encode
-              var id = feature.id;
-              return enablePicking ? encodePickingColor(id) : [0, 0, 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: ShaderLocation.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', 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' ? rgb2arr(highlightColor) : highlightColor || [1, 0, 0, 1];
-        layer.updateLayerConfig({
-          pickedFeatureID: 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' ? rgb2arr(highlightColor) : highlightColor || [1, 0, 0, 1];
+      layer.updateLayerConfig({
+        pickedFeatureID: 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' ? rgb2arr(selectColor) : selectColor || [1, 0, 0, 1];
-        layer.updateLayerConfig({
-          pickedFeatureID: 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;
-          }),
-          u_EnableSelect: 1
-        };
-        _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' ? rgb2arr(selectColor) : selectColor || [1, 0, 0, 1];
+      layer.updateLayerConfig({
+        pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor))
       });
-    }
-  }]);
-  return PixelPickingPlugin;
-}();
-export { PixelPickingPlugin as default };
+      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.js

@@ -1,5 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
 import { AttributeType, gl } from '@antv/l7-core';
 import { ShaderLocation } from "../core/CommonStyleAttribute";
 import { isTileGroup } from "../tile/utils/utils";
@@ -7,104 +5,90 @@ import { isTileGroup } from "../tile/utils/utils";
 /**
  * 在初始化阶段完成属性的注册，以及首次根据 Layer 指定的三角化方法完成 indices 和 attribute 的创建
  */
-var RegisterStyleAttributePlugin = /*#__PURE__*/function () {
-  function RegisterStyleAttributePlugin() {
-    _classCallCheck(this, RegisterStyleAttributePlugin);
-  }
-  _createClass(RegisterStyleAttributePlugin, [{
-    key: "apply",
-    value: function apply(layer, _ref) {
-      var _this = this;
-      var styleAttributeService = _ref.styleAttributeService;
-      layer.hooks.init.tapPromise('RegisterStyleAttributePlugin', function () {
-        // 过滤 tileGroup layer （瓦片图层不需要注册）
-        if (isTileGroup(layer)) {
-          return;
-        }
-        _this.registerBuiltinAttributes(styleAttributeService, layer);
-      });
-    }
-  }, {
-    key: "registerBuiltinAttributes",
-    value: function registerBuiltinAttributes(styleAttributeService, layer) {
-      // MaskLayer 只需要注册 a_Position
-      if (layer.type === 'MaskLayer') {
-        this.registerPositionAttribute(styleAttributeService);
+export default class RegisterStyleAttributePlugin {
+  apply(layer, {
+    styleAttributeService
+  }) {
+    layer.hooks.init.tapPromise('RegisterStyleAttributePlugin', () => {
+      // 过滤 tileGroup layer （瓦片图层不需要注册）
+      if (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: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Position',
-          shaderLocation: ShaderLocation.POSITION,
-          buffer: {
-            data: [],
-            type: 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: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Position',
+        shaderLocation: ShaderLocation.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]];
         }
-      });
-    }
-  }, {
-    key: "registerColorAttribute",
-    value: function registerColorAttribute(styleAttributeService) {
-      styleAttributeService.registerStyleAttribute({
-        name: 'color',
-        type: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Color',
-          shaderLocation: ShaderLocation.COLOR,
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: gl.DYNAMIC_DRAW,
-            data: [],
-            type: 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: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Color',
+        shaderLocation: ShaderLocation.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;
         }
-      });
-    }
-  }, {
-    key: "registerVertexIdAttribute",
-    value: function registerVertexIdAttribute(styleAttributeService) {
-      styleAttributeService.registerStyleAttribute({
-        // 统一注册每个顶点的唯一编号（目前用于样式的数据映射计算使用）
-        name: 'vertexId',
-        type: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_vertexId',
-          shaderLocation: ShaderLocation.VERTEX_ID,
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: gl.DYNAMIC_DRAW,
-            data: [],
-            type: gl.FLOAT
-          },
-          size: 1,
-          update: function update(feature, featureIdx) {
-            return [featureIdx];
-          }
+      }
+    });
+  }
+  registerVertexIdAttribute(styleAttributeService) {
+    styleAttributeService.registerStyleAttribute({
+      // 统一注册每个顶点的唯一编号（目前用于样式的数据映射计算使用）
+      name: 'vertexId',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_vertexId',
+        shaderLocation: ShaderLocation.VERTEX_ID,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: (feature, featureIdx) => {
+          return [featureIdx];
         }
-      });
-    }
-  }]);
-  return RegisterStyleAttributePlugin;
-}();
-export { RegisterStyleAttributePlugin as default };
+      }
+    });
+  }
+}