@antv/l7-layers 2.9.21 → 2.9.22-alpha.0

package/es/plugins/FeatureScalePlugin.js

@@ -1,28 +1,27 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _initializerDefineProperty from "@babel/runtime/helpers/initializerDefineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _applyDecoratedDescriptor from "@babel/runtime/helpers/applyDecoratedDescriptor";
 import _initializerWarningHelper from "@babel/runtime/helpers/initializerWarningHelper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _uniq from "lodash/uniq";
-import _isString from "lodash/isString";
-import _isNil from "lodash/isNil";
 
 var _scaleMap, _dec, _dec2, _class, _class2, _descriptor;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { ScaleTypes, StyleScaleType, TYPES } from '@antv/l7-core';
 import { extent } from 'd3-array';
 import * as d3interpolate from 'd3-interpolate';
 import * as d3 from 'd3-scale';
 import { inject, injectable } from 'inversify';
+import { isNil, isString, uniq } from 'lodash';
 import 'reflect-metadata';
 var dateRegex = /^(?:(?!0000)[0-9]{4}([-/.]+)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-/.]?)0?2\2(?:29))(\s+([01]|([01][0-9]|2[0-3])):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9]))?$/;
 var scaleMap = (_scaleMap = {}, _defineProperty(_scaleMap, ScaleTypes.LINEAR, d3.scaleLinear), _defineProperty(_scaleMap, ScaleTypes.POWER, d3.scalePow), _defineProperty(_scaleMap, ScaleTypes.LOG, d3.scaleLog), _defineProperty(_scaleMap, ScaleTypes.IDENTITY, d3.scaleIdentity), _defineProperty(_scaleMap, ScaleTypes.SEQUENTIAL, d3.scaleSequential), _defineProperty(_scaleMap, ScaleTypes.TIME, d3.scaleTime), _defineProperty(_scaleMap, ScaleTypes.QUANTILE, d3.scaleQuantile), _defineProperty(_scaleMap, ScaleTypes.QUANTIZE, d3.scaleQuantize), _defineProperty(_scaleMap, ScaleTypes.THRESHOLD, d3.scaleThreshold), _defineProperty(_scaleMap, ScaleTypes.CAT, d3.scaleOrdinal), _defineProperty(_scaleMap, ScaleTypes.DIVERGING, d3.scaleDiverging), _scaleMap);
-var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfigService), _dec(_class = (_class2 = function () {
+/**
+ * 根据 Source 原始数据为指定字段创建 Scale，保存在 StyleAttribute 上，供下游插件使用
+ */
+
+var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfigService), _dec(_class = (_class2 = /*#__PURE__*/function () {
   function FeatureScalePlugin() {
     _classCallCheck(this, FeatureScalePlugin);
 
@@ -49,7 +48,8 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
         }
 
         _this.caculateScalesForAttributes(attributes || [], dataArray);
-      });
+      }); // 检测数据是否需要更新
+
       layer.hooks.beforeRenderData.tap('FeatureScalePlugin', function () {
         _this.scaleOptions = layer.getScaleOptions();
         var attributes = styleAttributeService.getLayerStyleAttributes();
@@ -98,15 +98,17 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
       this.scaleCache = {};
       attributes.forEach(function (attribute) {
         if (attribute.scale) {
+          // 创建Scale
           var attributeScale = attribute.scale;
           var type = attribute.name;
           attributeScale.names = _this2.parseFields(attribute.scale.field || []);
-          var scales = [];
+          var scales = []; // 为每个字段创建 Scale
+
           attributeScale.names.forEach(function (field) {
             var _attribute$scale;
 
             scales.push(_this2.createScale(field, attribute.name, (_attribute$scale = attribute.scale) === null || _attribute$scale === void 0 ? void 0 : _attribute$scale.values, dataArray));
-          });
+          }); // 为scales 设置值区间 Range
 
           if (scales.some(function (scale) {
             return scale.type === StyleScaleType.VARIABLE;
@@ -115,6 +117,7 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
             scales.forEach(function (scale) {
               var _scale$option;
 
+              // 如果设置了回调, 这不需要设置range
               if (!attributeScale.callback && attributeScale.values !== 'text') {
                 switch ((_scale$option = scale.option) === null || _scale$option === void 0 ? void 0 : _scale$option.type) {
                   case ScaleTypes.LOG:
@@ -131,7 +134,8 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
                   case ScaleTypes.QUANTILE:
                   case ScaleTypes.QUANTIZE:
                   case ScaleTypes.THRESHOLD:
-                    scale.scale.range(attributeScale.values);
+                    scale.scale.range(attributeScale.values); //
+
                     break;
 
                   case ScaleTypes.CAT:
@@ -140,7 +144,8 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
 
                   case ScaleTypes.DIVERGING:
                   case ScaleTypes.SEQUENTIAL:
-                    scale.scale.interpolator(d3interpolate.interpolateRgbBasis(attributeScale.values));
+                    scale.scale.interpolator( // @ts-ignore
+                    d3interpolate.interpolateRgbBasis(attributeScale.values));
                     break;
                 }
               }
@@ -152,6 +157,7 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
               }
             });
           } else {
+            // 设置attribute 常量值 常量直接在value取值
             attributeScale.type = StyleScaleType.CONSTANT;
             attributeScale.defaultValues = scales.map(function (scale, index) {
               return scale.scale(attributeScale.names[index]);
@@ -169,6 +175,12 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
         }
       });
     }
+    /**
+     * @example
+     * 'w*h' => ['w', 'h']
+     * 'w' => ['w']
+     */
+
   }, {
     key: "parseFields",
     value: function parseFields(field) {
@@ -176,7 +188,7 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
         return field;
       }
 
-      if (_isString(field)) {
+      if (isString(field)) {
         return field.split('*');
       }
 
@@ -187,7 +199,9 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
     value: function createScale(field, name, values, data) {
       var _this$scaleOptions$na, _find;
 
-      var scaleOption = this.scaleOptions[name] && ((_this$scaleOptions$na = this.scaleOptions[name]) === null || _this$scaleOptions$na === void 0 ? void 0 : _this$scaleOptions$na.field) === field ? this.scaleOptions[name] : this.scaleOptions[field];
+      // scale 支持根据视觉通道和字段
+      var scaleOption = this.scaleOptions[name] && ((_this$scaleOptions$na = this.scaleOptions[name]) === null || _this$scaleOptions$na === void 0 ? void 0 : _this$scaleOptions$na.field) === field ? this.scaleOptions[name] // TODO  zi
+      : this.scaleOptions[field];
       var styleScale = {
         field: field,
         scale: undefined,
@@ -207,16 +221,18 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
       }
 
       var firstValue = (_find = data.find(function (d) {
-        return !_isNil(d[field]);
-      })) === null || _find === void 0 ? void 0 : _find[field];
+        return !isNil(d[field]);
+      })) === null || _find === void 0 ? void 0 : _find[field]; // 常量 Scale
 
-      if (this.isNumber(field) || _isNil(firstValue) && !scaleOption) {
+      if (this.isNumber(field) || isNil(firstValue) && !scaleOption) {
         styleScale.scale = d3.scaleOrdinal([field]);
         styleScale.type = StyleScaleType.CONSTANT;
       } else {
+        // 根据数据类型判断 默认等分位，时间，和枚举类型
         var type = scaleOption && scaleOption.type || this.getDefaultType(firstValue);
 
         if (values === 'text') {
+          // text 为内置变 如果是文本则为cat
           type = ScaleTypes.CAT;
         }
 
@@ -237,7 +253,8 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
       }
 
       return type;
-    }
+    } // 生成Scale 默认配置
+
   }, {
     key: "createScaleConfig",
     value: function createScaleConfig(type, field, scaleOption, data) {
@@ -251,9 +268,10 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
       if (scaleOption !== null && scaleOption !== void 0 && scaleOption.domain) {
         cfg.domain = scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.domain;
       } else if (type !== ScaleTypes.CAT && type !== ScaleTypes.QUANTILE && type !== ScaleTypes.DIVERGING) {
+        // linear/
         cfg.domain = extent(values);
       } else if (type === ScaleTypes.CAT) {
-        cfg.domain = _uniq(values);
+        cfg.domain = uniq(values);
       } else if (type === ScaleTypes.QUANTILE) {
         cfg.domain = values;
       } else if (type === ScaleTypes.DIVERGING) {
@@ -263,7 +281,8 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
       }
 
       return _objectSpread(_objectSpread({}, cfg), scaleOption);
-    }
+    } // 创建Scale 实例
+
   }, {
     key: "createDefaultScale",
     value: function createDefaultScale(_ref2) {
@@ -272,6 +291,7 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
           unknown = _ref2.unknown,
           clamp = _ref2.clamp,
           nice = _ref2.nice;
+      // @ts-ignore
       var scale = scaleMap[type]();
 
       if (domain && scale.domain) {
@@ -288,7 +308,8 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
 
       if (nice !== undefined && scale.nice) {
         scale.nice(nice);
-      }
+      } // TODO 其他属性支持
+
 
       return scale;
     }
@@ -301,5 +322,4 @@ var FeatureScalePlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfi
   writable: true,
   initializer: null
 })), _class2)) || _class);
-export { FeatureScalePlugin as default };
-//# sourceMappingURL=FeatureScalePlugin.js.map
+export { FeatureScalePlugin as default };

package/es/plugins/LayerAnimateStylePlugin.js

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _initializerDefineProperty from "@babel/runtime/helpers/initializerDefineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -7,14 +8,10 @@ import _initializerWarningHelper from "@babel/runtime/helpers/initializerWarning
 
 var _dec, _dec2, _dec3, _class, _class2, _descriptor, _descriptor2;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { TYPES } from '@antv/l7-core';
 import { inject, injectable } from 'inversify';
 import 'reflect-metadata';
-var LayerAnimateStylePlugin = (_dec = injectable(), _dec2 = inject(TYPES.ICameraService), _dec3 = inject(TYPES.IRendererService), _dec(_class = (_class2 = function () {
+var LayerAnimateStylePlugin = (_dec = injectable(), _dec2 = inject(TYPES.ICameraService), _dec3 = inject(TYPES.IRendererService), _dec(_class = (_class2 = /*#__PURE__*/function () {
   function LayerAnimateStylePlugin() {
     _classCallCheck(this, LayerAnimateStylePlugin);
 
@@ -26,7 +23,10 @@ var LayerAnimateStylePlugin = (_dec = injectable(), _dec2 = inject(TYPES.ICamera
   _createClass(LayerAnimateStylePlugin, [{
     key: "apply",
     value: function apply(layer) {
+      // layer.hooks.beforeRender.tap('LayerAnimateStylePlugin', () => {
+      // })
       layer.hooks.beforeRender.tap('LayerAnimateStylePlugin', function () {
+        // 重新计算坐标系参数
         layer.models.forEach(function (model) {
           model.addUniforms(_objectSpread({}, layer.layerModel.getAnimateUniforms()));
         });
@@ -46,5 +46,4 @@ var LayerAnimateStylePlugin = (_dec = injectable(), _dec2 = inject(TYPES.ICamera
   writable: true,
   initializer: null
 })), _class2)) || _class);
-export { LayerAnimateStylePlugin as default };
-//# sourceMappingURL=LayerAnimateStylePlugin.js.map
+export { LayerAnimateStylePlugin as default };

package/es/plugins/LayerModelPlugin.js

@@ -5,7 +5,11 @@ var _dec, _class;
 
 import { injectable } from 'inversify';
 import 'reflect-metadata';
-var LayerModelPlugin = (_dec = injectable(), _dec(_class = function () {
+/**
+ * Layer Model 初始化，更新，销毁
+ */
+
+var LayerModelPlugin = (_dec = injectable(), _dec(_class = /*#__PURE__*/function () {
   function LayerModelPlugin() {
     _classCallCheck(this, LayerModelPlugin);
   }
@@ -13,17 +17,23 @@ var LayerModelPlugin = (_dec = injectable(), _dec(_class = function () {
   _createClass(LayerModelPlugin, [{
     key: "initLayerModel",
     value: function initLayerModel(layer) {
-      layer.prepareBuildModel();
-      layer.buildModels();
+      // 更新Model 配置项
+      layer.prepareBuildModel(); // 初始化 Model
+
+      layer.buildModels(); // emit layer model loaded
+
       layer.emit('modelLoaded', null);
       layer.styleNeedUpdate = false;
     }
   }, {
     key: "prepareLayerModel",
     value: function prepareLayerModel(layer) {
+      // 更新Model 配置项
       layer.prepareBuildModel();
-      layer.clearModels();
-      layer.buildModels();
+      layer.clearModels(); // 初始化 Model
+
+      layer.buildModels(); // emit layer model loaded
+
       layer.emit('modelLoaded', null);
       layer.layerModelNeedUpdate = false;
     }
@@ -58,5 +68,4 @@ var LayerModelPlugin = (_dec = injectable(), _dec(_class = function () {
 
   return LayerModelPlugin;
 }()) || _class);
-export { LayerModelPlugin as default };
-//# sourceMappingURL=LayerModelPlugin.js.map
+export { LayerModelPlugin as default };

package/es/plugins/LayerStylePlugin.js

@@ -5,7 +5,11 @@ var _dec, _class;
 
 import { injectable } from 'inversify';
 import 'reflect-metadata';
-var LayerStylePlugin = (_dec = injectable(), _dec(_class = function () {
+/**
+ * 更新图层样式，初始图层相关配置
+ */
+
+var LayerStylePlugin = (_dec = injectable(), _dec(_class = /*#__PURE__*/function () {
   function LayerStylePlugin() {
     _classCallCheck(this, LayerStylePlugin);
   }
@@ -14,6 +18,7 @@ var LayerStylePlugin = (_dec = injectable(), _dec(_class = function () {
     key: "apply",
     value: function apply(layer) {
       layer.hooks.afterInit.tap('LayerStylePlugin', function () {
+        // 更新图层默认状态
         layer.updateLayerConfig({});
 
         var _layer$getLayerConfig = layer.getLayerConfig(),
@@ -31,5 +36,4 @@ var LayerStylePlugin = (_dec = injectable(), _dec(_class = function () {
 
   return LayerStylePlugin;
 }()) || _class);
-export { LayerStylePlugin as default };
-//# sourceMappingURL=LayerStylePlugin.js.map
+export { LayerStylePlugin as default };

package/es/plugins/LightingPlugin.js

@@ -1,16 +1,11 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 
 var _dec, _class;
 
 var _excluded = ["type"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { injectable } from 'inversify';
 import 'reflect-metadata';
 var lightTypeUniformMap = {
@@ -68,14 +63,26 @@ export function generateLightingUniforms(lights) {
         rest = _objectWithoutProperties(_ref, _excluded);
 
     var lightsUniformName = lightTypeUniformMap[type].lights;
-    var lightsNumUniformName = lightTypeUniformMap[type].num;
-    var num = lightsMap[lightsNumUniformName];
-    lightsMap[lightsUniformName][num] = _objectSpread(_objectSpread({}, lightsMap[lightsUniformName][num]), rest);
+    var lightsNumUniformName = lightTypeUniformMap[type].num; // Object.keys(rest).forEach(key => {
+    //   if (Util.isString(rest[key]) && COLOR_ATTRIBUTES.indexOf(key) > -1) {
+    //     rest[key] = ColorUtil.color2RGBA(rest[key]).slice(0, 3);
+    //   }
+    // });
+    // @ts-ignore
+
+    var num = lightsMap[lightsNumUniformName]; // @ts-ignore
+
+    lightsMap[lightsUniformName][num] = _objectSpread(_objectSpread({}, lightsMap[lightsUniformName][num]), rest); // @ts-ignore
+
     lightsMap[lightsNumUniformName]++;
   });
   return lightsMap;
 }
-var LightingPlugin = (_dec = injectable(), _dec(_class = function () {
+/**
+ * 光照 & Shadow
+ */
+
+var LightingPlugin = (_dec = injectable(), _dec(_class = /*#__PURE__*/function () {
   function LightingPlugin() {
     _classCallCheck(this, LightingPlugin);
   }
@@ -89,7 +96,9 @@ var LightingPlugin = (_dec = injectable(), _dec(_class = function () {
 
         if (enableLighting) {
           layer.models.forEach(function (model) {
-            return model.addUniforms(_objectSpread({}, generateLightingUniforms()));
+            return (// @ts-ignore
+              model.addUniforms(_objectSpread({}, generateLightingUniforms()))
+            );
           });
         }
       });
@@ -98,5 +107,4 @@ var LightingPlugin = (_dec = injectable(), _dec(_class = function () {
 
   return LightingPlugin;
 }()) || _class);
-export { LightingPlugin as default };
-//# sourceMappingURL=LightingPlugin.js.map
+export { LightingPlugin as default };

package/es/plugins/MultiPassRendererPlugin.js

@@ -10,14 +10,26 @@ var _dec, _dec2, _class, _class2, _descriptor;
 import { TYPES } from '@antv/l7-core';
 import { inject, injectable } from 'inversify';
 import 'reflect-metadata';
-import { createMultiPassRenderer } from '../utils/multiPassRender';
-var MultiPassRendererPlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfigService), _dec(_class = (_class2 = function () {
+import { createMultiPassRenderer } from "../utils/multiPassRender";
+/**
+ * 自定义渲染管线：
+ * ClearPass -> PixelPickingPass(可选) -> RenderPass/TAAPass -> PostProcessing -> CopyPass
+ * 根据 Layer 配置的 passes 创建 PostProcessing
+ * @example
+ * new PolygonLayer({
+ *   enableMultiPassRenderer: true,
+ *   passes: [
+ *     'blurH',
+ *     ['blurV', { radius: 10 }],
+ *   ],
+ * })
+ */
+
+var MultiPassRendererPlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobalConfigService), _dec(_class = (_class2 = /*#__PURE__*/function () {
   function MultiPassRendererPlugin() {
     _classCallCheck(this, MultiPassRendererPlugin);
 
     _initializerDefineProperty(this, "configService", _descriptor, this);
-
-    _defineProperty(this, "enabled", void 0);
   }
 
   _createClass(MultiPassRendererPlugin, [{
@@ -32,9 +44,10 @@ var MultiPassRendererPlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobal
         var _layer$getLayerConfig = layer.getLayerConfig(),
             enableMultiPassRenderer = _layer$getLayerConfig.enableMultiPassRenderer,
             _layer$getLayerConfig2 = _layer$getLayerConfig.passes,
-            passes = _layer$getLayerConfig2 === void 0 ? [] : _layer$getLayerConfig2;
+            passes = _layer$getLayerConfig2 === void 0 ? [] : _layer$getLayerConfig2; // SceneConfig 的 enableMultiPassRenderer 配置项可以统一关闭
+
 
-        _this.enabled = !!enableMultiPassRenderer && layer.getLayerConfig().enableMultiPassRenderer !== false;
+        _this.enabled = !!enableMultiPassRenderer && layer.getLayerConfig().enableMultiPassRenderer !== false; // 根据 LayerConfig passes 配置项初始化
 
         if (_this.enabled) {
           layer.multiPassRenderer = createMultiPassRenderer(layer, passes, postProcessingPassFactory, normalPassFactory);
@@ -43,6 +56,7 @@ var MultiPassRendererPlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobal
       });
       layer.hooks.beforeRender.tap('MultiPassRendererPlugin', function () {
         if (_this.enabled) {
+          // 渲染前根据 viewport 调整 FBO size
           var _rendererService$getV = rendererService.getViewportSize(),
               width = _rendererService$getV.width,
               height = _rendererService$getV.height;
@@ -60,5 +74,4 @@ var MultiPassRendererPlugin = (_dec = injectable(), _dec2 = inject(TYPES.IGlobal
   writable: true,
   initializer: null
 })), _class2)) || _class);
-export { MultiPassRendererPlugin as default };
-//# sourceMappingURL=MultiPassRendererPlugin.js.map
+export { MultiPassRendererPlugin as default };

package/es/plugins/PixelPickingPlugin.js

@@ -12,7 +12,7 @@ var PickingStage = {
   ENCODE: 1.0,
   HIGHLIGHT: 2.0
 };
-var PixelPickingPlugin = (_dec = injectable(), _dec(_class = function () {
+var PixelPickingPlugin = (_dec = injectable(), _dec(_class = /*#__PURE__*/function () {
   function PixelPickingPlugin() {
     _classCallCheck(this, PixelPickingPlugin);
   }
@@ -22,10 +22,12 @@ var PixelPickingPlugin = (_dec = injectable(), _dec(_class = function () {
     value: function apply(layer, _ref) {
       var rendererService = _ref.rendererService,
           styleAttributeService = _ref.styleAttributeService;
+      // TODO: 由于 Shader 目前无法根据是否开启拾取进行内容修改，因此即使不开启也需要生成 a_PickingColor
       layer.hooks.init.tap('PixelPickingPlugin', function () {
         var _layer$getLayerConfig = layer.getLayerConfig(),
             enablePicking = _layer$getLayerConfig.enablePicking,
-            enableMultiPassRenderer = _layer$getLayerConfig.enableMultiPassRenderer;
+            enableMultiPassRenderer = _layer$getLayerConfig.enableMultiPassRenderer; // const enablePicking = true;
+
 
         styleAttributeService.registerStyleAttribute({
           name: 'pickingColor',
@@ -37,13 +39,17 @@ var PixelPickingPlugin = (_dec = injectable(), _dec(_class = function () {
               type: gl.FLOAT
             },
             size: 3,
+            // TODO: 固定 feature range 范围内的 pickingColor 都是固定的，可以生成 cache
             update: function update(feature, featureIdx) {
+              // 只有开启拾取才需要 encode
               var id = feature.id;
               return enablePicking ? encodePickingColor(id) : [0, 0, 0];
             }
           }
         });
-      });
+      }); // 必须要与 PixelPickingPass 结合使用，因此必须开启 multiPassRenderer
+      // if (layer.multiPassRenderer) {
+
       layer.hooks.beforePickingEncode.tap('PixelPickingPlugin', function () {
         var _layer$getLayerConfig2 = layer.getLayerConfig(),
             enablePicking = _layer$getLayerConfig2.enablePicking;
@@ -58,7 +64,8 @@ var PixelPickingPlugin = (_dec = injectable(), _dec(_class = function () {
       });
       layer.hooks.afterPickingEncode.tap('PixelPickingPlugin', function () {
         var _layer$getLayerConfig3 = layer.getLayerConfig(),
-            enablePicking = _layer$getLayerConfig3.enablePicking;
+            enablePicking = _layer$getLayerConfig3.enablePicking; // 区分选中高亮 和滑过高亮
+
 
         if (enablePicking && layer.isVisible()) {
           layer.models.forEach(function (model) {
@@ -72,12 +79,23 @@ var PixelPickingPlugin = (_dec = injectable(), _dec(_class = function () {
         var _layer$getLayerConfig4 = layer.getLayerConfig(),
             highlightColor = _layer$getLayerConfig4.highlightColor,
             _layer$getLayerConfig5 = _layer$getLayerConfig4.activeMix,
-            activeMix = _layer$getLayerConfig5 === void 0 ? 0 : _layer$getLayerConfig5;
+            activeMix = _layer$getLayerConfig5 === void 0 ? 0 : _layer$getLayerConfig5; // const {
+        //   highlightColor,
+        //   activeMix = 0,
+        //   enableSelect,
+        // } = layer.getLayerConfig();
+
+
+        var highlightColorInArray = typeof highlightColor === 'string' ? rgb2arr(highlightColor) : highlightColor || [1, 0, 0, 1]; // const { selectColor } = layer.getLayerConfig();
+        // const selectColorInArray =
+        //   typeof selectColor === 'string'
+        //     ? rgb2arr(selectColor)
+        //     : selectColor || [1, 0, 0, 1];
 
-        var highlightColorInArray = typeof highlightColor === 'string' ? rgb2arr(highlightColor) : highlightColor || [1, 0, 0, 1];
         layer.updateLayerConfig({
           pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor))
-        });
+        }); // const currentSelectedId = layer.getCurrentSelectedId();
+
         layer.models.forEach(function (model) {
           return model.addUniforms({
             u_PickingStage: PickingStage.HIGHLIGHT,
@@ -85,7 +103,12 @@ var PixelPickingPlugin = (_dec = injectable(), _dec(_class = function () {
             u_HighlightColor: highlightColorInArray.map(function (c) {
               return c * 255;
             }),
-            u_activeMix: activeMix
+            u_activeMix: activeMix // u_CurrentSelectedId: currentSelectedId
+            //   ? encodePickingColor(layer.getCurrentSelectedId()!)
+            //   : [0, 0, 0],
+            // u_SelectColor: selectColorInArray.map((c) => c * 255),
+            // u_EnableSelect: +(enableSelect || false),
+
           });
         });
       });
@@ -114,11 +137,10 @@ var PixelPickingPlugin = (_dec = injectable(), _dec(_class = function () {
             u_EnableSelect: 1
           });
         });
-      });
+      }); // }
     }
   }]);
 
   return PixelPickingPlugin;
 }()) || _class);
-export { PixelPickingPlugin as default };
-//# sourceMappingURL=PixelPickingPlugin.js.map
+export { PixelPickingPlugin as default };

package/es/plugins/RegisterStyleAttributePlugin.js

@@ -6,7 +6,11 @@ var _dec, _class;
 import { AttributeType, gl } from '@antv/l7-core';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
-var RegisterStyleAttributePlugin = (_dec = injectable(), _dec(_class = function () {
+/**
+ * 在初始化阶段完成属性的注册，以及首次根据 Layer 指定的三角化方法完成 indices 和 attribute 的创建
+ */
+
+var RegisterStyleAttributePlugin = (_dec = injectable(), _dec(_class = /*#__PURE__*/function () {
   function RegisterStyleAttributePlugin() {
     _classCallCheck(this, RegisterStyleAttributePlugin);
   }
@@ -45,6 +49,7 @@ var RegisterStyleAttributePlugin = (_dec = injectable(), _dec(_class = function
         descriptor: {
           name: 'filter',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
@@ -62,6 +67,7 @@ var RegisterStyleAttributePlugin = (_dec = injectable(), _dec(_class = function
         descriptor: {
           name: 'a_Color',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
@@ -74,11 +80,13 @@ var RegisterStyleAttributePlugin = (_dec = injectable(), _dec(_class = function
         }
       });
       styleAttributeService.registerStyleAttribute({
+        // 统一注册每个顶点的唯一编号（目前用于样式的数据映射计算使用）
         name: 'vertexId',
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_vertexId',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
@@ -94,5 +102,4 @@ var RegisterStyleAttributePlugin = (_dec = injectable(), _dec(_class = function
 
   return RegisterStyleAttributePlugin;
 }()) || _class);
-export { RegisterStyleAttributePlugin as default };
-//# sourceMappingURL=RegisterStyleAttributePlugin.js.map
+export { RegisterStyleAttributePlugin as default };