@antv/l7-layers 2.21.0 → 2.21.2

package/es/core/BaseLayer.js

@@ -1,22 +1,9 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["passes"],
+const _excluded = ["passes"],
   _excluded2 = ["moduleName", "vertexShader", "fragmentShader", "inject", "triangulation", "styleOption", "pickingEnabled"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 // @ts-ignore
 import { AsyncSeriesBailHook, AsyncWaterfallHook, SyncBailHook, SyncHook } from '@antv/async-hook';
 import { BlendType, IDebugLog, ILayerStage, globalConfigService } from '@antv/l7-core';
@@ -27,36 +14,80 @@ import { BlendTypes } from "../utils/blend";
 import { createMultiPassRenderer, normalizePasses } from "../utils/multiPassRender";
 import LayerPickService from "./LayerPickService";
 import TextureService from "./TextureService";
-var isEqual = lodashUtil.isEqual,
-  isFunction = lodashUtil.isFunction,
-  isNumber = lodashUtil.isNumber,
-  isObject = lodashUtil.isObject,
-  isPlainObject = lodashUtil.isPlainObject,
-  isUndefined = lodashUtil.isUndefined;
+const {
+  isEqual,
+  isFunction,
+  isNumber,
+  isObject,
+  isPlainObject,
+  isUndefined
+} = lodashUtil;
 /**
  * 分配 layer id
  */
-var layerIdCounter = 0;
-var BaseLayer = /*#__PURE__*/function (_ref) {
-  _inherits(BaseLayer, _ref);
-  var _super = _createSuper(BaseLayer);
-  function BaseLayer() {
-    var _this;
-    var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    _classCallCheck(this, BaseLayer);
-    _this = _super.call(this);
-    _defineProperty(_assertThisInitialized(_this), "id", "".concat(layerIdCounter++));
-    _defineProperty(_assertThisInitialized(_this), "name", "".concat(layerIdCounter));
-    _defineProperty(_assertThisInitialized(_this), "visible", true);
-    _defineProperty(_assertThisInitialized(_this), "zIndex", 0);
-    _defineProperty(_assertThisInitialized(_this), "inited", false);
-    _defineProperty(_assertThisInitialized(_this), "layerModelNeedUpdate", false);
-    _defineProperty(_assertThisInitialized(_this), "pickedFeatureID", null);
-    _defineProperty(_assertThisInitialized(_this), "selectedFeatureID", null);
-    _defineProperty(_assertThisInitialized(_this), "styleNeedUpdate", false);
-    _defineProperty(_assertThisInitialized(_this), "forceRender", false);
-    _defineProperty(_assertThisInitialized(_this), "clusterZoom", 0);
-    _defineProperty(_assertThisInitialized(_this), "defaultSourceConfig", {
+let layerIdCounter = 0;
+export default class BaseLayer extends EventEmitter {
+  get shaderModuleService() {
+    return this.container.shaderModuleService;
+  }
+  get cameraService() {
+    return this.container.cameraService;
+  }
+  get coordinateService() {
+    return this.container.coordinateSystemService;
+  }
+  get iconService() {
+    return this.container.iconService;
+  }
+  get fontService() {
+    return this.container.fontService;
+  }
+  get pickingService() {
+    return this.container.pickingService;
+  }
+  get rendererService() {
+    return this.container.rendererService;
+  }
+  get layerService() {
+    return this.container.layerService;
+  }
+  get debugService() {
+    return this.container.debugService;
+  }
+  get interactionService() {
+    return this.container.interactionService;
+  }
+  get mapService() {
+    return this.container.mapService;
+  }
+  get normalPassFactory() {
+    return this.container.normalPassFactory;
+  }
+  constructor(config = {}) {
+    super();
+    _defineProperty(this, "id", `${layerIdCounter++}`);
+    _defineProperty(this, "name", `${layerIdCounter}`);
+    _defineProperty(this, "parent", void 0);
+    _defineProperty(this, "coordCenter", void 0);
+    _defineProperty(this, "type", void 0);
+    _defineProperty(this, "visible", true);
+    _defineProperty(this, "zIndex", 0);
+    _defineProperty(this, "minZoom", void 0);
+    _defineProperty(this, "maxZoom", void 0);
+    _defineProperty(this, "inited", false);
+    _defineProperty(this, "layerModelNeedUpdate", false);
+    _defineProperty(this, "pickedFeatureID", null);
+    _defineProperty(this, "selectedFeatureID", null);
+    _defineProperty(this, "styleNeedUpdate", false);
+    _defineProperty(this, "rendering", void 0);
+    _defineProperty(this, "forceRender", false);
+    _defineProperty(this, "clusterZoom", 0);
+    // 聚合等级标记
+    _defineProperty(this, "layerType", void 0);
+    _defineProperty(this, "triangulation", void 0);
+    _defineProperty(this, "layerPickService", void 0);
+    _defineProperty(this, "textureService", void 0);
+    _defineProperty(this, "defaultSourceConfig", {
       data: [],
       options: {
         parser: {
@@ -64,7 +95,7 @@ var BaseLayer = /*#__PURE__*/function (_ref) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "dataState", {
+    _defineProperty(this, "dataState", {
       dataSourceNeedUpdate: false,
       dataMappingNeedUpdate: false,
       filterNeedUpdate: false,
@@ -72,7 +103,7 @@ var BaseLayer = /*#__PURE__*/function (_ref) {
       StyleAttrNeedUpdate: false
     });
     // 生命周期钩子
-    _defineProperty(_assertThisInitialized(_this), "hooks", {
+    _defineProperty(this, "hooks", {
       init: new AsyncSeriesBailHook(),
       afterInit: new SyncBailHook(),
       beforeRender: new SyncBailHook(),
@@ -88,1472 +119,1149 @@ var BaseLayer = /*#__PURE__*/function (_ref) {
       afterDestroy: new SyncHook()
     });
     // 待渲染 model 列表
-    _defineProperty(_assertThisInitialized(_this), "models", []);
-    _defineProperty(_assertThisInitialized(_this), "startInit", false);
+    _defineProperty(this, "models", []);
+    // 每个 Layer 都有一个
+    _defineProperty(this, "multiPassRenderer", void 0);
+    // 注入插件
+    _defineProperty(this, "plugins", void 0);
+    _defineProperty(this, "startInit", false);
+    _defineProperty(this, "sourceOption", void 0);
+    _defineProperty(this, "layerModel", void 0);
+    _defineProperty(this, "shapeOption", void 0);
+    _defineProperty(this, "tileLayer", void 0);
     // 用于保存子图层对象
-    _defineProperty(_assertThisInitialized(_this), "layerChildren", []);
-    _defineProperty(_assertThisInitialized(_this), "masks", []);
-    _defineProperty(_assertThisInitialized(_this), "configService", globalConfigService);
-    _defineProperty(_assertThisInitialized(_this), "animateOptions", {
+    _defineProperty(this, "layerChildren", []);
+    _defineProperty(this, "masks", []);
+    _defineProperty(this, "configService", globalConfigService);
+    _defineProperty(this, "styleAttributeService", void 0);
+    _defineProperty(this, "layerSource", void 0);
+    _defineProperty(this, "postProcessingPassFactory", void 0);
+    _defineProperty(this, "animateOptions", {
       enable: false
     });
-    _defineProperty(_assertThisInitialized(_this), "currentPickId", null);
-    _defineProperty(_assertThisInitialized(_this), "encodeStyleAttribute", {});
+    /**
+     * 图层容器
+     */
+    _defineProperty(this, "container", void 0);
+    _defineProperty(this, "encodedData", void 0);
+    _defineProperty(this, "currentPickId", null);
+    _defineProperty(this, "rawConfig", void 0);
+    _defineProperty(this, "needUpdateConfig", void 0);
+    _defineProperty(this, "encodeStyleAttribute", {});
     // Shader 的数据映射
-    _defineProperty(_assertThisInitialized(_this), "enableShaderEncodeStyles", []);
+    _defineProperty(this, "enableShaderEncodeStyles", []);
     // 数据层数据映射
-    _defineProperty(_assertThisInitialized(_this), "enableDataEncodeStyles", []);
+    _defineProperty(this, "enableDataEncodeStyles", []);
     /**
      * 待更新样式属性，在初始化阶段完成注册
      */
-    _defineProperty(_assertThisInitialized(_this), "pendingStyleAttributes", []);
-    _defineProperty(_assertThisInitialized(_this), "scaleOptions", {});
-    _defineProperty(_assertThisInitialized(_this), "animateStatus", false);
-    _defineProperty(_assertThisInitialized(_this), "isDestroyed", false);
+    _defineProperty(this, "pendingStyleAttributes", []);
+    _defineProperty(this, "scaleOptions", {});
+    _defineProperty(this, "animateStartTime", void 0);
+    _defineProperty(this, "animateStatus", false);
+    _defineProperty(this, "isDestroyed", false);
     // private pickingPassRender: IPass<'pixelPicking'>;
-    _defineProperty(_assertThisInitialized(_this), "uniformBuffers", []);
-    _defineProperty(_assertThisInitialized(_this), "encodeDataLength", 0);
-    _defineProperty(_assertThisInitialized(_this), "sourceEvent", function () {
-      _this.dataState.dataSourceNeedUpdate = true;
-      var layerConfig = _this.getLayerConfig();
+    _defineProperty(this, "uniformBuffers", []);
+    _defineProperty(this, "encodeDataLength", 0);
+    _defineProperty(this, "sourceEvent", () => {
+      this.dataState.dataSourceNeedUpdate = true;
+      const layerConfig = this.getLayerConfig();
       if (layerConfig && layerConfig.autoFit) {
-        _this.fitBounds(layerConfig.fitBoundsOptions);
+        this.fitBounds(layerConfig.fitBoundsOptions);
       }
-      var autoRender = _this.layerSource.getSourceCfg().autoRender;
+      const autoRender = this.layerSource.getSourceCfg().autoRender;
       if (autoRender) {
-        setTimeout(function () {
-          _this.reRender();
+        setTimeout(() => {
+          this.reRender();
         }, 10);
       }
     });
-    _this.name = config.name || _this.id;
-    _this.zIndex = config.zIndex || 0;
-    _this.rawConfig = config;
-    _this.masks = config.maskLayers || [];
-    return _this;
-  }
-  _createClass(BaseLayer, [{
-    key: "shaderModuleService",
-    get: function get() {
-      return this.container.shaderModuleService;
-    }
-  }, {
-    key: "cameraService",
-    get: function get() {
-      return this.container.cameraService;
-    }
-  }, {
-    key: "coordinateService",
-    get: function get() {
-      return this.container.coordinateSystemService;
-    }
-  }, {
-    key: "iconService",
-    get: function get() {
-      return this.container.iconService;
-    }
-  }, {
-    key: "fontService",
-    get: function get() {
-      return this.container.fontService;
-    }
-  }, {
-    key: "pickingService",
-    get: function get() {
-      return this.container.pickingService;
-    }
-  }, {
-    key: "rendererService",
-    get: function get() {
-      return this.container.rendererService;
-    }
-  }, {
-    key: "layerService",
-    get: function get() {
-      return this.container.layerService;
-    }
-  }, {
-    key: "debugService",
-    get: function get() {
-      return this.container.debugService;
-    }
-  }, {
-    key: "interactionService",
-    get: function get() {
-      return this.container.interactionService;
-    }
-  }, {
-    key: "mapService",
-    get: function get() {
-      return this.container.mapService;
-    }
-  }, {
-    key: "normalPassFactory",
-    get: function get() {
-      return this.container.normalPassFactory;
-    }
-  }, {
-    key: "addMask",
-    value: function addMask(layer) {
-      this.masks.push(layer);
-      this.updateLayerConfig({
-        maskLayers: this.masks
-      });
-      this.enableMask();
-    }
-  }, {
-    key: "removeMask",
-    value: function removeMask(layer) {
-      var layerIndex = this.masks.indexOf(layer);
-      if (layerIndex > -1) {
-        this.masks.splice(layerIndex, 1);
-      }
-      this.updateLayerConfig({
-        maskLayers: this.masks
-      });
-    }
-  }, {
-    key: "disableMask",
-    value: function disableMask() {
-      this.updateLayerConfig({
-        enableMask: false
-      });
-    }
-  }, {
-    key: "enableMask",
-    value: function enableMask() {
-      this.updateLayerConfig({
-        enableMask: true
-      });
+    this.name = config.name || this.id;
+    this.zIndex = config.zIndex || 0;
+    this.rawConfig = config;
+    this.masks = config.maskLayers || [];
+  }
+  addMask(layer) {
+    this.masks.push(layer);
+    this.updateLayerConfig({
+      maskLayers: this.masks
+    });
+    this.enableMask();
+  }
+  removeMask(layer) {
+    const layerIndex = this.masks.indexOf(layer);
+    if (layerIndex > -1) {
+      this.masks.splice(layerIndex, 1);
     }
+    this.updateLayerConfig({
+      maskLayers: this.masks
+    });
+  }
+  disableMask() {
+    this.updateLayerConfig({
+      enableMask: false
+    });
+  }
+  enableMask() {
+    this.updateLayerConfig({
+      enableMask: true
+    });
+  }
 
-    /**
-     * 将废弃
-     * @deprecated
-     */
-  }, {
-    key: "addMaskLayer",
-    value: function addMaskLayer(maskLayer) {
-      this.masks.push(maskLayer);
-    }
+  /**
+   * 将废弃
+   * @deprecated
+   */
+  addMaskLayer(maskLayer) {
+    this.masks.push(maskLayer);
+  }
 
-    /**
-     * 将废弃
-     * @deprecated
-     */
-  }, {
-    key: "removeMaskLayer",
-    value: function removeMaskLayer(maskLayer) {
-      var layerIndex = this.masks.indexOf(maskLayer);
-      if (layerIndex > -1) {
-        this.masks.splice(layerIndex, 1);
-      }
-      maskLayer.destroy();
-    }
-  }, {
-    key: "getAttribute",
-    value: function getAttribute(name) {
-      return this.styleAttributeService.getLayerStyleAttribute(name);
-    }
-  }, {
-    key: "getLayerConfig",
-    value: function getLayerConfig() {
-      return this.configService.getLayerConfig(this.id);
-    }
-  }, {
-    key: "updateLayerConfig",
-    value: function updateLayerConfig(configToUpdate) {
-      var _this2 = this;
-      // 同步 rawConfig
-      Object.keys(configToUpdate).map(function (key) {
-        if (key in _this2.rawConfig) {
-          // @ts-ignore
-          _this2.rawConfig[key] = configToUpdate[key];
-        }
-      });
-      if (!this.startInit) {
-        this.needUpdateConfig = _objectSpread(_objectSpread({}, this.needUpdateConfig), configToUpdate);
-      } else {
-        var sceneId = this.container.id;
+  /**
+   * 将废弃
+   * @deprecated
+   */
+  removeMaskLayer(maskLayer) {
+    const layerIndex = this.masks.indexOf(maskLayer);
+    if (layerIndex > -1) {
+      this.masks.splice(layerIndex, 1);
+    }
+    maskLayer.destroy();
+  }
+  getAttribute(name) {
+    return this.styleAttributeService.getLayerStyleAttribute(name);
+  }
+  getLayerConfig() {
+    return this.configService.getLayerConfig(this.id);
+  }
+  updateLayerConfig(configToUpdate) {
+    // 同步 rawConfig
+    Object.keys(configToUpdate).map(key => {
+      if (key in this.rawConfig) {
         // @ts-ignore
-        // styleDataMapping(configToUpdate, this); // 处理 style 中进行数据映射的属性字段
-        this.configService.setLayerConfig(sceneId, this.id, _objectSpread(_objectSpread(_objectSpread({}, this.configService.getLayerConfig(this.id)), this.needUpdateConfig), configToUpdate));
-        this.needUpdateConfig = {};
+        this.rawConfig[key] = configToUpdate[key];
       }
+    });
+    if (!this.startInit) {
+      this.needUpdateConfig = _objectSpread(_objectSpread({}, this.needUpdateConfig), configToUpdate);
+    } else {
+      const sceneId = this.container.id;
+      // @ts-ignore
+      // styleDataMapping(configToUpdate, this); // 处理 style 中进行数据映射的属性字段
+      this.configService.setLayerConfig(sceneId, this.id, _objectSpread(_objectSpread(_objectSpread({}, this.configService.getLayerConfig(this.id)), this.needUpdateConfig), configToUpdate));
+      this.needUpdateConfig = {};
     }
+  }
 
-    /**
-     * 注入图层容器，父容器为场景容器
-     * RootContainer 1
-     *  -> SceneContainer 1.*
-     *   -> LayerContainer 1.*
-     */
-  }, {
-    key: "setContainer",
-    value: function setContainer(container) {
-      this.container = container;
-    }
-  }, {
-    key: "getContainer",
-    value: function getContainer() {
-      return this.container;
-    }
-  }, {
-    key: "addPlugin",
-    value: function addPlugin(plugin) {
-      this.plugins.push(plugin);
-      return this;
-    }
-  }, {
-    key: "init",
-    value: function () {
-      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _this3 = this;
-        var sceneId, _this$getLayerConfig, enableMultiPassRenderer, passes, _iterator, _step, plugin;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              // 设置配置项
-              sceneId = this.container.id;
-              this.startInit = true;
-              // 初始化图层配置项
-              // const { enableMultiPassRenderer = false } = this.rawConfig;
-              // this.configService.setLayerConfig(sceneId, this.id, {
-              //   enableMultiPassRenderer,
-              // });
-              this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
-              this.layerType = this.rawConfig.layerType;
-
-              // 全局容器服务
-
-              // 场景容器服务
-              _this$getLayerConfig = this.getLayerConfig(), enableMultiPassRenderer = _this$getLayerConfig.enableMultiPassRenderer, passes = _this$getLayerConfig.passes;
-              if (enableMultiPassRenderer && passes !== null && passes !== void 0 && passes.length && passes.length > 0) {
-                // Tip: 兼容 multiPassRender 在 amap1 时存在的图层不同步问题 zoom
-                this.mapService.on('mapAfterFrameChange', function () {
-                  _this3.renderLayers();
-                });
-              }
-              this.postProcessingPassFactory = this.container.postProcessingPassFactory;
-
-              // 图层容器服务
-              this.styleAttributeService = this.container.styleAttributeService;
-              if (enableMultiPassRenderer) {
-                // 按需初始化 瓦片频繁报错
-                this.multiPassRenderer = this.container.multiPassRenderer;
-                this.multiPassRenderer.setLayer(this);
-              }
-              // 完成样式服务注册完成前添加的属性
-              this.pendingStyleAttributes.forEach(function (_ref2) {
-                var attributeName = _ref2.attributeName,
-                  attributeField = _ref2.attributeField,
-                  attributeValues = _ref2.attributeValues,
-                  updateOptions = _ref2.updateOptions;
-                _this3.styleAttributeService.updateStyleAttribute(attributeName, {
-                  // @ts-ignore
-                  scale: _objectSpread({
-                    field: attributeField
-                  }, _this3.splitValuesAndCallbackInAttribute(
-                  // @ts-ignore
-                  attributeValues,
-                  // @ts-ignore
-                  attributeField ? undefined : _this3.getLayerConfig()[attributeName] // 设置了字段不需要设置默认值
-                  ))
-                },
-                // @ts-ignore
-                updateOptions);
-              });
-              this.pendingStyleAttributes = [];
-
-              // 获取插件集
-              this.plugins = createPlugins();
-              // 完成插件注册，传入场景和图层容器内的服务
-              _iterator = _createForOfIteratorHelper(this.plugins);
-              try {
-                for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                  plugin = _step.value;
-                  plugin.apply(this, this.container);
-                }
-                // if (this.getSource().isTile) {
-                //   this.tileLayer = new TileLayer(this);
-                // }
+  /**
+   * 注入图层容器，父容器为场景容器
+   * RootContainer 1
+   *  -> SceneContainer 1.*
+   *   -> LayerContainer 1.*
+   */
+  setContainer(container) {
+    this.container = container;
+  }
+  getContainer() {
+    return this.container;
+  }
+  addPlugin(plugin) {
+    this.plugins.push(plugin);
+    return this;
+  }
+  init() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      // 设置配置项
+      const sceneId = _this.container.id;
+      _this.startInit = true;
+      // 初始化图层配置项
+      // const { enableMultiPassRenderer = false } = this.rawConfig;
+      // this.configService.setLayerConfig(sceneId, this.id, {
+      //   enableMultiPassRenderer,
+      // });
+      _this.configService.setLayerConfig(sceneId, _this.id, _this.rawConfig);
+      _this.layerType = _this.rawConfig.layerType;
 
-                // 初始化其他服务
-              } catch (err) {
-                _iterator.e(err);
-              } finally {
-                _iterator.f();
-              }
-              this.layerPickService = new LayerPickService(this);
+      // 全局容器服务
 
-              // 颜色纹理服务
-              this.textureService = new TextureService(this);
-              this.log(IDebugLog.LayerInitStart);
-              // 触发 init 生命周期插件
-              _context.next = 19;
-              return this.hooks.init.promise();
-            case 19:
-              this.log(IDebugLog.LayerInitEnd);
-              this.inited = true;
-              // add mask layer
-              // 触发初始化完成事件;
-              this.emit('inited', {
-                target: this,
-                type: 'inited'
-              });
-              this.emit('add', {
-                target: this,
-                type: 'add'
-              });
-              this.hooks.afterInit.call();
-            case 24:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function init() {
-        return _init.apply(this, arguments);
-      }
-      return init;
-    }()
-  }, {
-    key: "log",
-    value: function log(logType) {
-      var _this$debugService;
-      var step = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'init';
-      // @ts-ignore 瓦片、瓦片图层目前不参与日志
-      if (this.tileLayer || this.isTileLayer) {
-        return;
-      }
-      var key = "".concat(this.id, ".").concat(step, ".").concat(logType);
-      var values = {
-        id: this.id,
-        type: this.type
-      };
-      (_this$debugService = this.debugService) === null || _this$debugService === void 0 || _this$debugService.log(key, values);
-    }
-  }, {
-    key: "updateModelData",
-    value: function updateModelData(data) {
-      if (data.attributes && data.elements) {
-        this.models.map(function (m) {
-          m.updateAttributesAndElements(data.attributes, data.elements);
+      // 场景容器服务
+      const {
+        enableMultiPassRenderer,
+        passes
+      } = _this.getLayerConfig();
+      if (enableMultiPassRenderer && passes !== null && passes !== void 0 && passes.length && passes.length > 0) {
+        // Tip: 兼容 multiPassRender 在 amap1 时存在的图层不同步问题 zoom
+        _this.mapService.on('mapAfterFrameChange', () => {
+          _this.renderLayers();
         });
-      } else {
-        console.warn('data error');
       }
-    }
-  }, {
-    key: "setLayerPickService",
-    value: function setLayerPickService(layerPickService) {
-      this.layerPickService = layerPickService;
-    }
-    /**
-     * Model初始化前需要更新Model样式
-     */
-  }, {
-    key: "prepareBuildModel",
-    value: function prepareBuildModel() {
-      if (Object.keys(this.needUpdateConfig || {}).length !== 0) {
-        this.updateLayerConfig({});
+      _this.postProcessingPassFactory = _this.container.postProcessingPassFactory;
+
+      // 图层容器服务
+      _this.styleAttributeService = _this.container.styleAttributeService;
+      if (enableMultiPassRenderer) {
+        // 按需初始化 瓦片频繁报错
+        _this.multiPassRenderer = _this.container.multiPassRenderer;
+        _this.multiPassRenderer.setLayer(_this);
       }
+      // 完成样式服务注册完成前添加的属性
+      _this.pendingStyleAttributes.forEach(({
+        attributeName,
+        attributeField,
+        attributeValues,
+        updateOptions
+      }) => {
+        _this.styleAttributeService.updateStyleAttribute(attributeName, {
+          // @ts-ignore
+          scale: _objectSpread({
+            field: attributeField
+          }, _this.splitValuesAndCallbackInAttribute(
+          // @ts-ignore
+          attributeValues,
+          // @ts-ignore
+          attributeField ? undefined : _this.getLayerConfig()[attributeName] // 设置了字段不需要设置默认值
+          ))
+        },
+        // @ts-ignore
+        updateOptions);
+      });
+      _this.pendingStyleAttributes = [];
 
-      // 启动动画
-      var _this$getLayerConfig2 = this.getLayerConfig(),
-        animateOption = _this$getLayerConfig2.animateOption;
-      if (animateOption !== null && animateOption !== void 0 && animateOption.enable) {
-        this.layerService.startAnimate();
-        this.animateStatus = true;
+      // 获取插件集
+      _this.plugins = createPlugins();
+      // 完成插件注册，传入场景和图层容器内的服务
+      for (const plugin of _this.plugins) {
+        plugin.apply(_this, _this.container);
       }
-    }
-  }, {
-    key: "color",
-    value: function color(field, values, updateOptions) {
-      this.updateStyleAttribute('color', field, values, updateOptions);
-      return this;
-    }
+      // if (this.getSource().isTile) {
+      //   this.tileLayer = new TileLayer(this);
+      // }
 
-    // 为对应的图层传入纹理的编号名称（point/image 在 shape 方法中传入纹理名称的方法并不通用）
-  }, {
-    key: "texture",
-    value: function texture(field, values, updateOptions) {
-      this.updateStyleAttribute('texture', field, values, updateOptions);
-      return this;
-    }
-  }, {
-    key: "rotate",
-    value: function rotate(field, values, updateOptions) {
-      this.updateStyleAttribute('rotate', field, values, updateOptions);
-      return this;
+      // 初始化其他服务
+      _this.layerPickService = new LayerPickService(_this);
+
+      // 颜色纹理服务
+      _this.textureService = new TextureService(_this);
+      _this.log(IDebugLog.LayerInitStart);
+      // 触发 init 生命周期插件
+      yield _this.hooks.init.promise();
+      _this.log(IDebugLog.LayerInitEnd);
+      _this.inited = true;
+      // add mask layer
+      // 触发初始化完成事件;
+      _this.emit('inited', {
+        target: _this,
+        type: 'inited'
+      });
+      _this.emit('add', {
+        target: _this,
+        type: 'add'
+      });
+      _this.hooks.afterInit.call();
+    })();
+  }
+  log(logType, step = 'init') {
+    var _this$debugService;
+    // @ts-ignore 瓦片、瓦片图层目前不参与日志
+    if (this.tileLayer || this.isTileLayer) {
+      return;
+    }
+    const key = `${this.id}.${step}.${logType}`;
+    const values = {
+      id: this.id,
+      type: this.type
+    };
+    (_this$debugService = this.debugService) === null || _this$debugService === void 0 || _this$debugService.log(key, values);
+  }
+  updateModelData(data) {
+    if (data.attributes && data.elements) {
+      this.models.map(m => {
+        m.updateAttributesAndElements(data.attributes, data.elements);
+      });
+    } else {
+      console.warn('data error');
     }
-  }, {
-    key: "size",
-    value: function size(field, values, updateOptions) {
-      this.updateStyleAttribute('size', field, values, updateOptions);
-      return this;
+  }
+  setLayerPickService(layerPickService) {
+    this.layerPickService = layerPickService;
+  }
+  /**
+   * Model初始化前需要更新Model样式
+   */
+  prepareBuildModel() {
+    if (Object.keys(this.needUpdateConfig || {}).length !== 0) {
+      this.updateLayerConfig({});
     }
-    // 对mapping后的数据过滤，scale保持不变
-  }, {
-    key: "filter",
-    value: function filter(field, values, updateOptions) {
-      var flag = this.updateStyleAttribute('filter', field, values, updateOptions);
-      this.dataState.dataSourceNeedUpdate = flag && this.inited;
-      return this;
+
+    // 启动动画
+    const {
+      animateOption
+    } = this.getLayerConfig();
+    if (animateOption !== null && animateOption !== void 0 && animateOption.enable) {
+      this.layerService.startAnimate();
+      this.animateStatus = true;
     }
-  }, {
-    key: "shape",
-    value: function shape(field, values, updateOptions) {
-      this.shapeOption = {
-        field: field,
-        values: values
-      };
-      var flag = this.updateStyleAttribute('shape', field, values, updateOptions);
-      this.dataState.dataSourceNeedUpdate = flag && this.inited;
+  }
+  color(field, values, updateOptions) {
+    this.updateStyleAttribute('color', field, values, updateOptions);
+    return this;
+  }
+
+  // 为对应的图层传入纹理的编号名称（point/image 在 shape 方法中传入纹理名称的方法并不通用）
+  texture(field, values, updateOptions) {
+    this.updateStyleAttribute('texture', field, values, updateOptions);
+    return this;
+  }
+  rotate(field, values, updateOptions) {
+    this.updateStyleAttribute('rotate', field, values, updateOptions);
+    return this;
+  }
+  size(field, values, updateOptions) {
+    this.updateStyleAttribute('size', field, values, updateOptions);
+    return this;
+  }
+  // 对mapping后的数据过滤，scale保持不变
+  filter(field, values, updateOptions) {
+    const flag = this.updateStyleAttribute('filter', field, values, updateOptions);
+    this.dataState.dataSourceNeedUpdate = flag && this.inited;
+    return this;
+  }
+  shape(field, values, updateOptions) {
+    this.shapeOption = {
+      field,
+      values
+    };
+    const flag = this.updateStyleAttribute('shape', field, values, updateOptions);
+    this.dataState.dataSourceNeedUpdate = flag && this.inited;
+    return this;
+  }
+  label(field, values, updateOptions) {
+    this.pendingStyleAttributes.push({
+      attributeName: 'label',
+      attributeField: field,
+      attributeValues: values,
+      updateOptions
+    });
+    return this;
+  }
+  animate(options) {
+    let rawAnimate = {};
+    if (isObject(options)) {
+      rawAnimate.enable = true;
+      rawAnimate = _objectSpread(_objectSpread({}, rawAnimate), options);
+    } else {
+      rawAnimate.enable = options;
+    }
+    this.updateLayerConfig({
+      animateOption: rawAnimate
+    });
+    return this;
+  }
+  source(data, options) {
+    if ((data === null || data === void 0 ? void 0 : data.type) === 'source') {
+      // 判断是否为source
+      this.setSource(data);
       return this;
     }
-  }, {
-    key: "label",
-    value: function label(field, values, updateOptions) {
-      this.pendingStyleAttributes.push({
-        attributeName: 'label',
-        attributeField: field,
-        attributeValues: values,
-        updateOptions: updateOptions
+    // 设置source 配置
+    this.sourceOption = {
+      data,
+      options
+    };
+    this.clusterZoom = 0;
+    return this;
+  }
+  setData(data, options) {
+    if (this.inited) {
+      this.dataUpdatelog();
+      this.layerSource.setData(data, options);
+    } else {
+      this.on('inited', () => {
+        this.dataUpdatelog();
+        this.layerSource.setData(data, options);
       });
-      return this;
     }
-  }, {
-    key: "animate",
-    value: function animate(options) {
-      var rawAnimate = {};
-      if (isObject(options)) {
-        rawAnimate.enable = true;
-        rawAnimate = _objectSpread(_objectSpread({}, rawAnimate), options);
-      } else {
-        rawAnimate.enable = options;
-      }
-      this.updateLayerConfig({
-        animateOption: rawAnimate
+    return this;
+  }
+  dataUpdatelog() {
+    this.log(IDebugLog.SourceInitStart, ILayerStage.UPDATE);
+    this.layerSource.once('update', () => {
+      this.log(IDebugLog.SourceInitEnd, ILayerStage.UPDATE);
+    });
+  }
+  style(options) {
+    const {
+        passes
+      } = options,
+      rest = _objectWithoutProperties(options, _excluded);
+    // passes 特殊处理
+    if (passes) {
+      normalizePasses(passes).forEach(pass => {
+        const postProcessingPass = this.multiPassRenderer.getPostProcessor().getPostProcessingPassByName(pass[0]);
+        if (postProcessingPass) {
+          postProcessingPass.updateOptions(pass[1]);
+        }
       });
-      return this;
-    }
-  }, {
-    key: "source",
-    value: function source(data, options) {
-      if ((data === null || data === void 0 ? void 0 : data.type) === 'source') {
-        // 判断是否为source
-        this.setSource(data);
-        return this;
-      }
-      // 设置source 配置
-      this.sourceOption = {
-        data: data,
-        options: options
-      };
-      this.clusterZoom = 0;
-      return this;
     }
-  }, {
-    key: "setData",
-    value: function setData(data, options) {
-      var _this4 = this;
-      this.log(IDebugLog.SourceInitStart, ILayerStage.UPDATE);
-      if (this.inited) {
-        this.layerSource.setData(data, options);
-      } else {
-        this.on('inited', function () {
-          _this4.layerSource.setData(data, options);
-        });
-      }
-      this.layerSource.once('update', function () {
-        _this4.log(IDebugLog.SourceInitEnd, ILayerStage.UPDATE);
-      });
-      return this;
+    // 兼容 borderColor borderWidth
+    // @ts-ignore
+    if (rest.borderColor) {
+      // @ts-ignore
+      rest.stroke = rest.borderColor;
     }
-  }, {
-    key: "style",
-    value: function style(options) {
-      var _this5 = this;
-      var passes = options.passes,
-        rest = _objectWithoutProperties(options, _excluded);
-      // passes 特殊处理
-      if (passes) {
-        normalizePasses(passes).forEach(function (pass) {
-          var postProcessingPass = _this5.multiPassRenderer.getPostProcessor().getPostProcessingPassByName(pass[0]);
-          if (postProcessingPass) {
-            postProcessingPass.updateOptions(pass[1]);
-          }
-        });
-      }
-      // 兼容 borderColor borderWidth
+    // @ts-ignore
+    if (rest.borderWidth) {
       // @ts-ignore
-      if (rest.borderColor) {
-        // @ts-ignore
-        rest.stroke = rest.borderColor;
-      }
+      rest.strokeWidth = rest.borderWidth;
+    }
+
+    // 兼容老版本的写法 ['field, 'value']
+    const newOption = rest;
+    Object.keys(rest).forEach(key => {
       // @ts-ignore
-      if (rest.borderWidth) {
-        // @ts-ignore
-        rest.strokeWidth = rest.borderWidth;
+      const values = rest[key];
+      if (Array.isArray(values) && values.length === 2 && !isNumber(values[0]) && !isNumber(values[1])) {
+        newOption[key] = {
+          field: values[0],
+          value: values[1]
+        };
       }
+    });
+    this.encodeStyle(newOption);
+    this.updateLayerConfig(newOption);
+    return this;
+  }
 
-      // 兼容老版本的写法 ['field, 'value']
-      var newOption = rest;
-      Object.keys(rest).forEach(function (key) {
-        // @ts-ignore
-        var values = rest[key];
-        if (Array.isArray(values) && values.length === 2 && !isNumber(values[0]) && !isNumber(values[1])) {
-          newOption[key] = {
-            field: values[0],
-            value: values[1]
-          };
-        }
-      });
-      this.encodeStyle(newOption);
-      this.updateLayerConfig(newOption);
-      return this;
-    }
-
-    // 参与数据映射的字段 encodeing
-  }, {
-    key: "encodeStyle",
-    value: function encodeStyle(options) {
-      var _this6 = this;
-      Object.keys(options).forEach(function (key) {
-        if (
-        // 需要数据映射
-        [].concat(_toConsumableArray(_this6.enableShaderEncodeStyles), _toConsumableArray(_this6.enableDataEncodeStyles)).includes(key) && isPlainObject(options[key]) && (options[key].field || options[key].value) && !isEqual(_this6.encodeStyleAttribute[key], options[key]) // 防止计算属性重复计算
-        ) {
-          _this6.encodeStyleAttribute[key] = options[key];
-          _this6.updateStyleAttribute(key, options[key].field, options[key].value);
-          if (_this6.inited) {
-            _this6.dataState.dataMappingNeedUpdate = true;
-          }
-        } else {
-          // 不需要数据映射
-          if (_this6.encodeStyleAttribute[key]) {
-            delete _this6.encodeStyleAttribute[key]; // 删除已经存在的属性
-            _this6.dataState.dataSourceNeedUpdate = true;
-          }
+  // 参与数据映射的字段 encodeing
+  encodeStyle(options) {
+    Object.keys(options).forEach(key => {
+      if (
+      // 需要数据映射
+      [...this.enableShaderEncodeStyles, ...this.enableDataEncodeStyles].includes(key) && isPlainObject(options[key]) && (options[key].field || options[key].value) && !isEqual(this.encodeStyleAttribute[key], options[key]) // 防止计算属性重复计算
+      ) {
+        this.encodeStyleAttribute[key] = options[key];
+        this.updateStyleAttribute(key, options[key].field, options[key].value);
+        if (this.inited) {
+          this.dataState.dataMappingNeedUpdate = true;
         }
-      });
-    }
-  }, {
-    key: "scale",
-    value: function scale(field, cfg) {
-      var preOption = _objectSpread({}, this.scaleOptions);
-      if (isObject(field)) {
-        this.scaleOptions = _objectSpread(_objectSpread({}, this.scaleOptions), field);
       } else {
-        this.scaleOptions[field] = cfg;
-      }
-      if (this.styleAttributeService && !isEqual(preOption, this.scaleOptions)) {
-        var scaleOptions = isObject(field) ? field : _defineProperty({}, field, cfg);
-        this.styleAttributeService.updateScaleAttribute(scaleOptions);
+        // 不需要数据映射
+        if (this.encodeStyleAttribute[key]) {
+          delete this.encodeStyleAttribute[key]; // 删除已经存在的属性
+          this.dataState.dataSourceNeedUpdate = true;
+        }
       }
-      return this;
+    });
+  }
+  scale(field, cfg) {
+    const preOption = _objectSpread({}, this.scaleOptions);
+    if (isObject(field)) {
+      this.scaleOptions = _objectSpread(_objectSpread({}, this.scaleOptions), field);
+    } else {
+      this.scaleOptions[field] = cfg;
+    }
+    if (this.styleAttributeService && !isEqual(preOption, this.scaleOptions)) {
+      const scaleOptions = isObject(field) ? field : {
+        [field]: cfg
+      };
+      this.styleAttributeService.updateScaleAttribute(scaleOptions);
     }
+    return this;
+  }
 
-    /**
-     * 渲染所有的图层
-     */
-  }, {
-    key: "renderLayers",
-    value: function renderLayers() {
-      this.rendering = true;
-      this.layerService.reRender();
-      this.rendering = false;
+  /**
+   * 渲染所有的图层
+   */
+  renderLayers() {
+    this.rendering = true;
+    this.layerService.reRender();
+    this.rendering = false;
+  }
+  prerender() {}
+  render(options = {}) {
+    if (this.tileLayer) {
+      // 瓦片图层执行单独的 render 渲染队列
+      this.tileLayer.render();
+      return this;
     }
-  }, {
-    key: "prerender",
-    value: function prerender() {}
-  }, {
-    key: "render",
-    value: function render() {
-      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      if (this.tileLayer) {
-        // 瓦片图层执行单独的 render 渲染队列
-        this.tileLayer.render();
-        return this;
-      }
-      this.layerService.beforeRenderData(this);
-      if (this.encodeDataLength <= 0 && !this.forceRender) {
-        return this;
-      }
-      // Tip: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
-      this.renderModels(options);
+    this.layerService.beforeRenderData(this);
+    if (this.encodeDataLength <= 0 && !this.forceRender) {
       return this;
     }
+    // Tip: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
+    this.renderModels(options);
+    return this;
+  }
 
-    /**
-     * renderMultiPass 专门用于渲染支持 multipass 的 layer
-     */
-  }, {
-    key: "renderMultiPass",
-    value: function () {
-      var _renderMultiPass = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!(this.encodeDataLength <= 0 && !this.forceRender)) {
-                _context2.next = 2;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 2:
-              if (!(this.multiPassRenderer && this.multiPassRenderer.getRenderFlag())) {
-                _context2.next = 7;
-                break;
-              }
-              _context2.next = 5;
-              return this.multiPassRenderer.render();
-            case 5:
-              _context2.next = 8;
-              break;
-            case 7:
-              if (this.multiPassRenderer) {
-                // renderPass 触发的渲染
-                this.renderModels();
-              } else {
-                this.renderModels();
-              }
-            case 8:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function renderMultiPass() {
-        return _renderMultiPass.apply(this, arguments);
+  /**
+   * renderMultiPass 专门用于渲染支持 multipass 的 layer
+   */
+  renderMultiPass() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      if (_this2.encodeDataLength <= 0 && !_this2.forceRender) {
+        return;
       }
-      return renderMultiPass;
-    }()
-  }, {
-    key: "active",
-    value: function active(options) {
-      var activeOption = {};
-      activeOption.enableHighlight = isObject(options) ? true : options;
-      if (isObject(options)) {
-        activeOption.enableHighlight = true;
-        if (options.color) {
-          activeOption.highlightColor = options.color;
-        }
-        if (options.mix) {
-          activeOption.activeMix = options.mix;
-        }
+      if (_this2.multiPassRenderer && _this2.multiPassRenderer.getRenderFlag()) {
+        // multi render 开始执行 multiPassRender 的渲染流程
+        yield _this2.multiPassRenderer.render();
+      } else if (_this2.multiPassRenderer) {
+        // renderPass 触发的渲染
+        _this2.renderModels();
       } else {
-        activeOption.enableHighlight = !!options;
+        _this2.renderModels();
       }
-      this.updateLayerConfig(activeOption);
-      return this;
-    }
-  }, {
-    key: "setActive",
-    value: function setActive(id, options) {
-      var _this7 = this;
-      if (isObject(id)) {
-        var _id$x = id.x,
-          x = _id$x === void 0 ? 0 : _id$x,
-          _id$y = id.y,
-          y = _id$y === void 0 ? 0 : _id$y;
-        this.updateLayerConfig({
-          highlightColor: isObject(options) ? options.color : this.getLayerConfig().highlightColor,
-          activeMix: isObject(options) ? options.mix : this.getLayerConfig().activeMix
-        });
-        this.pick({
-          x: x,
-          y: y
-        });
-      } else {
-        this.updateLayerConfig({
-          pickedFeatureID: id,
-          highlightColor: isObject(options) ? options.color : this.getLayerConfig().highlightColor,
-          activeMix: isObject(options) ? options.mix : this.getLayerConfig().activeMix
-        });
-        this.hooks.beforeHighlight.call(encodePickingColor(id))
-        // @ts-ignore
-        .then(function () {
-          setTimeout(function () {
-            _this7.reRender();
-          }, 1);
-        });
+    })();
+  }
+  active(options) {
+    const activeOption = {};
+    activeOption.enableHighlight = isObject(options) ? true : options;
+    if (isObject(options)) {
+      activeOption.enableHighlight = true;
+      if (options.color) {
+        activeOption.highlightColor = options.color;
       }
-    }
-  }, {
-    key: "select",
-    value: function select(option) {
-      var activeOption = {};
-      activeOption.enableSelect = isObject(option) ? true : option;
-      if (isObject(option)) {
-        activeOption.enableSelect = true;
-        if (option.color) {
-          activeOption.selectColor = option.color;
-        }
-        if (option.mix) {
-          activeOption.selectMix = option.mix;
-        }
-      } else {
-        activeOption.enableSelect = !!option;
+      if (options.mix) {
+        activeOption.activeMix = options.mix;
       }
-      this.updateLayerConfig(activeOption);
-      return this;
+    } else {
+      activeOption.enableHighlight = !!options;
     }
-  }, {
-    key: "setSelect",
-    value: function setSelect(id, options) {
-      var _this8 = this;
-      if (isObject(id)) {
-        var _id$x2 = id.x,
-          x = _id$x2 === void 0 ? 0 : _id$x2,
-          _id$y2 = id.y,
-          y = _id$y2 === void 0 ? 0 : _id$y2;
-        this.updateLayerConfig({
-          selectColor: isObject(options) ? options.color : this.getLayerConfig().selectColor,
-          selectMix: isObject(options) ? options.mix : this.getLayerConfig().selectMix
-        });
-        this.pick({
-          x: x,
-          y: y
-        });
-      } else {
-        this.updateLayerConfig({
-          pickedFeatureID: id,
-          selectColor: isObject(options) ? options.color : this.getLayerConfig().selectColor,
-          selectMix: isObject(options) ? options.mix : this.getLayerConfig().selectMix
-        });
-        this.hooks.beforeSelect.call(encodePickingColor(id))
-        // @ts-ignore
-        .then(function () {
-          setTimeout(function () {
-            _this8.reRender();
-          }, 1);
-        });
-      }
-    }
-  }, {
-    key: "setBlend",
-    value: function setBlend(type) {
+    this.updateLayerConfig(activeOption);
+    return this;
+  }
+  setActive(id, options) {
+    if (isObject(id)) {
+      const {
+        x = 0,
+        y = 0
+      } = id;
       this.updateLayerConfig({
-        blend: type
+        highlightColor: isObject(options) ? options.color : this.getLayerConfig().highlightColor,
+        activeMix: isObject(options) ? options.mix : this.getLayerConfig().activeMix
       });
-      // this.layerModelNeedUpdate = true;
-      this.reRender();
-      return this;
-    }
-  }, {
-    key: "show",
-    value: function show() {
-      this.updateLayerConfig({
-        visible: true
+      this.pick({
+        x,
+        y
       });
-      this.reRender();
-      this.emit('show');
-      return this;
-    }
-  }, {
-    key: "hide",
-    value: function hide() {
+    } else {
       this.updateLayerConfig({
-        visible: false
+        pickedFeatureID: id,
+        highlightColor: isObject(options) ? options.color : this.getLayerConfig().highlightColor,
+        activeMix: isObject(options) ? options.mix : this.getLayerConfig().activeMix
       });
-      this.reRender();
-      this.emit('hide');
-      return this;
-    }
-  }, {
-    key: "setIndex",
-    value: function setIndex(index) {
-      this.zIndex = index;
-      this.layerService.updateLayerRenderList();
-      this.layerService.renderLayers();
-      return this;
-    }
-  }, {
-    key: "setCurrentPickId",
-    value: function setCurrentPickId(id) {
-      this.currentPickId = id;
-    }
-  }, {
-    key: "getCurrentPickId",
-    value: function getCurrentPickId() {
-      return this.currentPickId;
-    }
-  }, {
-    key: "setCurrentSelectedId",
-    value: function setCurrentSelectedId(id) {
-      this.selectedFeatureID = id;
-    }
-  }, {
-    key: "getCurrentSelectedId",
-    value: function getCurrentSelectedId() {
-      return this.selectedFeatureID;
-    }
-  }, {
-    key: "isVisible",
-    value: function isVisible() {
-      var zoom = this.mapService.getZoom();
-      var _this$getLayerConfig3 = this.getLayerConfig(),
-        visible = _this$getLayerConfig3.visible,
-        _this$getLayerConfig4 = _this$getLayerConfig3.minZoom,
-        minZoom = _this$getLayerConfig4 === void 0 ? -Infinity : _this$getLayerConfig4,
-        _this$getLayerConfig5 = _this$getLayerConfig3.maxZoom,
-        maxZoom = _this$getLayerConfig5 === void 0 ? Infinity : _this$getLayerConfig5;
-      return !!visible && zoom >= minZoom && zoom < maxZoom;
-    }
-  }, {
-    key: "setMultiPass",
-    value: function setMultiPass(enableMultiPass, currentPasses) {
-      this.updateLayerConfig({
-        enableMultiPassRenderer: enableMultiPass
+      this.hooks.beforeHighlight.call(encodePickingColor(id))
+      // @ts-ignore
+      .then(() => {
+        setTimeout(() => {
+          this.reRender();
+        }, 1);
       });
-      if (currentPasses) {
-        this.updateLayerConfig({
-          passes: currentPasses
-        });
+    }
+  }
+  select(option) {
+    const activeOption = {};
+    activeOption.enableSelect = isObject(option) ? true : option;
+    if (isObject(option)) {
+      activeOption.enableSelect = true;
+      if (option.color) {
+        activeOption.selectColor = option.color;
       }
-      if (enableMultiPass) {
-        var _this$getLayerConfig6 = this.getLayerConfig(),
-          _this$getLayerConfig7 = _this$getLayerConfig6.passes,
-          passes = _this$getLayerConfig7 === void 0 ? [] : _this$getLayerConfig7;
-        this.multiPassRenderer = createMultiPassRenderer(this, passes, this.postProcessingPassFactory, this.normalPassFactory);
-        this.multiPassRenderer.setRenderFlag(true);
-        var _this$rendererService = this.rendererService.getViewportSize(),
-          width = _this$rendererService.width,
-          height = _this$rendererService.height;
-        this.multiPassRenderer.resize(width, height);
+      if (option.mix) {
+        activeOption.selectMix = option.mix;
       }
-      return this;
+    } else {
+      activeOption.enableSelect = !!option;
     }
-  }, {
-    key: "setMinZoom",
-    value: function setMinZoom(minZoom) {
+    this.updateLayerConfig(activeOption);
+    return this;
+  }
+  setSelect(id, options) {
+    if (isObject(id)) {
+      const {
+        x = 0,
+        y = 0
+      } = id;
       this.updateLayerConfig({
-        minZoom: minZoom
+        selectColor: isObject(options) ? options.color : this.getLayerConfig().selectColor,
+        selectMix: isObject(options) ? options.mix : this.getLayerConfig().selectMix
       });
-      return this;
-    }
-  }, {
-    key: "getMinZoom",
-    value: function getMinZoom() {
-      var _this$getLayerConfig8 = this.getLayerConfig(),
-        minZoom = _this$getLayerConfig8.minZoom;
-      return minZoom;
-    }
-  }, {
-    key: "getMaxZoom",
-    value: function getMaxZoom() {
-      var _this$getLayerConfig9 = this.getLayerConfig(),
-        maxZoom = _this$getLayerConfig9.maxZoom;
-      return maxZoom;
-    }
-  }, {
-    key: "get",
-    value: function get(name) {
-      var cfg = this.getLayerConfig();
+      this.pick({
+        x,
+        y
+      });
+    } else {
+      this.updateLayerConfig({
+        pickedFeatureID: id,
+        selectColor: isObject(options) ? options.color : this.getLayerConfig().selectColor,
+        selectMix: isObject(options) ? options.mix : this.getLayerConfig().selectMix
+      });
+      this.hooks.beforeSelect.call(encodePickingColor(id))
       // @ts-ignore
-      return cfg[name];
+      .then(() => {
+        setTimeout(() => {
+          this.reRender();
+        }, 1);
+      });
     }
-  }, {
-    key: "setMaxZoom",
-    value: function setMaxZoom(maxZoom) {
+  }
+  setBlend(type) {
+    this.updateLayerConfig({
+      blend: type
+    });
+    // this.layerModelNeedUpdate = true;
+    this.reRender();
+    return this;
+  }
+  show() {
+    this.updateLayerConfig({
+      visible: true
+    });
+    this.reRender();
+    this.emit('show');
+    return this;
+  }
+  hide() {
+    this.updateLayerConfig({
+      visible: false
+    });
+    this.reRender();
+    this.emit('hide');
+    return this;
+  }
+  setIndex(index) {
+    this.zIndex = index;
+    this.layerService.updateLayerRenderList();
+    this.layerService.renderLayers();
+    return this;
+  }
+  setCurrentPickId(id) {
+    this.currentPickId = id;
+  }
+  getCurrentPickId() {
+    return this.currentPickId;
+  }
+  setCurrentSelectedId(id) {
+    this.selectedFeatureID = id;
+  }
+  getCurrentSelectedId() {
+    return this.selectedFeatureID;
+  }
+  isVisible() {
+    const zoom = this.mapService.getZoom();
+    const {
+      visible,
+      minZoom = -Infinity,
+      maxZoom = Infinity
+    } = this.getLayerConfig();
+    return !!visible && zoom >= minZoom && zoom < maxZoom;
+  }
+  setMultiPass(enableMultiPass, currentPasses) {
+    this.updateLayerConfig({
+      enableMultiPassRenderer: enableMultiPass
+    });
+    if (currentPasses) {
       this.updateLayerConfig({
-        maxZoom: maxZoom
+        passes: currentPasses
       });
-      return this;
     }
-  }, {
-    key: "setAutoFit",
-    value: function setAutoFit(autoFit) {
+    if (enableMultiPass) {
+      const {
+        passes = []
+      } = this.getLayerConfig();
+      this.multiPassRenderer = createMultiPassRenderer(this, passes, this.postProcessingPassFactory, this.normalPassFactory);
+      this.multiPassRenderer.setRenderFlag(true);
+      const {
+        width,
+        height
+      } = this.rendererService.getViewportSize();
+      this.multiPassRenderer.resize(width, height);
+    }
+    return this;
+  }
+  setMinZoom(minZoom) {
+    this.updateLayerConfig({
+      minZoom
+    });
+    return this;
+  }
+  getMinZoom() {
+    const {
+      minZoom
+    } = this.getLayerConfig();
+    return minZoom;
+  }
+  getMaxZoom() {
+    const {
+      maxZoom
+    } = this.getLayerConfig();
+    return maxZoom;
+  }
+  get(name) {
+    const cfg = this.getLayerConfig();
+    // @ts-ignore
+    return cfg[name];
+  }
+  setMaxZoom(maxZoom) {
+    this.updateLayerConfig({
+      maxZoom
+    });
+    return this;
+  }
+  setAutoFit(autoFit) {
+    this.updateLayerConfig({
+      autoFit
+    });
+    return this;
+  }
+
+  /**
+   * zoom to layer Bounds
+   */
+  fitBounds(fitBoundsOptions) {
+    if (!this.inited) {
       this.updateLayerConfig({
-        autoFit: autoFit
+        autoFit: true
       });
       return this;
     }
-
-    /**
-     * zoom to layer Bounds
-     */
-  }, {
-    key: "fitBounds",
-    value: function fitBounds(fitBoundsOptions) {
-      if (!this.inited) {
-        this.updateLayerConfig({
-          autoFit: true
-        });
-        return this;
-      }
-      var source = this.getSource();
-      var extent = source.extent;
-      var isValid = extent.some(function (v) {
-        return Math.abs(v) === Infinity;
-      });
-      if (isValid) {
-        return this;
-      }
-      this.mapService.fitBounds([[extent[0], extent[1]], [extent[2], extent[3]]], fitBoundsOptions);
+    const source = this.getSource();
+    const extent = source.extent;
+    const isValid = extent.some(v => Math.abs(v) === Infinity);
+    if (isValid) {
       return this;
     }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      var _this$layerModel, _this$multiPassRender, _this$layerModel2, _this$tileLayer, _this$debugService2;
-      var refresh = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      if (this.isDestroyed) {
-        return;
-      }
+    this.mapService.fitBounds([[extent[0], extent[1]], [extent[2], extent[3]]], fitBoundsOptions);
+    return this;
+  }
+  destroy(refresh = true) {
+    var _this$layerModel, _this$multiPassRender, _this$layerModel2, _this$tileLayer, _this$debugService2;
+    if (this.isDestroyed) {
+      return;
+    }
 
-      // destroy all UBOs
-      (_this$layerModel = this.layerModel) === null || _this$layerModel === void 0 || _this$layerModel.uniformBuffers.forEach(function (buffer) {
-        buffer.destroy();
-      });
+    // destroy all UBOs
+    (_this$layerModel = this.layerModel) === null || _this$layerModel === void 0 || _this$layerModel.uniformBuffers.forEach(buffer => {
+      buffer.destroy();
+    });
 
-      // remove child layer
-      this.layerChildren.map(function (child) {
-        return child.destroy(false);
-      });
-      this.layerChildren = [];
+    // remove child layer
+    this.layerChildren.map(child => child.destroy(false));
+    this.layerChildren = [];
 
-      // remove mask list maskfence 掩膜需要销毁
-      var _this$getLayerConfig10 = this.getLayerConfig(),
-        maskfence = _this$getLayerConfig10.maskfence;
-      if (maskfence) {
-        this.masks.map(function (mask) {
-          return mask.destroy(false);
-        });
-        this.masks = [];
-      }
-      this.hooks.beforeDestroy.call();
-      // 清除sources事件
-      this.layerSource.off('update', this.sourceEvent);
-      (_this$multiPassRender = this.multiPassRenderer) === null || _this$multiPassRender === void 0 || _this$multiPassRender.destroy();
-      this.textureService.destroy();
+    // remove mask list maskfence 掩膜需要销毁
+    const {
+      maskfence
+    } = this.getLayerConfig();
+    if (maskfence) {
+      this.masks.map(mask => mask.destroy(false));
+      this.masks = [];
+    }
+    this.hooks.beforeDestroy.call();
+    // 清除sources事件
+    this.layerSource.off('update', this.sourceEvent);
+    (_this$multiPassRender = this.multiPassRenderer) === null || _this$multiPassRender === void 0 || _this$multiPassRender.destroy();
+    this.textureService.destroy();
 
-      // 清除所有属性以及关联的 vao == 销毁所有 => model this.models.forEach((model) => model.destroy());
-      this.styleAttributeService.clearAllAttributes();
+    // 清除所有属性以及关联的 vao == 销毁所有 => model this.models.forEach((model) => model.destroy());
+    this.styleAttributeService.clearAllAttributes();
 
-      // 执行每个图层单独的 clearModels 方法 （清除一些额外的 texture、program、buffer 等）
+    // 执行每个图层单独的 clearModels 方法 （清除一些额外的 texture、program、buffer 等）
 
-      this.hooks.afterDestroy.call();
-      // Tip: 清除各个图层自定义的 models 资源
-      (_this$layerModel2 = this.layerModel) === null || _this$layerModel2 === void 0 || _this$layerModel2.clearModels(refresh);
-      (_this$tileLayer = this.tileLayer) === null || _this$tileLayer === void 0 || _this$tileLayer.destroy();
-      this.models = [];
-      // 清除图层日志（如果有的话：非瓦片相关）
-      (_this$debugService2 = this.debugService) === null || _this$debugService2 === void 0 || _this$debugService2.removeLog(this.id);
-      this.emit('remove', {
-        target: this,
-        type: 'remove'
-      });
-      this.emit('destroy', {
-        target: this,
-        type: 'destroy'
-      });
-      this.removeAllListeners();
-      this.isDestroyed = true;
-    }
-  }, {
-    key: "clear",
-    value: function clear() {
-      this.styleAttributeService.clearAllAttributes();
-      // 销毁所有 model
-    }
-  }, {
-    key: "clearModels",
-    value: function clearModels() {
-      var _this$layerModel3;
-      this.models.forEach(function (model) {
-        return model.destroy();
-      });
-      (_this$layerModel3 = this.layerModel) === null || _this$layerModel3 === void 0 || _this$layerModel3.clearModels();
-      this.models = [];
-    }
-  }, {
-    key: "isDirty",
-    value: function isDirty() {
-      return !!(this.styleAttributeService.getLayerStyleAttributes() || []).filter(function (attribute) {
-        return attribute.needRescale || attribute.needRemapping || attribute.needRegenerateVertices;
-      }).length;
+    this.hooks.afterDestroy.call();
+    // Tip: 清除各个图层自定义的 models 资源
+    (_this$layerModel2 = this.layerModel) === null || _this$layerModel2 === void 0 || _this$layerModel2.clearModels(refresh);
+    (_this$tileLayer = this.tileLayer) === null || _this$tileLayer === void 0 || _this$tileLayer.destroy();
+    this.models = [];
+    // 清除图层日志（如果有的话：非瓦片相关）
+    (_this$debugService2 = this.debugService) === null || _this$debugService2 === void 0 || _this$debugService2.removeLog(this.id);
+    this.emit('remove', {
+      target: this,
+      type: 'remove'
+    });
+    this.emit('destroy', {
+      target: this,
+      type: 'destroy'
+    });
+    this.removeAllListeners();
+    this.isDestroyed = true;
+  }
+  clear() {
+    this.styleAttributeService.clearAllAttributes();
+    // 销毁所有 model
+  }
+  clearModels() {
+    var _this$layerModel3;
+    this.models.forEach(model => model.destroy());
+    (_this$layerModel3 = this.layerModel) === null || _this$layerModel3 === void 0 || _this$layerModel3.clearModels();
+    this.models = [];
+  }
+  isDirty() {
+    return !!(this.styleAttributeService.getLayerStyleAttributes() || []).filter(attribute => attribute.needRescale || attribute.needRemapping || attribute.needRegenerateVertices).length;
+  }
+  // 外部初始化Source
+  setSource(source) {
+    // 解除原 sources 事件
+    if (this.layerSource) {
+      this.layerSource.off('update', this.sourceEvent);
     }
-    // 外部初始化Source
-  }, {
-    key: "setSource",
-    value: function setSource(source) {
-      var _this9 = this;
-      // 解除原 sources 事件
-      if (this.layerSource) {
-        this.layerSource.off('update', this.sourceEvent);
-      }
-      this.layerSource = source;
-      this.clusterZoom = 0;
+    this.layerSource = source;
+    this.clusterZoom = 0;
 
-      // 已 inited 且启用聚合进行更新聚合数据
-      if (this.inited && this.layerSource.cluster) {
-        var zoom = this.mapService.getZoom();
-        this.layerSource.updateClusterData(zoom);
-      }
-      if (this.layerSource.inited) {
-        this.sourceEvent();
-      }
-      // this.layerSource.inited 为 true update 事件不会再触发
-      this.layerSource.on('update', function (_ref4) {
-        var type = _ref4.type;
-        if (_this9.coordCenter === undefined) {
-          var _this9$mapService;
-          var layerCenter = _this9.layerSource.center;
-          _this9.coordCenter = layerCenter;
-          if ((_this9$mapService = _this9.mapService) !== null && _this9$mapService !== void 0 && _this9$mapService.setCoordCenter) {
-            _this9.mapService.setCoordCenter(layerCenter);
-          }
-        }
-        if (type === 'update') {
-          if (_this9.tileLayer) {
-            // 瓦片图层独立更新
-            _this9.tileLayer.reload();
-            return;
-          }
-          // source 初始化不需要处理
-          _this9.sourceEvent();
+    // 已 inited 且启用聚合进行更新聚合数据
+    if (this.inited && this.layerSource.cluster) {
+      const zoom = this.mapService.getZoom();
+      this.layerSource.updateClusterData(zoom);
+    }
+    if (this.layerSource.inited) {
+      this.sourceEvent();
+    }
+    // this.layerSource.inited 为 true update 事件不会再触发
+    this.layerSource.on('update', ({
+      type
+    }) => {
+      if (this.coordCenter === undefined) {
+        var _this$mapService;
+        const layerCenter = this.layerSource.center;
+        this.coordCenter = layerCenter;
+        if ((_this$mapService = this.mapService) !== null && _this$mapService !== void 0 && _this$mapService.setCoordCenter) {
+          this.mapService.setCoordCenter(layerCenter);
         }
-      });
-    }
-  }, {
-    key: "getSource",
-    value: function getSource() {
-      return this.layerSource;
-    }
-  }, {
-    key: "getScaleOptions",
-    value: function getScaleOptions() {
-      return this.scaleOptions;
-    }
-  }, {
-    key: "setEncodedData",
-    value: function setEncodedData(encodedData) {
-      this.encodedData = encodedData;
-      this.encodeDataLength = encodedData.length;
-    }
-  }, {
-    key: "getEncodedData",
-    value: function getEncodedData() {
-      return this.encodedData;
-    }
-  }, {
-    key: "getScale",
-    value: function getScale(name) {
-      return this.styleAttributeService.getLayerAttributeScale(name);
-    }
-  }, {
-    key: "getLegend",
-    value: function getLegend(name) {
-      var _attribute$scale, _scales$, _attribute$scale2;
-      var attribute = this.styleAttributeService.getLayerStyleAttribute(name);
-      var scales = (attribute === null || attribute === void 0 || (_attribute$scale = attribute.scale) === null || _attribute$scale === void 0 ? void 0 : _attribute$scale.scalers) || [];
-      return {
-        type: (_scales$ = scales[0]) === null || _scales$ === void 0 || (_scales$ = _scales$.option) === null || _scales$ === void 0 ? void 0 : _scales$.type,
-        field: attribute === null || attribute === void 0 || (_attribute$scale2 = attribute.scale) === null || _attribute$scale2 === void 0 ? void 0 : _attribute$scale2.field,
-        items: this.getLegendItems(name)
-      };
-    }
-  }, {
-    key: "getLegendItems",
-    value: function getLegendItems(name) {
-      var scale = this.styleAttributeService.getLayerAttributeScale(name);
-      // 函数自定义映射，没有 scale 返回为空数组
-      if (!scale) {
-        return [];
       }
-      if (scale.invertExtent) {
-        // 分段类型  Quantize、Quantile、Threshold
-        var items = scale.range().map(function (item) {
-          return _defineProperty({
-            value: scale.invertExtent(item)
-          }, name, item);
-        });
-        return items;
-      } else if (scale.ticks) {
-        // 连续类型 Continuous (Linear, Power, Log, Identity, Time)
-        var _items = scale.ticks().map(function (item) {
-          return _defineProperty({
-            value: item
-          }, name, scale(item));
-        });
-        return _items;
-      } else if (scale !== null && scale !== void 0 && scale.domain) {
-        // 枚举类型 Cat
-        var _items2 = scale.domain().filter(function (item) {
-          return !isUndefined(item);
-        }).map(function (item) {
-          return _defineProperty({
-            value: item
-          }, name, scale(item));
-        });
-        return _items2;
+      if (type === 'update') {
+        if (this.tileLayer) {
+          // 瓦片图层独立更新
+          this.tileLayer.reload();
+          return;
+        }
+        // source 初始化不需要处理
+        this.sourceEvent();
       }
+    });
+  }
+  getSource() {
+    return this.layerSource;
+  }
+  getScaleOptions() {
+    return this.scaleOptions;
+  }
+  setEncodedData(encodedData) {
+    this.encodedData = encodedData;
+    this.encodeDataLength = encodedData.length;
+  }
+  getEncodedData() {
+    return this.encodedData;
+  }
+  getScale(name) {
+    return this.styleAttributeService.getLayerAttributeScale(name);
+  }
+  getLegend(name) {
+    var _attribute$scale, _scales$, _attribute$scale2;
+    const attribute = this.styleAttributeService.getLayerStyleAttribute(name);
+    const scales = (attribute === null || attribute === void 0 || (_attribute$scale = attribute.scale) === null || _attribute$scale === void 0 ? void 0 : _attribute$scale.scalers) || [];
+    return {
+      type: (_scales$ = scales[0]) === null || _scales$ === void 0 || (_scales$ = _scales$.option) === null || _scales$ === void 0 ? void 0 : _scales$.type,
+      field: attribute === null || attribute === void 0 || (_attribute$scale2 = attribute.scale) === null || _attribute$scale2 === void 0 ? void 0 : _attribute$scale2.field,
+      items: this.getLegendItems(name)
+    };
+  }
+  getLegendItems(name) {
+    const scale = this.styleAttributeService.getLayerAttributeScale(name);
+    // 函数自定义映射，没有 scale 返回为空数组
+    if (!scale) {
       return [];
     }
-  }, {
-    key: "pick",
-    value: function pick(_ref8) {
-      var x = _ref8.x,
-        y = _ref8.y;
-      this.interactionService.triggerHover({
-        x: x,
-        y: y
+    if (scale.invertExtent) {
+      // 分段类型  Quantize、Quantile、Threshold
+      const items = scale.range().map(item => {
+        return {
+          value: scale.invertExtent(item),
+          [name]: item
+        };
       });
+      return items;
+    } else if (scale.ticks) {
+      // 连续类型 Continuous (Linear, Power, Log, Identity, Time)
+      const items = scale.ticks().map(item => {
+        return {
+          value: item,
+          [name]: scale(item)
+        };
+      });
+      return items;
+    } else if (scale !== null && scale !== void 0 && scale.domain) {
+      // 枚举类型 Cat
+      const items = scale.domain().filter(item => !isUndefined(item)).map(item => {
+        return {
+          value: item,
+          [name]: scale(item)
+        };
+      });
+      return items;
     }
-  }, {
-    key: "boxSelect",
-    value: function boxSelect(box, cb) {
-      this.pickingService.boxPickLayer(this, box, cb);
-    }
-  }, {
-    key: "buildLayerModel",
-    value: function () {
-      var _buildLayerModel = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(options) {
-        var _this10 = this;
-        var moduleName, vertexShader, fragmentShader, inject, triangulation, styleOption, _options$pickingEnabl, pickingEnabled, rest, _this$shaderModuleSer, vs, fs, uniforms, createModel;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              moduleName = options.moduleName, vertexShader = options.vertexShader, fragmentShader = options.fragmentShader, inject = options.inject, triangulation = options.triangulation, styleOption = options.styleOption, _options$pickingEnabl = options.pickingEnabled, pickingEnabled = _options$pickingEnabl === void 0 ? true : _options$pickingEnabl, rest = _objectWithoutProperties(options, _excluded2);
-              this.shaderModuleService.registerModule(moduleName, {
-                vs: vertexShader,
-                fs: fragmentShader,
-                inject: inject
-              });
-              _this$shaderModuleSer = this.shaderModuleService.getModule(moduleName), vs = _this$shaderModuleSer.vs, fs = _this$shaderModuleSer.fs, uniforms = _this$shaderModuleSer.uniforms;
-              createModel = this.rendererService.createModel;
-              return _context3.abrupt("return", new Promise(function (resolve) {
-                var _this10$styleAttribut = _this10.styleAttributeService.createAttributesAndIndices(_this10.encodedData, triangulation, styleOption, _this10),
-                  attributes = _this10$styleAttribut.attributes,
-                  elements = _this10$styleAttribut.elements,
-                  count = _this10$styleAttribut.count;
-                var uniformBuffers = [].concat(_toConsumableArray(_this10.layerModel.uniformBuffers), _toConsumableArray(_this10.rendererService.uniformBuffers), [_this10.getLayerUniformBuffer()]);
-                if (pickingEnabled) {
-                  uniformBuffers.push(_this10.getPickingUniformBuffer());
-                }
-                var modelOptions = _objectSpread({
-                  attributes: attributes,
-                  uniforms: uniforms,
-                  fs: fs,
-                  vs: vs,
-                  elements: elements,
-                  blend: BlendTypes[BlendType.normal],
-                  uniformBuffers: uniformBuffers,
-                  textures: _this10.layerModel.textures
-                }, rest);
-                if (count) {
-                  modelOptions.count = count;
-                }
-                var m = createModel(modelOptions);
-                resolve(m);
-              }));
-            case 5:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3, this);
-      }));
-      function buildLayerModel(_x) {
-        return _buildLayerModel.apply(this, arguments);
-      }
-      return buildLayerModel;
-    }()
-  }, {
-    key: "createAttributes",
-    value: function createAttributes(options) {
-      var triangulation = options.triangulation;
-      // @ts-ignore
-      var _this$styleAttributeS = this.styleAttributeService.createAttributes(this.encodedData, triangulation),
-        attributes = _this$styleAttributeS.attributes;
-      return attributes;
-    }
-  }, {
-    key: "getTime",
-    value: function getTime() {
-      return this.layerService.clock.getDelta();
-    }
-  }, {
-    key: "setAnimateStartTime",
-    value: function setAnimateStartTime() {
-      this.animateStartTime = this.layerService.clock.getElapsedTime();
-    }
-  }, {
-    key: "stopAnimate",
-    value: function stopAnimate() {
-      if (this.animateStatus) {
-        this.layerService.stopAnimate();
-        this.animateStatus = false;
-        this.updateLayerConfig({
-          animateOption: {
-            enable: false
-          }
-        });
-      }
+    return [];
+  }
+  pick({
+    x,
+    y
+  }) {
+    this.interactionService.triggerHover({
+      x,
+      y
+    });
+  }
+  boxSelect(box, cb) {
+    this.pickingService.boxPickLayer(this, box, cb);
+  }
+  buildLayerModel(options) {
+    var _this3 = this;
+    return _asyncToGenerator(function* () {
+      const {
+          moduleName,
+          vertexShader,
+          fragmentShader,
+          inject,
+          triangulation,
+          styleOption,
+          pickingEnabled = true
+        } = options,
+        rest = _objectWithoutProperties(options, _excluded2);
+      _this3.shaderModuleService.registerModule(moduleName, {
+        vs: vertexShader,
+        fs: fragmentShader,
+        inject
+      });
+      const {
+        vs,
+        fs,
+        uniforms
+      } = _this3.shaderModuleService.getModule(moduleName);
+      const {
+        createModel
+      } = _this3.rendererService;
+      return new Promise(resolve => {
+        const {
+          attributes,
+          elements,
+          count
+        } = _this3.styleAttributeService.createAttributesAndIndices(_this3.encodedData, triangulation, styleOption, _this3);
+        const uniformBuffers = [..._this3.layerModel.uniformBuffers, ..._this3.rendererService.uniformBuffers, _this3.getLayerUniformBuffer()];
+        if (pickingEnabled) {
+          uniformBuffers.push(_this3.getPickingUniformBuffer());
+        }
+        const modelOptions = _objectSpread({
+          attributes,
+          uniforms,
+          fs,
+          vs,
+          elements,
+          blend: BlendTypes[BlendType.normal],
+          uniformBuffers,
+          textures: _this3.layerModel.textures
+        }, rest);
+        if (count) {
+          modelOptions.count = count;
+        }
+        const m = createModel(modelOptions);
+        resolve(m);
+      });
+    })();
+  }
+  createAttributes(options) {
+    const {
+      triangulation
+    } = options;
+    // @ts-ignore
+    const {
+      attributes
+    } = this.styleAttributeService.createAttributes(this.encodedData, triangulation);
+    return attributes;
+  }
+  getTime() {
+    return this.layerService.clock.getDelta();
+  }
+  setAnimateStartTime() {
+    this.animateStartTime = this.layerService.clock.getElapsedTime();
+  }
+  stopAnimate() {
+    if (this.animateStatus) {
+      this.layerService.stopAnimate();
+      this.animateStatus = false;
+      this.updateLayerConfig({
+        animateOption: {
+          enable: false
+        }
+      });
     }
-  }, {
-    key: "getLayerAnimateTime",
-    value: function getLayerAnimateTime() {
-      return this.layerService.clock.getElapsedTime() - this.animateStartTime;
+  }
+  getLayerAnimateTime() {
+    return this.layerService.clock.getElapsedTime() - this.animateStartTime;
+  }
+  needPick(type) {
+    const {
+      enableHighlight = true,
+      enableSelect = true
+    } = this.getLayerConfig();
+    // 判断layer是否监听事件;
+    let isPick = this.eventNames().indexOf(type) !== -1 || this.eventNames().indexOf('un' + type) !== -1;
+    if ((type === 'click' || type === 'dblclick') && enableSelect) {
+      isPick = true;
+    }
+    if (type === 'mousemove' && (enableHighlight || this.eventNames().indexOf('mouseenter') !== -1 || this.eventNames().indexOf('unmousemove') !== -1 || this.eventNames().indexOf('mouseout') !== -1)) {
+      isPick = true;
+    }
+    return this.isVisible() && isPick;
+  }
+  buildModels() {
+    return _asyncToGenerator(function* () {
+      throw new Error('Method not implemented.');
+    })();
+  }
+  rebuildModels() {
+    var _this4 = this;
+    return _asyncToGenerator(function* () {
+      yield _this4.buildModels();
+    })();
+  }
+  renderMulPass(multiPassRenderer) {
+    return _asyncToGenerator(function* () {
+      yield multiPassRenderer.render();
+    })();
+  }
+  renderModels(options = {}) {
+    // TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
+    if (this.encodeDataLength <= 0 && !this.forceRender) {
+      // 数据为空销毁model
+      this.clearModels();
+      return this;
     }
-  }, {
-    key: "needPick",
-    value: function needPick(type) {
-      var _this$getLayerConfig11 = this.getLayerConfig(),
-        _this$getLayerConfig12 = _this$getLayerConfig11.enableHighlight,
-        enableHighlight = _this$getLayerConfig12 === void 0 ? true : _this$getLayerConfig12,
-        _this$getLayerConfig13 = _this$getLayerConfig11.enableSelect,
-        enableSelect = _this$getLayerConfig13 === void 0 ? true : _this$getLayerConfig13;
-      // 判断layer是否监听事件;
-      var isPick = this.eventNames().indexOf(type) !== -1 || this.eventNames().indexOf('un' + type) !== -1;
-      if ((type === 'click' || type === 'dblclick') && enableSelect) {
-        isPick = true;
-      }
-      if (type === 'mousemove' && (enableHighlight || this.eventNames().indexOf('mouseenter') !== -1 || this.eventNames().indexOf('unmousemove') !== -1 || this.eventNames().indexOf('mouseout') !== -1)) {
-        isPick = true;
-      }
-      return this.isVisible() && isPick;
+    this.hooks.beforeRender.call();
+    this.models.forEach(model => {
+      model.draw({
+        uniforms: this.layerModel.getUninforms(),
+        blend: this.layerModel.getBlend(),
+        stencil: this.layerModel.getStencil(options),
+        textures: this.layerModel.textures
+      }, (options === null || options === void 0 ? void 0 : options.ispick) || false);
+    });
+    this.hooks.afterRender.call();
+    return this;
+  }
+  updateStyleAttribute(type, field, values, updateOptions) {
+    // encode diff
+    const preAttribute = this.configService.getAttributeConfig(this.id) || {};
+    // @ts-ignore
+    if (isEqual(preAttribute[type], {
+      field,
+      values
+    })) {
+      // 检测是否发生更新
+      return false;
     }
-  }, {
-    key: "buildModels",
-    value: function () {
-      var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
-            case 0:
-              throw new Error('Method not implemented.');
-            case 1:
-            case "end":
-              return _context4.stop();
-          }
-        }, _callee4);
-      }));
-      function buildModels() {
-        return _buildModels.apply(this, arguments);
-      }
-      return buildModels;
-    }()
-  }, {
-    key: "rebuildModels",
-    value: function () {
-      var _rebuildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
-            case 0:
-              _context5.next = 2;
-              return this.buildModels();
-            case 2:
-            case "end":
-              return _context5.stop();
-          }
-        }, _callee5, this);
-      }));
-      function rebuildModels() {
-        return _rebuildModels.apply(this, arguments);
-      }
-      return rebuildModels;
-    }()
-  }, {
-    key: "renderMulPass",
-    value: function () {
-      var _renderMulPass = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(multiPassRenderer) {
-        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
-            case 0:
-              _context6.next = 2;
-              return multiPassRenderer.render();
-            case 2:
-            case "end":
-              return _context6.stop();
-          }
-        }, _callee6);
-      }));
-      function renderMulPass(_x2) {
-        return _renderMulPass.apply(this, arguments);
-      }
-      return renderMulPass;
-    }()
-  }, {
-    key: "renderModels",
-    value: function renderModels() {
-      var _this11 = this;
-      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      // TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
-      if (this.encodeDataLength <= 0 && !this.forceRender) {
-        // 数据为空销毁model
-        this.clearModels();
-        return this;
-      }
-      this.hooks.beforeRender.call();
-      this.models.forEach(function (model) {
-        model.draw({
-          uniforms: _this11.layerModel.getUninforms(),
-          blend: _this11.layerModel.getBlend(),
-          stencil: _this11.layerModel.getStencil(options),
-          textures: _this11.layerModel.textures
-        }, (options === null || options === void 0 ? void 0 : options.ispick) || false);
+
+    // 存储 Attribute 瓦片图层使用
+    if (['color', 'size', 'texture', 'rotate', 'filter', 'label', 'shape'].indexOf(type) !== -1) {
+      this.configService.setAttributeConfig(this.id, {
+        [type]: {
+          field,
+          values
+        }
       });
-      this.hooks.afterRender.call();
-      return this;
     }
-  }, {
-    key: "updateStyleAttribute",
-    value: function updateStyleAttribute(type, field, values, updateOptions) {
-      // encode diff
-      var preAttribute = this.configService.getAttributeConfig(this.id) || {};
-      // @ts-ignore
-      if (isEqual(preAttribute[type], {
-        field: field,
-        values: values
-      })) {
-        // 检测是否发生更新
-        return false;
-      }
-
-      // 存储 Attribute 瓦片图层使用
-      if (['color', 'size', 'texture', 'rotate', 'filter', 'label', 'shape'].indexOf(type) !== -1) {
-        this.configService.setAttributeConfig(this.id, _defineProperty({}, type, {
-          field: field,
-          values: values
-        }));
-      }
-      if (!this.startInit) {
-        // 开始初始化执行
-        this.pendingStyleAttributes.push({
-          attributeName: type,
-          attributeField: field,
-          attributeValues: values,
-          updateOptions: updateOptions
-        });
-      } else {
-        this.styleAttributeService.updateStyleAttribute(type, {
-          // @ts-ignore
-          scale: _objectSpread({
-            field: field
-          }, this.splitValuesAndCallbackInAttribute(
-          // @ts-ignore
-          values,
-          // @ts-ignore
-          this.getLayerConfig()[field]))
-        },
+    if (!this.startInit) {
+      // 开始初始化执行
+      this.pendingStyleAttributes.push({
+        attributeName: type,
+        attributeField: field,
+        attributeValues: values,
+        updateOptions
+      });
+    } else {
+      this.styleAttributeService.updateStyleAttribute(type, {
         // @ts-ignore
-        updateOptions);
-      }
-      return true;
-    }
-  }, {
-    key: "getLayerAttributeConfig",
-    value: function getLayerAttributeConfig() {
-      return this.configService.getAttributeConfig(this.id);
-    }
-  }, {
-    key: "getShaderPickStat",
-    value: function getShaderPickStat() {
-      return this.layerService.getShaderPickStat();
+        scale: _objectSpread({
+          field
+        }, this.splitValuesAndCallbackInAttribute(
+        // @ts-ignore
+        values,
+        // @ts-ignore
+        this.getLayerConfig()[field]))
+      },
+      // @ts-ignore
+      updateOptions);
     }
+    return true;
+  }
+  getLayerAttributeConfig() {
+    return this.configService.getAttributeConfig(this.id);
+  }
+  getShaderPickStat() {
+    return this.layerService.getShaderPickStat();
+  }
 
-    /**
-     * 继承空方法
-     * @param time
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "setEarthTime",
-    value: function setEarthTime(time) {
-      console.warn('empty fn');
-    }
+  /**
+   * 继承空方法
+   * @param time
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setEarthTime(time) {
+    console.warn('empty fn');
+  }
 
-    // 数据处理 在数据进行 mapping 生成 encodeData 之前对数据进行处理
-    // 在各个 layer 中继承
-  }, {
-    key: "processData",
-    value: function processData(filterData) {
-      return filterData;
-    }
-  }, {
-    key: "getModelType",
-    value: function getModelType() {
-      throw new Error('Method not implemented.');
-    }
-  }, {
-    key: "getDefaultConfig",
-    value: function getDefaultConfig() {
-      return {};
-    }
-  }, {
-    key: "initLayerModels",
-    value: function () {
-      var _initLayerModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-        var layerUniforms, pickingUniforms;
-        return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-          while (1) switch (_context7.prev = _context7.next) {
-            case 0:
-              this.models.forEach(function (model) {
-                return model.destroy();
-              });
-              this.models = [];
-              this.uniformBuffers.forEach(function (buffer) {
-                buffer.destroy();
-              });
-              this.uniformBuffers = [];
-              // Layer Uniform
-              layerUniforms = this.rendererService.createBuffer({
-                data: new Float32Array(16 + 4).fill(0),
-                // u_Mvp
-                isUBO: true
-              });
-              this.uniformBuffers.push(layerUniforms);
+  // 数据处理 在数据进行 mapping 生成 encodeData 之前对数据进行处理
+  // 在各个 layer 中继承
+  processData(filterData) {
+    return filterData;
+  }
+  getModelType() {
+    throw new Error('Method not implemented.');
+  }
+  getDefaultConfig() {
+    return {};
+  }
+  initLayerModels() {
+    var _this5 = this;
+    return _asyncToGenerator(function* () {
+      _this5.models.forEach(model => model.destroy());
+      _this5.models = [];
+      _this5.uniformBuffers.forEach(buffer => {
+        buffer.destroy();
+      });
+      _this5.uniformBuffers = [];
+      // Layer Uniform
+      const layerUniforms = _this5.rendererService.createBuffer({
+        data: new Float32Array(16 + 4).fill(0),
+        // u_Mvp
+        isUBO: true
+      });
+      _this5.uniformBuffers.push(layerUniforms);
 
-              // Picking Uniform
-              pickingUniforms = this.rendererService.createBuffer({
-                data: new Float32Array(20).fill(0),
-                isUBO: true
-              });
-              this.uniformBuffers.push(pickingUniforms);
-              _context7.next = 10;
-              return this.layerModel.initModels();
-            case 10:
-              this.models = _context7.sent;
-            case 11:
-            case "end":
-              return _context7.stop();
-          }
-        }, _callee7, this);
-      }));
-      function initLayerModels() {
-        return _initLayerModels.apply(this, arguments);
-      }
-      return initLayerModels;
-    }()
-  }, {
-    key: "getLayerUniformBuffer",
-    value: function getLayerUniformBuffer() {
-      return this.uniformBuffers[0];
-    }
-  }, {
-    key: "getPickingUniformBuffer",
-    value: function getPickingUniformBuffer() {
-      return this.uniformBuffers[1];
-    }
-  }, {
-    key: "reRender",
-    value: function reRender() {
-      if (this.inited) {
-        this.layerService.reRender();
-      }
-    }
-  }, {
-    key: "splitValuesAndCallbackInAttribute",
-    value: function splitValuesAndCallbackInAttribute(valuesOrCallback
-    // defaultValues?: unknown[],
-    ) {
-      return {
-        values: isFunction(valuesOrCallback) ? undefined : valuesOrCallback,
-        callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined
-      };
+      // Picking Uniform
+      const pickingUniforms = _this5.rendererService.createBuffer({
+        data: new Float32Array(20).fill(0),
+        isUBO: true
+      });
+      _this5.uniformBuffers.push(pickingUniforms);
+      _this5.models = yield _this5.layerModel.initModels();
+    })();
+  }
+  getLayerUniformBuffer() {
+    return this.uniformBuffers[0];
+  }
+  getPickingUniformBuffer() {
+    return this.uniformBuffers[1];
+  }
+  reRender() {
+    if (this.inited) {
+      this.layerService.reRender();
     }
-  }]);
-  return BaseLayer;
-}(EventEmitter);
-export { BaseLayer as default };
+  }
+  splitValuesAndCallbackInAttribute(valuesOrCallback
+  // defaultValues?: unknown[],
+  ) {
+    return {
+      values: isFunction(valuesOrCallback) ? undefined : valuesOrCallback,
+      callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined
+    };
+  }
+}