@antv/l7-layers 2.9.26-alpha.0 → 2.9.26-alpha.1

package/lib/plugins/MultiPassRendererPlugin.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));
+
+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 _applyDecoratedDescriptor2 = _interopRequireDefault(require("@babel/runtime/helpers/applyDecoratedDescriptor"));
+
+var _initializerWarningHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerWarningHelper"));
+
+var _l7Core = require("@antv/l7-core");
+
+var _inversify = require("inversify");
+
+require("reflect-metadata");
+
+var _multiPassRender = require("../utils/multiPassRender");
+
+var _dec, _dec2, _class, _class2, _descriptor;
+
+var MultiPassRendererPlugin = (
+/**
+ * 自定义渲染管线：
+ * ClearPass -> PixelPickingPass(可选) -> RenderPass/TAAPass -> PostProcessing -> CopyPass
+ * 根据 Layer 配置的 passes 创建 PostProcessing
+ * @example
+ * new PolygonLayer({
+ *   enableMultiPassRenderer: true,
+ *   passes: [
+ *     'blurH',
+ *     ['blurV', { radius: 10 }],
+ *   ],
+ * })
+ */
+_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_l7Core.TYPES.IGlobalConfigService), _dec(_class = (_class2 = /*#__PURE__*/function () {
+  function MultiPassRendererPlugin() {
+    (0, _classCallCheck2.default)(this, MultiPassRendererPlugin);
+    (0, _initializerDefineProperty2.default)(this, "configService", _descriptor, this);
+  }
+
+  (0, _createClass2.default)(MultiPassRendererPlugin, [{
+    key: "apply",
+    value: function apply(layer, _ref) {
+      var _this = this;
+
+      var rendererService = _ref.rendererService,
+          postProcessingPassFactory = _ref.postProcessingPassFactory,
+          normalPassFactory = _ref.normalPassFactory;
+      layer.hooks.init.tap('MultiPassRendererPlugin', function () {
+        var _layer$getLayerConfig = layer.getLayerConfig(),
+            enableMultiPassRenderer = _layer$getLayerConfig.enableMultiPassRenderer,
+            _layer$getLayerConfig2 = _layer$getLayerConfig.passes,
+            passes = _layer$getLayerConfig2 === void 0 ? [] : _layer$getLayerConfig2; // SceneConfig 的 enableMultiPassRenderer 配置项可以统一关闭
+
+
+        _this.enabled = !!enableMultiPassRenderer && layer.getLayerConfig().enableMultiPassRenderer !== false; // 根据 LayerConfig passes 配置项初始化
+
+        if (_this.enabled) {
+          layer.multiPassRenderer = (0, _multiPassRender.createMultiPassRenderer)(layer, passes, postProcessingPassFactory, normalPassFactory);
+          layer.multiPassRenderer.setRenderFlag(true);
+        }
+      });
+      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;
+
+          layer.multiPassRenderer.resize(width, height);
+        }
+      });
+    }
+  }]);
+  return MultiPassRendererPlugin;
+}(), (_descriptor = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "configService", [_dec2], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);
+exports.default = MultiPassRendererPlugin;

package/lib/plugins/PixelPickingPlugin.js

@@ -0,0 +1,159 @@
+"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 _l7Utils = require("@antv/l7-utils");
+
+var _inversify = require("inversify");
+
+require("reflect-metadata");
+
+var _dec, _class;
+
+var PickingStage = {
+  NONE: 0.0,
+  ENCODE: 1.0,
+  HIGHLIGHT: 2.0
+};
+var PixelPickingPlugin = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE__*/function () {
+  function PixelPickingPlugin() {
+    (0, _classCallCheck2.default)(this, PixelPickingPlugin);
+  }
+
+  (0, _createClass2.default)(PixelPickingPlugin, [{
+    key: "apply",
+    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; // const enablePicking = true;
+
+
+        styleAttributeService.registerStyleAttribute({
+          name: 'pickingColor',
+          type: _l7Core.AttributeType.Attribute,
+          descriptor: {
+            name: 'a_PickingColor',
+            buffer: {
+              data: [],
+              type: _l7Core.gl.FLOAT
+            },
+            size: 3,
+            // TODO: 固定 feature range 范围内的 pickingColor 都是固定的，可以生成 cache
+            update: function update(feature, featureIdx) {
+              // 只有开启拾取才需要 encode
+              var id = feature.id;
+              return enablePicking ? (0, _l7Utils.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;
+
+        if (enablePicking && layer.isVisible()) {
+          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()) {
+          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; // const {
+        //   highlightColor,
+        //   activeMix = 0,
+        //   enableSelect,
+        // } = layer.getLayerConfig();
+
+
+        var highlightColorInArray = typeof highlightColor === 'string' ? (0, _l7Utils.rgb2arr)(highlightColor) : highlightColor || [1, 0, 0, 1]; // const { selectColor } = layer.getLayerConfig();
+        // const selectColorInArray =
+        //   typeof selectColor === 'string'
+        //     ? rgb2arr(selectColor)
+        //     : selectColor || [1, 0, 0, 1];
+
+        layer.updateLayerConfig({
+          pickedFeatureID: (0, _l7Utils.decodePickingColor)(new Uint8Array(pickedColor))
+        }); // const currentSelectedId = layer.getCurrentSelectedId();
+
+        layer.models.forEach(function (model) {
+          return model.addUniforms({
+            u_PickingStage: PickingStage.HIGHLIGHT,
+            u_PickingColor: pickedColor,
+            u_HighlightColor: highlightColorInArray.map(function (c) {
+              return c * 255;
+            }),
+            u_activeMix: activeMix // u_CurrentSelectedId: currentSelectedId
+            //   ? encodePickingColor(layer.getCurrentSelectedId()!)
+            //   : [0, 0, 0],
+            // u_SelectColor: selectColorInArray.map((c) => c * 255),
+            // u_EnableSelect: +(enableSelect || false),
+
+          });
+        });
+      });
+      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))
+        });
+        layer.models.forEach(function (model) {
+          return model.addUniforms({
+            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
+          });
+        });
+      }); // }
+    }
+  }]);
+  return PixelPickingPlugin;
+}()) || _class);
+exports.default = PixelPickingPlugin;

package/lib/plugins/RegisterStyleAttributePlugin.js

@@ -0,0 +1,117 @@
+"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 _inversify = require("inversify");
+
+require("reflect-metadata");
+
+var _dec, _class;
+
+var RegisterStyleAttributePlugin = (
+/**
+ * 在初始化阶段完成属性的注册，以及首次根据 Layer 指定的三角化方法完成 indices 和 attribute 的创建
+ */
+_dec = (0, _inversify.injectable)(), _dec(_class = /*#__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.tap('RegisterStyleAttributePlugin', function () {
+        _this.registerBuiltinAttributes(styleAttributeService);
+      });
+    }
+  }, {
+    key: "registerBuiltinAttributes",
+    value: function registerBuiltinAttributes(styleAttributeService) {
+      styleAttributeService.registerStyleAttribute({
+        name: 'position',
+        type: _l7Core.AttributeType.Attribute,
+        descriptor: {
+          name: 'a_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]];
+          }
+        }
+      });
+      styleAttributeService.registerStyleAttribute({
+        name: 'filter',
+        type: _l7Core.AttributeType.Attribute,
+        descriptor: {
+          name: 'filter',
+          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) {
+            var filter = feature.filter;
+            return filter ? [1] : [0];
+          }
+        }
+      });
+      styleAttributeService.registerStyleAttribute({
+        name: 'color',
+        type: _l7Core.AttributeType.Attribute,
+        descriptor: {
+          name: 'a_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, featureIdx) {
+            var color = feature.color;
+            return !color || !color.length ? [1, 1, 1, 1] : color;
+          }
+        }
+      });
+      styleAttributeService.registerStyleAttribute({
+        // 统一注册每个顶点的唯一编号（目前用于样式的数据映射计算使用）
+        name: 'vertexId',
+        type: _l7Core.AttributeType.Attribute,
+        descriptor: {
+          name: 'a_vertexId',
+          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, vertex, attributeIdx) {
+            return [featureIdx];
+          }
+        }
+      });
+    }
+  }]);
+  return RegisterStyleAttributePlugin;
+}()) || _class);
+exports.default = RegisterStyleAttributePlugin;

package/lib/plugins/ShaderUniformPlugin.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));
+
+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 _applyDecoratedDescriptor2 = _interopRequireDefault(require("@babel/runtime/helpers/applyDecoratedDescriptor"));
+
+var _initializerWarningHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerWarningHelper"));
+
+var _l7Core = require("@antv/l7-core");
+
+var _l7Utils = require("@antv/l7-utils");
+
+var _inversify = require("inversify");
+
+require("reflect-metadata");
+
+var _dec, _dec2, _dec3, _dec4, _dec5, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4;
+
+var ShaderUniformPlugin = (
+/**
+ * 在渲染之前需要获取当前 Shader 所需 Uniform，例如：
+ * 1. 从相机服务中获取 View & ProjectionMatrix，当前缩放等级等等
+ * 2. 从坐标系服务中获取当前坐标系，例如是否是偏移坐标系
+ *    @see https://yuque.antfin-inc.com/yuqi.pyq/fgetpa/doml91
+ * 3. 当前 Layer 本身的样式属性
+ */
+_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_l7Core.TYPES.ICameraService), _dec3 = (0, _inversify.inject)(_l7Core.TYPES.ICoordinateSystemService), _dec4 = (0, _inversify.inject)(_l7Core.TYPES.IRendererService), _dec5 = (0, _inversify.inject)(_l7Core.TYPES.IMapService), _dec(_class = (_class2 = /*#__PURE__*/function () {
+  function ShaderUniformPlugin() {
+    (0, _classCallCheck2.default)(this, ShaderUniformPlugin);
+    (0, _initializerDefineProperty2.default)(this, "cameraService", _descriptor, this);
+    (0, _initializerDefineProperty2.default)(this, "coordinateSystemService", _descriptor2, this);
+    (0, _initializerDefineProperty2.default)(this, "rendererService", _descriptor3, this);
+    (0, _initializerDefineProperty2.default)(this, "mapService", _descriptor4, this);
+  }
+
+  (0, _createClass2.default)(ShaderUniformPlugin, [{
+    key: "apply",
+    value: function apply(layer) {
+      var _this = this;
+
+      var version = this.mapService.version;
+      var mvp = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; // default matrix (for gaode2.x)
+
+      var sceneCenterMKT = [0, 0];
+      layer.hooks.beforeRender.tap('ShaderUniformPlugin', function () {
+        // @ts-ignore
+        var offset = layer.getLayerConfig().tileOrigin; // 重新计算坐标系参数
+
+        _this.coordinateSystemService.refresh(offset);
+
+        if (version === 'GAODE2.x') {
+          var layerCenter = _this.getLayerCenter(layer); // @ts-ignore
+
+
+          _this.mapService.map.customCoords.setCenter(layerCenter); // @ts-ignore
+
+
+          _this.mapService.setCustomCoordCenter(layerCenter); // @ts-ignore
+
+
+          mvp = _this.mapService.map.customCoords.getMVPMatrix(); // mvp = amapCustomCoords.getMVPMatrix()
+          // @ts-ignore
+
+          sceneCenterMKT = _this.mapService.getCustomCoordCenter();
+        }
+
+        var _this$rendererService = _this.rendererService.getViewportSize(),
+            width = _this$rendererService.width,
+            height = _this$rendererService.height;
+
+        layer.models.forEach(function (model) {
+          var _model$addUniforms;
+
+          model.addUniforms((_model$addUniforms = {}, (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CameraUniform.ProjectionMatrix, _this.cameraService.getProjectionMatrix()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CameraUniform.ViewMatrix, _this.cameraService.getViewMatrix()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CameraUniform.ViewProjectionMatrix, _this.cameraService.getViewProjectionMatrix()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CameraUniform.Zoom, _this.cameraService.getZoom()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CameraUniform.ZoomScale, _this.cameraService.getZoomScale()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CameraUniform.FocalDistance, _this.cameraService.getFocalDistance()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CameraUniform.CameraPosition, _this.cameraService.getCameraPosition()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CoordinateUniform.CoordinateSystem, _this.coordinateSystemService.getCoordinateSystem()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CoordinateUniform.ViewportCenter, _this.coordinateSystemService.getViewportCenter()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CoordinateUniform.ViewportCenterProjection, _this.coordinateSystemService.getViewportCenterProjection()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CoordinateUniform.PixelsPerDegree, _this.coordinateSystemService.getPixelsPerDegree()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CoordinateUniform.PixelsPerDegree2, _this.coordinateSystemService.getPixelsPerDegree2()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CoordinateUniform.PixelsPerMeter, _this.coordinateSystemService.getPixelsPerMeter()), (0, _defineProperty2.default)(_model$addUniforms, _l7Core.CoordinateUniform.Mvp, mvp), (0, _defineProperty2.default)(_model$addUniforms, "u_SceneCenterMKT", sceneCenterMKT), (0, _defineProperty2.default)(_model$addUniforms, "u_ViewportSize", [width, height]), (0, _defineProperty2.default)(_model$addUniforms, "u_ModelMatrix", _this.cameraService.getModelMatrix()), (0, _defineProperty2.default)(_model$addUniforms, "u_DevicePixelRatio", _l7Utils.$window.devicePixelRatio), (0, _defineProperty2.default)(_model$addUniforms, "u_PickingBuffer", layer.getLayerConfig().pickingBuffer || 0), (0, _defineProperty2.default)(_model$addUniforms, "u_shaderPick", Number(layer.getShaderPickStat())), _model$addUniforms));
+        }); // TODO：脏检查，决定是否需要渲染
+      });
+    }
+  }, {
+    key: "getLayerCenter",
+    value: function getLayerCenter(layer) {
+      var source = layer.getSource();
+      return source.center;
+    }
+  }]);
+  return ShaderUniformPlugin;
+}(), (_descriptor = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "cameraService", [_dec2], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor2 = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "coordinateSystemService", [_dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor3 = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "rendererService", [_dec4], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor4 = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "mapService", [_dec5], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);
+exports.default = ShaderUniformPlugin;

package/lib/plugins/UpdateModelPlugin.js

@@ -0,0 +1,42 @@
+"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 _inversify = require("inversify");
+
+require("reflect-metadata");
+
+var _dec, _class;
+
+var UpdateModelPlugin = (
+/**
+ * Model 更新
+ */
+_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE__*/function () {
+  function UpdateModelPlugin() {
+    (0, _classCallCheck2.default)(this, UpdateModelPlugin);
+  }
+
+  (0, _createClass2.default)(UpdateModelPlugin, [{
+    key: "apply",
+    value: function apply(layer) {
+      layer.hooks.beforeRender.tap('UpdateModelPlugin', function () {
+        // 处理文本更新
+        if (layer.layerModel) {
+          layer.layerModel.needUpdate();
+        }
+      });
+    }
+  }]);
+  return UpdateModelPlugin;
+}()) || _class);
+exports.default = UpdateModelPlugin;

package/lib/plugins/UpdateStyleAttributePlugin.js

@@ -0,0 +1,98 @@
+"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 _inversify = require("inversify");
+
+require("reflect-metadata");
+
+var _dec, _class;
+
+var UpdateStyleAttributePlugin = (
+/**
+ * 在初始化阶段完成属性的注册，以及首次根据 Layer 指定的三角化方法完成 indices 和 attribute 的创建
+ */
+_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE__*/function () {
+  function UpdateStyleAttributePlugin() {
+    (0, _classCallCheck2.default)(this, UpdateStyleAttributePlugin);
+  }
+
+  (0, _createClass2.default)(UpdateStyleAttributePlugin, [{
+    key: "apply",
+    value: function apply(layer, _ref) {
+      var _this = this;
+
+      var styleAttributeService = _ref.styleAttributeService;
+      layer.hooks.init.tap('UpdateStyleAttributePlugin', function () {
+        _this.initStyleAttribute(layer, {
+          styleAttributeService: styleAttributeService
+        });
+      }); // layer.hooks.beforeRenderData.tap('styleAttributeService', () => {
+      //   // layer.layerModelNeedUpdate = true;
+      //   return true;
+      // });
+
+      layer.hooks.beforeRender.tap('UpdateStyleAttributePlugin', function () {
+        if (layer.layerModelNeedUpdate) {
+          return;
+        }
+
+        _this.updateStyleAtrribute(layer, {
+          styleAttributeService: styleAttributeService
+        });
+      });
+    }
+  }, {
+    key: "updateStyleAtrribute",
+    value: function updateStyleAtrribute(layer, _ref2) {
+      var styleAttributeService = _ref2.styleAttributeService;
+      var attributes = styleAttributeService.getLayerStyleAttributes() || [];
+      var filter = styleAttributeService.getLayerStyleAttribute('filter');
+      var shape = styleAttributeService.getLayerStyleAttribute('shape');
+
+      if (filter && filter.needRegenerateVertices // ||
+      // (shape && shape.needRegenerateVertices) // TODO:Shape 更新重新build
+      ) {
+        layer.layerModelNeedUpdate = true;
+        attributes.forEach(function (attr) {
+          return attr.needRegenerateVertices = false;
+        });
+        return;
+      }
+
+      attributes.filter(function (attribute) {
+        return attribute.needRegenerateVertices;
+      }).forEach(function (attribute) {
+        // 精确更新某个/某些 feature(s)，需要传入 featureIdx d
+        styleAttributeService.updateAttributeByFeatureRange(attribute.name, layer.getEncodedData(), // 获取经过 mapping 最新的数据
+        attribute.featureRange.startIndex, attribute.featureRange.endIndex);
+        attribute.needRegenerateVertices = false;
+      });
+    }
+  }, {
+    key: "initStyleAttribute",
+    value: function initStyleAttribute(layer, _ref3) {
+      var styleAttributeService = _ref3.styleAttributeService;
+      var attributes = styleAttributeService.getLayerStyleAttributes() || [];
+      attributes.filter(function (attribute) {
+        return attribute.needRegenerateVertices;
+      }).forEach(function (attribute) {
+        // 精确更新某个/某些 feature(s)，需要传入 featureIdx d
+        styleAttributeService.updateAttributeByFeatureRange(attribute.name, layer.getEncodedData(), // 获取经过 mapping 最新的数据
+        attribute.featureRange.startIndex, attribute.featureRange.endIndex);
+        attribute.needRegenerateVertices = false;
+      });
+    }
+  }]);
+  return UpdateStyleAttributePlugin;
+}()) || _class);
+exports.default = UpdateStyleAttributePlugin;