@antv/l7-layers 2.25.7 → 2.25.9

package/lib/core/BaseLayer.js

@@ -0,0 +1,1317 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncHook = require("@antv/async-hook");
+var _l7Core = require("@antv/l7-core");
+var _l7Source = require("@antv/l7-source");
+var _l7Utils = require("@antv/l7-utils");
+var _eventemitter = require("eventemitter3");
+var _plugins = require("../plugins");
+var _blend = require("../utils/blend");
+var _multiPassRender = require("../utils/multiPassRender");
+var _LayerPickService = _interopRequireDefault(require("./LayerPickService"));
+var _TextureService = _interopRequireDefault(require("./TextureService"));
+const _excluded = ["passes"],
+  _excluded2 = ["moduleName", "vertexShader", "fragmentShader", "defines", "inject", "triangulation", "styleOption", "pickingEnabled"]; // @ts-ignore
+const {
+  isEqual,
+  isFunction,
+  isNumber,
+  isObject,
+  isPlainObject,
+  isUndefined
+} = _l7Utils.lodashUtil;
+/**
+ * 分配 layer id
+ */
+let layerIdCounter = 0;
+class BaseLayer extends _eventemitter.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() {
+    var _this$container;
+    return (_this$container = this.container) === null || _this$container === void 0 ? void 0 : _this$container.mapService;
+  }
+  get normalPassFactory() {
+    return this.container.normalPassFactory;
+  }
+  constructor(config = {}) {
+    super();
+    (0, _defineProperty2.default)(this, "id", `${layerIdCounter++}`);
+    (0, _defineProperty2.default)(this, "name", `${layerIdCounter}`);
+    (0, _defineProperty2.default)(this, "parent", void 0);
+    (0, _defineProperty2.default)(this, "coordCenter", void 0);
+    (0, _defineProperty2.default)(this, "type", void 0);
+    (0, _defineProperty2.default)(this, "visible", true);
+    (0, _defineProperty2.default)(this, "zIndex", 0);
+    (0, _defineProperty2.default)(this, "minZoom", void 0);
+    (0, _defineProperty2.default)(this, "maxZoom", void 0);
+    (0, _defineProperty2.default)(this, "inited", false);
+    (0, _defineProperty2.default)(this, "layerModelNeedUpdate", false);
+    (0, _defineProperty2.default)(this, "pickedFeatureID", null);
+    (0, _defineProperty2.default)(this, "selectedFeatureID", null);
+    (0, _defineProperty2.default)(this, "styleNeedUpdate", false);
+    (0, _defineProperty2.default)(this, "rendering", void 0);
+    (0, _defineProperty2.default)(this, "forceRender", false);
+    (0, _defineProperty2.default)(this, "clusterZoom", 0);
+    // 聚合等级标记
+    (0, _defineProperty2.default)(this, "layerType", void 0);
+    (0, _defineProperty2.default)(this, "triangulation", void 0);
+    (0, _defineProperty2.default)(this, "layerPickService", void 0);
+    (0, _defineProperty2.default)(this, "textureService", void 0);
+    (0, _defineProperty2.default)(this, "defaultSourceConfig", {
+      data: [],
+      options: {
+        parser: {
+          type: 'json'
+        }
+      }
+    });
+    (0, _defineProperty2.default)(this, "dataState", {
+      dataSourceNeedUpdate: false,
+      dataMappingNeedUpdate: false,
+      filterNeedUpdate: false,
+      featureScaleNeedUpdate: false,
+      StyleAttrNeedUpdate: false
+    });
+    // 生命周期钩子
+    (0, _defineProperty2.default)(this, "hooks", {
+      init: new _asyncHook.AsyncSeriesBailHook(),
+      afterInit: new _asyncHook.SyncBailHook(),
+      beforeRender: new _asyncHook.SyncBailHook(),
+      beforeRenderData: new _asyncHook.AsyncWaterfallHook(),
+      afterRender: new _asyncHook.SyncHook(),
+      beforePickingEncode: new _asyncHook.SyncHook(),
+      afterPickingEncode: new _asyncHook.SyncHook(),
+      beforeHighlight: new _asyncHook.SyncHook(['pickedColor']),
+      afterHighlight: new _asyncHook.SyncHook(),
+      beforeSelect: new _asyncHook.SyncHook(['pickedColor']),
+      afterSelect: new _asyncHook.SyncHook(),
+      beforeDestroy: new _asyncHook.SyncHook(),
+      afterDestroy: new _asyncHook.SyncHook()
+    });
+    // 待渲染 model 列表
+    (0, _defineProperty2.default)(this, "models", []);
+    // 每个 Layer 都有一个
+    (0, _defineProperty2.default)(this, "multiPassRenderer", void 0);
+    // 注入插件
+    (0, _defineProperty2.default)(this, "plugins", void 0);
+    (0, _defineProperty2.default)(this, "startInit", false);
+    (0, _defineProperty2.default)(this, "sourceOption", void 0);
+    (0, _defineProperty2.default)(this, "layerModel", void 0);
+    (0, _defineProperty2.default)(this, "shapeOption", void 0);
+    (0, _defineProperty2.default)(this, "tileLayer", void 0);
+    // 用于保存子图层对象
+    (0, _defineProperty2.default)(this, "layerChildren", []);
+    (0, _defineProperty2.default)(this, "masks", []);
+    (0, _defineProperty2.default)(this, "configService", _l7Core.globalConfigService);
+    (0, _defineProperty2.default)(this, "styleAttributeService", void 0);
+    (0, _defineProperty2.default)(this, "layerSource", void 0);
+    (0, _defineProperty2.default)(this, "postProcessingPassFactory", void 0);
+    (0, _defineProperty2.default)(this, "animateOptions", {
+      enable: false
+    });
+    // 相对坐标系支持
+    (0, _defineProperty2.default)(this, "relativeOrigin", [0, 0]);
+    (0, _defineProperty2.default)(this, "originalExtent", [0, 0, 0, 0]);
+    (0, _defineProperty2.default)(this, "absoluteDataArray", []);
+    // 保存绝对坐标数据用于交互
+    /**
+     * 图层容器
+     */
+    (0, _defineProperty2.default)(this, "container", void 0);
+    (0, _defineProperty2.default)(this, "encodedData", void 0);
+    (0, _defineProperty2.default)(this, "currentPickId", null);
+    (0, _defineProperty2.default)(this, "rawConfig", void 0);
+    (0, _defineProperty2.default)(this, "needUpdateConfig", void 0);
+    (0, _defineProperty2.default)(this, "encodeStyleAttribute", {});
+    // Shader 的数据映射
+    (0, _defineProperty2.default)(this, "enableShaderEncodeStyles", []);
+    // 数据层数据映射
+    (0, _defineProperty2.default)(this, "enableDataEncodeStyles", []);
+    /**
+     * 待更新样式属性，在初始化阶段完成注册
+     */
+    (0, _defineProperty2.default)(this, "pendingStyleAttributes", []);
+    (0, _defineProperty2.default)(this, "scaleOptions", {});
+    (0, _defineProperty2.default)(this, "animateStartTime", 0);
+    (0, _defineProperty2.default)(this, "animateStatus", false);
+    (0, _defineProperty2.default)(this, "isDestroyed", false);
+    // private pickingPassRender: IPass<'pixelPicking'>;
+    (0, _defineProperty2.default)(this, "uniformBuffers", []);
+    (0, _defineProperty2.default)(this, "encodeDataLength", 0);
+    (0, _defineProperty2.default)(this, "sourceEvent", () => {
+      this.dataState.dataSourceNeedUpdate = true;
+      // 处理相对坐标转换
+      this.processRelativeCoordinates();
+      const layerConfig = this.getLayerConfig();
+      if (layerConfig && layerConfig.autoFit) {
+        this.fitBounds(layerConfig.fitBoundsOptions);
+      }
+      const autoRender = this.layerSource.getSourceCfg().autoRender;
+      if (autoRender) {
+        setTimeout(() => {
+          this.reRender();
+        }, 10);
+      }
+    });
+    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
+   */
+  addMaskLayer(maskLayer) {
+    this.masks.push(maskLayer);
+  }
+
+  /**
+   * 将废弃
+   * @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
+        this.rawConfig[key] = configToUpdate[key];
+      }
+    });
+    if (!this.startInit) {
+      this.needUpdateConfig = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.needUpdateConfig), configToUpdate);
+    } else {
+      const sceneId = this.container.id;
+      // @ts-ignore
+      // styleDataMapping(configToUpdate, this); // 处理 style 中进行数据映射的属性字段
+      this.configService.setLayerConfig(sceneId, this.id, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.configService.getLayerConfig(this.id)), this.needUpdateConfig), configToUpdate));
+      this.needUpdateConfig = {};
+    }
+  }
+
+  /**
+   * 注入图层容器，父容器为场景容器
+   * 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 (0, _asyncToGenerator2.default)(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;
+
+      // 全局容器服务
+
+      // 场景容器服务
+      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();
+        });
+      }
+      _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: (0, _objectSpread2.default)({
+            field: attributeField
+          }, _this.splitValuesAndCallbackInAttribute(
+          // @ts-ignore
+          attributeValues,
+          // @ts-ignore
+          attributeField ? undefined : _this.getLayerConfig()[attributeName] // 设置了字段不需要设置默认值
+          ))
+        },
+        // @ts-ignore
+        updateOptions);
+      });
+      _this.pendingStyleAttributes = [];
+
+      // 获取插件集
+      _this.plugins = (0, _plugins.createPlugins)();
+      // 完成插件注册，传入场景和图层容器内的服务
+      for (const plugin of _this.plugins) {
+        plugin.apply(_this, _this.container);
+      }
+      // if (this.getSource().isTile) {
+      //   this.tileLayer = new TileLayer(this);
+      // }
+
+      // 初始化其他服务
+      _this.layerPickService = new _LayerPickService.default(_this);
+
+      // 颜色纹理服务
+      _this.textureService = new _TextureService.default(_this);
+      _this.log(_l7Core.IDebugLog.LayerInitStart);
+      // 触发 init 生命周期插件
+      yield _this.hooks.init.promise();
+      _this.log(_l7Core.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');
+    }
+  }
+  setLayerPickService(layerPickService) {
+    this.layerPickService = layerPickService;
+  }
+  /**
+   * Model初始化前需要更新Model样式
+   */
+  prepareBuildModel() {
+    if (Object.keys(this.needUpdateConfig || {}).length !== 0) {
+      this.updateLayerConfig({});
+    }
+
+    // 启动动画
+    const {
+      animateOption
+    } = this.getLayerConfig();
+    if (animateOption !== null && animateOption !== void 0 && animateOption.enable) {
+      this.layerService.startAnimate();
+      this.animateStatus = true;
+    }
+  }
+  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 = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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;
+    }
+    // 设置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;
+  }
+  dataUpdatelog() {
+    this.log(_l7Core.IDebugLog.SourceInitStart, _l7Core.ILayerStage.UPDATE);
+    this.layerSource.once('update', () => {
+      this.log(_l7Core.IDebugLog.SourceInitEnd, _l7Core.ILayerStage.UPDATE);
+    });
+  }
+  style(options) {
+    const {
+        passes
+      } = options,
+      rest = (0, _objectWithoutProperties2.default)(options, _excluded);
+    // passes 特殊处理
+    if (passes) {
+      (0, _multiPassRender.normalizePasses)(passes).forEach(pass => {
+        const postProcessingPass = this.multiPassRenderer.getPostProcessor().getPostProcessingPassByName(pass[0]);
+        if (postProcessingPass) {
+          postProcessingPass.updateOptions(pass[1]);
+        }
+      });
+    }
+    // 兼容 borderColor borderWidth
+    // @ts-ignore
+    if (rest.borderColor) {
+      // @ts-ignore
+      rest.stroke = rest.borderColor;
+    }
+    // @ts-ignore
+    if (rest.borderWidth) {
+      // @ts-ignore
+      rest.strokeWidth = rest.borderWidth;
+    }
+
+    // 兼容老版本的写法 ['field, 'value']
+    const newOption = rest;
+    Object.keys(rest).forEach(key => {
+      // @ts-ignore
+      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;
+  }
+
+  // 参与数据映射的字段 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;
+        }
+      } else {
+        // 不需要数据映射
+        if (this.encodeStyleAttribute[key]) {
+          delete this.encodeStyleAttribute[key]; // 删除已经存在的属性
+          this.dataState.dataSourceNeedUpdate = true;
+        }
+      }
+    });
+  }
+  scale(field, cfg) {
+    const preOption = (0, _objectSpread2.default)({}, this.scaleOptions);
+    if (isObject(field)) {
+      this.scaleOptions = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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;
+  }
+
+  /**
+   * 渲染所有的图层
+   */
+  renderLayers() {
+    this.rendering = true;
+    this.layerService.reRender();
+    this.rendering = false;
+  }
+  prerender() {}
+  render(options = {}) {
+    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);
+    return this;
+  }
+
+  /**
+   * renderMultiPass 专门用于渲染支持 multipass 的 layer
+   */
+  renderMultiPass() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      if (_this2.encodeDataLength <= 0 && !_this2.forceRender) {
+        return;
+      }
+      if (_this2.multiPassRenderer && _this2.multiPassRenderer.getRenderFlag()) {
+        // multi render 开始执行 multiPassRender 的渲染流程
+        yield _this2.multiPassRenderer.render();
+      } else {
+        _this2.renderModels();
+      }
+    })();
+  }
+  active(options) {
+    const 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;
+      }
+    } else {
+      activeOption.enableHighlight = !!options;
+    }
+    this.updateLayerConfig(activeOption);
+    return this;
+  }
+  setActive(id, options) {
+    if (isObject(id)) {
+      const {
+        x = 0,
+        y = 0
+      } = id;
+      this.updateLayerConfig({
+        highlightColor: isObject(options) ? options.color : this.getLayerConfig().highlightColor,
+        activeMix: isObject(options) ? options.mix : this.getLayerConfig().activeMix
+      });
+      this.pick({
+        x,
+        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((0, _l7Utils.encodePickingColor)(id))
+      // @ts-ignore
+      .then(() => {
+        setTimeout(() => {
+          this.reRender();
+        }, 1);
+      });
+    }
+  }
+  select(option) {
+    const 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;
+    }
+    this.updateLayerConfig(activeOption);
+    return this;
+  }
+  setSelect(id, options) {
+    if (isObject(id)) {
+      const {
+        x = 0,
+        y = 0
+      } = id;
+      this.updateLayerConfig({
+        selectColor: isObject(options) ? options.color : this.getLayerConfig().selectColor,
+        selectMix: isObject(options) ? options.mix : this.getLayerConfig().selectMix
+      });
+      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((0, _l7Utils.encodePickingColor)(id))
+      // @ts-ignore
+      .then(() => {
+        setTimeout(() => {
+          this.reRender();
+        }, 1);
+      });
+    }
+  }
+  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({
+        passes: currentPasses
+      });
+    }
+    if (enableMultiPass) {
+      const {
+        passes = []
+      } = this.getLayerConfig();
+      this.multiPassRenderer = (0, _multiPassRender.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: true
+      });
+      return this;
+    }
+    const source = this.getSource();
+    const extent = source.extent;
+    const isValid = extent.some(v => Math.abs(v) === Infinity);
+    if (isValid) {
+      return this;
+    }
+    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(buffer => {
+      buffer.destroy();
+    });
+
+    // remove child layer
+    this.layerChildren.map(child => child.destroy(false));
+    this.layerChildren = [];
+
+    // 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();
+
+    // 执行每个图层单独的 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;
+  }
+  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);
+    }
+    this.layerSource = source;
+    this.clusterZoom = 0;
+
+    // 已 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) {
+        const layerCenter = this.layerSource.center;
+        this.coordCenter = layerCenter;
+      }
+      if (type === 'update') {
+        if (this.tileLayer) {
+          // 瓦片图层独立更新
+          this.tileLayer.reload();
+          return;
+        }
+        // source 初始化不需要处理
+        this.sourceEvent();
+      }
+      if (type === 'inited') {
+        this.processRelativeCoordinates();
+      }
+    });
+  }
+  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$, _scales$2;
+    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: (_scales$2 = scales[0]) === null || _scales$2 === void 0 ? void 0 : _scales$2.field,
+      items: this.getLegendItems(name)
+    };
+  }
+  getLegendItems(name) {
+    const scale = this.styleAttributeService.getLayerAttributeScale(name);
+    // 函数自定义映射，没有 scale 返回为空数组
+    if (!scale) {
+      return [];
+    }
+    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;
+    }
+    return [];
+  }
+  pick({
+    x,
+    y
+  }) {
+    this.interactionService.triggerHover({
+      x,
+      y
+    });
+  }
+  boxSelect(box, cb) {
+    this.pickingService.boxPickLayer(this, box, cb);
+  }
+  buildLayerModel(options) {
+    var _this3 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const {
+          moduleName,
+          vertexShader,
+          fragmentShader,
+          defines,
+          inject,
+          triangulation,
+          styleOption,
+          pickingEnabled = true
+        } = options,
+        rest = (0, _objectWithoutProperties2.default)(options, _excluded2);
+      _this3.shaderModuleService.registerModule(moduleName, {
+        vs: vertexShader,
+        fs: fragmentShader,
+        defines,
+        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];
+        if (pickingEnabled) {
+          uniformBuffers.push(_this3.getPickingUniformBuffer());
+        }
+        const modelOptions = (0, _objectSpread2.default)({
+          attributes,
+          uniforms,
+          fs,
+          vs,
+          elements,
+          blend: _blend.BlendTypes[_l7Core.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
+        }
+      });
+    }
+  }
+  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 (0, _asyncToGenerator2.default)(function* () {
+      throw new Error('Method not implemented.');
+    })();
+  }
+  rebuildModels() {
+    var _this4 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      yield _this4.buildModels();
+    })();
+  }
+  renderMulPass(multiPassRenderer) {
+    return (0, _asyncToGenerator2.default)(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;
+    }
+    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;
+    }
+
+    // 存储 Attribute 瓦片图层使用
+    if (['color', 'size', 'texture', 'rotate', 'filter', 'label', 'shape'].indexOf(type) !== -1) {
+      this.configService.setAttributeConfig(this.id, {
+        [type]: {
+          field,
+          values
+        }
+      });
+    }
+    if (!this.startInit) {
+      // 开始初始化执行
+      this.pendingStyleAttributes.push({
+        attributeName: type,
+        attributeField: field,
+        attributeValues: values,
+        updateOptions
+      });
+    } else {
+      this.styleAttributeService.updateStyleAttribute(type, {
+        // @ts-ignore
+        scale: (0, _objectSpread2.default)({
+          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
+   */
+
+  setEarthTime(time) {
+    console.warn('empty fn');
+  }
+
+  // 数据处理 在数据进行 mapping 生成 encodeData 之前对数据进行处理
+  // 在各个 layer 中继承
+  processData(filterData) {
+    return filterData;
+  }
+  getModelType() {
+    throw new Error('Method not implemented.');
+  }
+  getDefaultConfig() {
+    return {};
+  }
+
+  /**
+   * 处理相对坐标转换
+   */
+  processRelativeCoordinates() {
+    const layerConfig = this.getLayerConfig();
+    const enableRelativeCoordinates = layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.enableRelativeCoordinates;
+    if (!enableRelativeCoordinates || !this.layerSource || !this.layerSource.data) {
+      return;
+    }
+
+    // 保存原始绝对坐标数据用于交互
+    this.absoluteDataArray = [...this.layerSource.data.dataArray];
+
+    // 处理相对坐标转换
+    const result = (0, _l7Source.processRelativeCoordinates)(this.layerSource.data.dataArray, {
+      enableRelativeCoordinates: true
+    });
+
+    // 更新source数据为相对坐标
+    this.layerSource.data.dataArray = result.dataArray;
+    this.relativeOrigin = result.relativeOrigin;
+    this.originalExtent = result.originalExtent;
+  }
+
+  /**
+   * 获取绝对坐标数据（用于交互计算）
+   */
+  getAbsoluteData() {
+    return this.absoluteDataArray;
+  }
+
+  /**
+   * 获取相对坐标原点
+   */
+  getRelativeOrigin() {
+    return this.relativeOrigin;
+  }
+
+  /**
+   * 获取原始数据范围
+   */
+  getOriginalExtent() {
+    return this.originalExtent;
+  }
+  initLayerModels() {
+    var _this5 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this5.models.forEach(model => model.destroy());
+      _this5.models = [];
+      _this5.uniformBuffers.forEach(buffer => {
+        buffer.destroy();
+      });
+      _this5.uniformBuffers = [];
+
+      // Picking Uniform
+      const pickingUniforms = _this5.rendererService.createBuffer({
+        data: new Float32Array(20).fill(0),
+        isUBO: true,
+        label: 'pickingUniforms'
+      });
+      _this5.uniformBuffers.push(pickingUniforms);
+      _this5.models = yield _this5.layerModel.initModels();
+    })();
+  }
+  getPickingUniformBuffer() {
+    return this.uniformBuffers[0];
+  }
+  reRender() {
+    if (this.inited) {
+      this.layerService.reRender();
+    }
+  }
+  splitValuesAndCallbackInAttribute(valuesOrCallback
+  // defaultValues?: unknown[],
+  ) {
+    return {
+      values: isFunction(valuesOrCallback) ? undefined : valuesOrCallback,
+      callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined
+    };
+  }
+}
+exports.default = BaseLayer;