@antv/l7-component 2.18.2 → 2.19.0

package/lib/popup/layerPopup.js

@@ -0,0 +1,349 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 = /*#__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));
+    /**
+     * 用于统计当前帧当中，layer 被点击的次数
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.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++;
+        }
+        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.displayFeatureInfo = {
+            layer: layer,
+            featureId: e.featureId
+          };
+          _this.show();
+        }
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSceneClick", function () {
+      _this.layerClickCountByFrame = 0;
+      requestAnimationFrame(function () {
+        if (!_this.layerClickCountByFrame) {
+          _this.hide();
+        }
+      });
+    });
+    /**
+     * 覆盖 Popup 中的默认的 closeOnClick 行为
+     */
+    // tslint:disable-next-line:no-empty
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCloseOnClick", function () {});
+    return _this;
+  }
+  (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();
+      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();
+      (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "setOptions", this).call(this, option);
+      this.bindLayerEvent();
+      return this;
+    }
+  }, {
+    key: "getDefault",
+    value: function getDefault(option) {
+      var isClickTrigger = option.trigger === 'click';
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "getDefault", this).call(this, option)), {}, {
+        trigger: 'hover',
+        followCursor: !isClickTrigger,
+        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 ? void 0 : layer.on('mousemove', onMouseMove);
+          layer === null || layer === void 0 ? 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 ? 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 ? void 0 : (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
+        var onSourceUpdate = _this2.onSourceUpdate.bind(_this2, layer);
+        source === null || source === void 0 ? void 0 : source.on('update', onSourceUpdate);
+        layerInfo.onSourceUpdate = onSourceUpdate;
+        _this2.layerConfigMap.set(layer, layerInfo);
+      });
+    }
+
+    /**
+     * 解绑对应的图层事件
+     * @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 ? void 0 : (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 ? 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);
+        }
+      });
+    }
+  }, {
+    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.displayFeatureInfo = {
+          layer: layer,
+          featureId: e.featureId
+        };
+        this.show();
+      }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  }, {
+    key: "onLayerMouseOut",
+    value: function onLayerMouseOut(layer, e) {
+      this.displayFeatureInfo = undefined;
+      if (this.isShow) {
+        this.hide();
+      }
+    }
+  }, {
+    key: "onSourceUpdate",
+    value: function onSourceUpdate(layer) {
+      this.hide();
+      this.displayFeatureInfo = 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 ? 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);
+
+            // 当 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);
+          });
+        }
+      }
+      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);
+      }
+    }
+
+    /**
+     * 判断当前展示的 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;
+    }
+  }]);
+  return LayerPopup;
+}(_popup.default);
+exports.default = exports.LayerPopup = LayerPopup;