@antv/l7-component 2.21.0 → 2.21.2

package/lib/popup/layerPopup.js

@@ -6,368 +6,326 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.LayerPopup = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _l7Utils = require("@antv/l7-utils");
 var _popup = _interopRequireDefault(require("./popup"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-var get = _l7Utils.lodashUtil.get;
-var LayerPopup = exports.default = exports.LayerPopup = /*#__PURE__*/function (_Popup) {
-  (0, _inherits2.default)(LayerPopup, _Popup);
-  var _super = _createSuper(LayerPopup);
-  function LayerPopup() {
-    var _this;
-    (0, _classCallCheck2.default)(this, LayerPopup);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+const {
+  get
+} = _l7Utils.lodashUtil;
+class LayerPopup extends _popup.default {
+  constructor(...args) {
+    super(...args);
     /**
      * 用于统计当前帧当中，layer 被点击的次数
      */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "layerClickCountByFrame", 0);
+    (0, _defineProperty2.default)(this, "layerClickCountByFrame", 0);
     /**
      * 用于保存图层对应的事件回调以及配置信息
      * @protected
      */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "layerConfigMap", new WeakMap());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onLayerClick", function (layer, e) {
-      requestAnimationFrame(function () {
-        if (_this.popupOption.closeOnClick) {
-          _this.layerClickCountByFrame++;
+    (0, _defineProperty2.default)(this, "layerConfigMap", new WeakMap());
+    /**
+     * 当期正在展示的图层以及对应元素 id 的信息
+     * @protected
+     */
+    (0, _defineProperty2.default)(this, "displayFeatureInfo", void 0);
+    (0, _defineProperty2.default)(this, "onLayerClick", (layer, e) => {
+      requestAnimationFrame(() => {
+        if (this.popupOption.closeOnClick) {
+          this.layerClickCountByFrame++;
         }
-        if (_this.isShow && _this.isSameFeature(layer, e.featureId)) {
-          _this.hide();
+        if (this.isShow && this.isSameFeature(layer, e.featureId)) {
+          this.hide();
         } else {
-          var _this$getLayerInfoFra = _this.getLayerInfoFrag(layer, e),
-            title = _this$getLayerInfoFra.title,
-            content = _this$getLayerInfoFra.content;
-          _this.setDOMContent(content);
-          _this.setLnglat(e.lngLat);
-          _this.setTitle(title);
-          _this.setDisplayFeatureInfo({
-            layer: layer,
+          const {
+            title,
+            content
+          } = this.getLayerInfoFrag(layer, e);
+          this.setDOMContent(content);
+          this.setLnglat(e.lngLat);
+          this.setTitle(title);
+          this.setDisplayFeatureInfo({
+            layer,
             featureId: e.featureId
           });
-          _this.show();
+          this.show();
         }
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSceneClick", function () {
-      _this.layerClickCountByFrame = 0;
-      requestAnimationFrame(function () {
-        if (!_this.layerClickCountByFrame) {
-          _this.hide();
+    (0, _defineProperty2.default)(this, "onSceneClick", () => {
+      this.layerClickCountByFrame = 0;
+      requestAnimationFrame(() => {
+        if (!this.layerClickCountByFrame) {
+          this.hide();
         }
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onLayerHide", function () {
-      _this.hide();
-      _this.setDisplayFeatureInfo(undefined);
+    (0, _defineProperty2.default)(this, "onLayerHide", () => {
+      this.hide();
+      this.setDisplayFeatureInfo(undefined);
     });
     /**
      * 覆盖 Popup 中的默认的 closeOnClick 行为
      */
     // tslint:disable-next-line:no-empty
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCloseOnClick", function () {});
-    return _this;
+    (0, _defineProperty2.default)(this, "updateCloseOnClick", () => {});
   }
-  (0, _createClass2.default)(LayerPopup, [{
-    key: "layerConfigItems",
-    get:
-    /**
-     * 当期正在展示的图层以及对应元素 id 的信息
-     * @protected
-     */
-
-    function get() {
-      var _ref;
-      var _this$popupOption = this.popupOption,
-        config = _this$popupOption.config,
-        items = _this$popupOption.items;
-      return (_ref = config !== null && config !== void 0 ? config : items) !== null && _ref !== void 0 ? _ref : [];
-    }
-  }, {
-    key: "addTo",
-    value: function addTo(scene) {
-      (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "addTo", this).call(this, scene);
-      this.bindLayerEvent();
+  get layerConfigItems() {
+    var _ref;
+    const {
+      config,
+      items
+    } = this.popupOption;
+    return (_ref = config !== null && config !== void 0 ? config : items) !== null && _ref !== void 0 ? _ref : [];
+  }
+  addTo(scene) {
+    super.addTo(scene);
+    this.bindLayerEvent();
+    this.hide();
+    return this;
+  }
+  remove() {
+    super.remove();
+    this.unbindLayerEvent();
+    return this;
+  }
+  setOptions(option) {
+    this.unbindLayerEvent();
+    const newOption = (0, _objectSpread2.default)({}, option);
+    const trigger = newOption.trigger || this.popupOption.trigger;
+    const items = newOption.items || this.popupOption.items;
+    const isEmptyItems = (items === null || items === void 0 ? void 0 : items.length) === 0;
+    newOption.followCursor = trigger === 'hover' && !isEmptyItems;
+    const isShow = this.isShow;
+    super.setOptions(newOption);
+    this.bindLayerEvent();
+    if (isEmptyItems || !isShow) {
       this.hide();
-      return this;
-    }
-  }, {
-    key: "remove",
-    value: function remove() {
-      (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "remove", this).call(this);
-      this.unbindLayerEvent();
-      return this;
-    }
-  }, {
-    key: "setOptions",
-    value: function setOptions(option) {
-      this.unbindLayerEvent();
-      var newOption = (0, _objectSpread2.default)({}, option);
-      var trigger = newOption.trigger || this.popupOption.trigger;
-      var items = newOption.items || this.popupOption.items;
-      var isEmptyItems = (items === null || items === void 0 ? void 0 : items.length) === 0;
-      newOption.followCursor = trigger === 'hover' && !isEmptyItems;
-      var isShow = this.isShow;
-      (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "setOptions", this).call(this, newOption);
-      this.bindLayerEvent();
-      if (isEmptyItems || !isShow) {
-        this.hide();
-      }
-      return this;
-    }
-  }, {
-    key: "getDefault",
-    value: function getDefault(option) {
-      var isHoverTrigger = option.trigger === 'hover';
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "getDefault", this).call(this, option)), {}, {
-        trigger: 'hover',
-        followCursor: isHoverTrigger,
-        lngLat: {
-          lng: 0,
-          lat: 0
-        },
-        offsets: [0, 10],
-        closeButton: false,
-        closeOnClick: true,
-        autoClose: false,
-        closeOnEsc: false
-      });
-    }
-
-    /**
-     * 绑定对应的图层事件
-     * @protected
-     */
-  }, {
-    key: "bindLayerEvent",
-    value: function bindLayerEvent() {
-      var _this2 = this;
-      var _this$popupOption2 = this.popupOption,
-        trigger = _this$popupOption2.trigger,
-        closeOnClick = _this$popupOption2.closeOnClick;
-      this.layerConfigItems.forEach(function (configItem) {
-        var _layer$getSource;
-        var layer = _this2.getLayerByConfig(configItem);
-        if (!layer) {
-          return;
-        }
-        var layerInfo = (0, _objectSpread2.default)({}, configItem);
-        if (trigger === 'hover') {
-          var onMouseMove = _this2.onLayerMouseMove.bind(_this2, layer);
-          var onMouseOut = _this2.onLayerMouseOut.bind(_this2, layer);
-          layerInfo.onMouseMove = onMouseMove;
-          layerInfo.onMouseOut = onMouseOut;
-          layer === null || layer === void 0 || layer.on('mousemove', onMouseMove);
-          layer === null || layer === void 0 || layer.on('mouseout', onMouseOut);
-        } else {
-          var _this2$mapsService;
-          var onLayerClick = _this2.onLayerClick.bind(_this2, layer);
-          layerInfo.onClick = onLayerClick;
-          layer === null || layer === void 0 || layer.on('click', onLayerClick);
-          var mapContainer = (_this2$mapsService = _this2.mapsService) === null || _this2$mapsService === void 0 ? void 0 : _this2$mapsService.getMapContainer();
-          if (mapContainer && closeOnClick) {
-            mapContainer.addEventListener('click', _this2.onSceneClick);
-          }
-        }
-        var source = layer === null || layer === void 0 || (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
-        var onSourceUpdate = _this2.onSourceUpdate.bind(_this2);
-        source === null || source === void 0 || source.on('update', onSourceUpdate);
-        layerInfo.onSourceUpdate = onSourceUpdate;
-        _this2.layerConfigMap.set(layer, layerInfo);
-      });
     }
+    return this;
+  }
+  getDefault(option) {
+    const isHoverTrigger = option.trigger === 'hover';
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, super.getDefault(option)), {}, {
+      trigger: 'hover',
+      followCursor: isHoverTrigger,
+      lngLat: {
+        lng: 0,
+        lat: 0
+      },
+      offsets: [0, 10],
+      closeButton: false,
+      closeOnClick: true,
+      autoClose: false,
+      closeOnEsc: false
+    });
+  }
 
-    /**
-     * 解绑对应的图层事件
-     * @protected
-     */
-  }, {
-    key: "unbindLayerEvent",
-    value: function unbindLayerEvent() {
-      var _this3 = this;
-      this.layerConfigItems.forEach(function (configItem) {
-        var _this3$mapsService;
-        var layer = _this3.getLayerByConfig(configItem);
-        var layerInfo = layer && _this3.layerConfigMap.get(layer);
-        if (!layerInfo) {
-          return;
-        }
-        var onMouseMove = layerInfo.onMouseMove,
-          onMouseOut = layerInfo.onMouseOut,
-          onClick = layerInfo.onClick,
-          onSourceUpdate = layerInfo.onSourceUpdate;
-        if (onMouseMove) {
-          layer.off('mousemove', onMouseMove);
-        }
-        if (onMouseOut) {
-          layer.off('mouseout', onMouseOut);
-        }
-        if (onClick) {
-          layer.off('click', onClick);
-        }
-        if (onSourceUpdate) {
-          var _layer$getSource2;
-          layer === null || layer === void 0 || (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 || _layer$getSource2.off('update', onSourceUpdate);
-        }
-        var mapContainer = (_this3$mapsService = _this3.mapsService) === null || _this3$mapsService === void 0 ? void 0 : _this3$mapsService.getMapContainer();
-        if (mapContainer) {
-          mapContainer.removeEventListener('click', _this3.onSceneClick);
+  /**
+   * 绑定对应的图层事件
+   * @protected
+   */
+  bindLayerEvent() {
+    const {
+      trigger,
+      closeOnClick
+    } = this.popupOption;
+    this.layerConfigItems.forEach(configItem => {
+      var _layer$getSource;
+      const layer = this.getLayerByConfig(configItem);
+      if (!layer) {
+        return;
+      }
+      const layerInfo = (0, _objectSpread2.default)({}, configItem);
+      if (trigger === 'hover') {
+        const onMouseMove = this.onLayerMouseMove.bind(this, layer);
+        const onMouseOut = this.onLayerMouseOut.bind(this, layer);
+        layerInfo.onMouseMove = onMouseMove;
+        layerInfo.onMouseOut = onMouseOut;
+        layer === null || layer === void 0 || layer.on('mousemove', onMouseMove);
+        layer === null || layer === void 0 || layer.on('mouseout', onMouseOut);
+      } else {
+        var _this$mapsService;
+        const onLayerClick = this.onLayerClick.bind(this, layer);
+        layerInfo.onClick = onLayerClick;
+        layer === null || layer === void 0 || layer.on('click', onLayerClick);
+        const mapContainer = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getMapContainer();
+        if (mapContainer && closeOnClick) {
+          mapContainer.addEventListener('click', this.onSceneClick);
         }
-      });
-    }
-  }, {
-    key: "onLayerMouseMove",
-    value: function onLayerMouseMove(layer, e) {
-      if (!this.isSameFeature(layer, e.featureId)) {
-        var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
-          title = _this$getLayerInfoFra2.title,
-          content = _this$getLayerInfoFra2.content;
-        this.setDOMContent(content);
-        this.setTitle(title);
-        this.setDisplayFeatureInfo({
-          layer: layer,
-          featureId: e.featureId
-        });
-        this.show();
       }
-    }
+      const source = layer === null || layer === void 0 || (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
+      const onSourceUpdate = this.onSourceUpdate.bind(this);
+      source === null || source === void 0 || source.on('update', onSourceUpdate);
+      layerInfo.onSourceUpdate = onSourceUpdate;
+      this.layerConfigMap.set(layer, layerInfo);
+    });
+  }
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "onLayerMouseOut",
-    value: function onLayerMouseOut(layer, e) {
-      this.setDisplayFeatureInfo(undefined);
-      if (this.isShow) {
-        this.hide();
+  /**
+   * 解绑对应的图层事件
+   * @protected
+   */
+  unbindLayerEvent() {
+    this.layerConfigItems.forEach(configItem => {
+      var _this$mapsService2;
+      const layer = this.getLayerByConfig(configItem);
+      const layerInfo = layer && this.layerConfigMap.get(layer);
+      if (!layerInfo) {
+        return;
+      }
+      const {
+        onMouseMove,
+        onMouseOut,
+        onClick,
+        onSourceUpdate
+      } = layerInfo;
+      if (onMouseMove) {
+        layer.off('mousemove', onMouseMove);
       }
+      if (onMouseOut) {
+        layer.off('mouseout', onMouseOut);
+      }
+      if (onClick) {
+        layer.off('click', onClick);
+      }
+      if (onSourceUpdate) {
+        var _layer$getSource2;
+        layer === null || layer === void 0 || (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 || _layer$getSource2.off('update', onSourceUpdate);
+      }
+      const mapContainer = (_this$mapsService2 = this.mapsService) === null || _this$mapsService2 === void 0 ? void 0 : _this$mapsService2.getMapContainer();
+      if (mapContainer) {
+        mapContainer.removeEventListener('click', this.onSceneClick);
+      }
+    });
+  }
+  onLayerMouseMove(layer, e) {
+    if (!this.isSameFeature(layer, e.featureId)) {
+      const {
+        title,
+        content
+      } = this.getLayerInfoFrag(layer, e);
+      this.setDOMContent(content);
+      this.setTitle(title);
+      this.setDisplayFeatureInfo({
+        layer,
+        featureId: e.featureId
+      });
+      this.show();
     }
-  }, {
-    key: "onSourceUpdate",
-    value: function onSourceUpdate() {
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onLayerMouseOut(layer, e) {
+    this.setDisplayFeatureInfo(undefined);
+    if (this.isShow) {
       this.hide();
-      this.setDisplayFeatureInfo(undefined);
     }
+  }
+  onSourceUpdate() {
+    this.hide();
+    this.setDisplayFeatureInfo(undefined);
+  }
 
-    /**
-     * 通过当前图层和对应选中的元素获取气泡展示的 HTML 内容
-     * @param layer
-     * @param e
-     * @protected
-     */
-  }, {
-    key: "getLayerInfoFrag",
-    value: function getLayerInfoFrag(layer, e) {
-      var layerInfo = this.layerConfigMap.get(layer);
-      var titleFrag;
-      var contentFrag = document.createDocumentFragment();
-      if (layerInfo) {
-        var _feature = e.feature;
-        if (_feature.type === 'Feature' && 'properties' in _feature && 'geometry' in _feature) {
-          _feature = _feature.properties;
-        }
-        var title = layerInfo.title,
-          fields = layerInfo.fields,
-          customContent = layerInfo.customContent;
-        if (title) {
-          titleFrag = document.createDocumentFragment();
-          var titleElement = title instanceof Function ? title(_feature) : title;
-          _l7Utils.DOM.appendElementType(titleFrag, titleElement);
-        }
-        if (customContent) {
-          var content = customContent instanceof Function ? customContent(_feature) : customContent;
-          _l7Utils.DOM.appendElementType(contentFrag, content);
-        } else if (fields !== null && fields !== void 0 && fields.length) {
-          fields === null || fields === void 0 || fields.forEach(function (fieldConfig) {
-            var _ref3, _ref4;
-            var _ref2 = typeof fieldConfig === 'string' ?
-              // tslint:disable-next-line:no-object-literal-type-assertion
-              {
-                field: fieldConfig
-              } : fieldConfig,
-              field = _ref2.field,
-              formatField = _ref2.formatField,
-              formatValue = _ref2.formatValue,
-              getValue = _ref2.getValue;
-            var row = _l7Utils.DOM.create('div', 'l7-layer-popup__row');
-            var value = getValue ? getValue(e.feature) : get(_feature, field);
-            var fieldElement = (_ref3 = formatField instanceof Function ? formatField(field, _feature) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
-            var valueElement = (_ref4 = formatValue instanceof Function ? formatValue(value, _feature) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
-            var fieldSpan = _l7Utils.DOM.create('span', 'l7-layer-popup__key', row);
-            _l7Utils.DOM.appendElementType(fieldSpan, fieldElement);
-            _l7Utils.DOM.appendElementType(fieldSpan, document.createTextNode('：'));
-            var valueSpan = _l7Utils.DOM.create('span', 'l7-layer-popup__value', row);
+  /**
+   * 通过当前图层和对应选中的元素获取气泡展示的 HTML 内容
+   * @param layer
+   * @param e
+   * @protected
+   */
+  getLayerInfoFrag(layer, e) {
+    const layerInfo = this.layerConfigMap.get(layer);
+    let titleFrag;
+    const contentFrag = document.createDocumentFragment();
+    if (layerInfo) {
+      let feature = e.feature;
+      if (feature.type === 'Feature' && 'properties' in feature && 'geometry' in feature) {
+        feature = feature.properties;
+      }
+      const {
+        title,
+        fields,
+        customContent
+      } = layerInfo;
+      if (title) {
+        titleFrag = document.createDocumentFragment();
+        const titleElement = title instanceof Function ? title(feature) : title;
+        _l7Utils.DOM.appendElementType(titleFrag, titleElement);
+      }
+      if (customContent) {
+        const content = customContent instanceof Function ? customContent(feature) : customContent;
+        _l7Utils.DOM.appendElementType(contentFrag, content);
+      } else if (fields !== null && fields !== void 0 && fields.length) {
+        fields === null || fields === void 0 || fields.forEach(fieldConfig => {
+          var _ref2, _ref3;
+          const {
+            field,
+            formatField,
+            formatValue,
+            getValue
+          } = typeof fieldConfig === 'string' ?
+          // tslint:disable-next-line:no-object-literal-type-assertion
+          {
+            field: fieldConfig
+          } : fieldConfig;
+          const row = _l7Utils.DOM.create('div', 'l7-layer-popup__row');
+          const value = getValue ? getValue(e.feature) : get(feature, field);
+          const fieldElement = (_ref2 = formatField instanceof Function ? formatField(field, feature) : formatField) !== null && _ref2 !== void 0 ? _ref2 : field;
+          let valueElement = (_ref3 = formatValue instanceof Function ? formatValue(value, feature) : formatValue) !== null && _ref3 !== void 0 ? _ref3 : value;
+          const fieldSpan = _l7Utils.DOM.create('span', 'l7-layer-popup__key', row);
+          _l7Utils.DOM.appendElementType(fieldSpan, fieldElement);
+          _l7Utils.DOM.appendElementType(fieldSpan, document.createTextNode('：'));
+          const valueSpan = _l7Utils.DOM.create('span', 'l7-layer-popup__value', row);
 
-            // 当 value 中每项元素均为基础数据类型时，用逗号隔开
-            if (Array.isArray(valueElement) && valueElement.every(function (item) {
-              return !(item instanceof Object);
-            })) {
-              valueElement = valueElement.map(function (item) {
-                return String(item);
-              }).join(',');
-            }
-            _l7Utils.DOM.appendElementType(valueSpan, valueElement);
-            contentFrag.appendChild(row);
-          });
-        }
+          // 当 value 中每项元素均为基础数据类型时，用逗号隔开
+          if (Array.isArray(valueElement) && valueElement.every(item => !(item instanceof Object))) {
+            valueElement = valueElement.map(item => String(item)).join(',');
+          }
+          _l7Utils.DOM.appendElementType(valueSpan, valueElement);
+          contentFrag.appendChild(row);
+        });
       }
-      return {
-        title: titleFrag,
-        content: contentFrag
-      };
     }
+    return {
+      title: titleFrag,
+      content: contentFrag
+    };
+  }
 
-    /**
-     * 通过 Layer 配置访问到真实的 Layer 实例
-     * @param configItem
-     * @protected
-     */
-  }, {
-    key: "getLayerByConfig",
-    value: function getLayerByConfig(configItem) {
-      var layer = configItem.layer;
-      if (layer instanceof Object) {
-        return layer;
-      }
-      if (typeof layer === 'string') {
-        return this.layerService.getLayer(layer) || this.layerService.getLayerByName(layer);
-      }
+  /**
+   * 通过 Layer 配置访问到真实的 Layer 实例
+   * @param configItem
+   * @protected
+   */
+  getLayerByConfig(configItem) {
+    const layer = configItem.layer;
+    if (layer instanceof Object) {
+      return layer;
+    }
+    if (typeof layer === 'string') {
+      return this.layerService.getLayer(layer) || this.layerService.getLayerByName(layer);
     }
+  }
 
-    /**
-     * 判断当前展示的 Feature 是否和上一次查看的一致
-     * @param layer
-     * @param featureId
-     * @protected
-     */
-  }, {
-    key: "isSameFeature",
-    value: function isSameFeature(layer, featureId) {
-      var displayFeatureInfo = this.displayFeatureInfo;
-      return displayFeatureInfo && layer === displayFeatureInfo.layer && featureId === displayFeatureInfo.featureId;
+  /**
+   * 判断当前展示的 Feature 是否和上一次查看的一致
+   * @param layer
+   * @param featureId
+   * @protected
+   */
+  isSameFeature(layer, featureId) {
+    const displayFeatureInfo = this.displayFeatureInfo;
+    return displayFeatureInfo && layer === displayFeatureInfo.layer && featureId === displayFeatureInfo.featureId;
+  }
+  setDisplayFeatureInfo(displayFeatureInfo) {
+    const oldDisplayFeatureInfo = this.displayFeatureInfo;
+    if (oldDisplayFeatureInfo) {
+      oldDisplayFeatureInfo.layer.off('hide', this.onLayerHide);
     }
-  }, {
-    key: "setDisplayFeatureInfo",
-    value: function setDisplayFeatureInfo(displayFeatureInfo) {
-      var oldDisplayFeatureInfo = this.displayFeatureInfo;
-      if (oldDisplayFeatureInfo) {
-        oldDisplayFeatureInfo.layer.off('hide', this.onLayerHide);
-      }
-      if (displayFeatureInfo) {
-        displayFeatureInfo.layer.on('hide', this.onLayerHide);
-      }
-      this.displayFeatureInfo = displayFeatureInfo;
+    if (displayFeatureInfo) {
+      displayFeatureInfo.layer.on('hide', this.onLayerHide);
     }
-  }]);
-  return LayerPopup;
-}(_popup.default);
+    this.displayFeatureInfo = displayFeatureInfo;
+  }
+}
+exports.default = exports.LayerPopup = LayerPopup;