@antv/l7-component 2.18.2 → 2.19.0

package/es/popup/popup.js

@@ -0,0 +1,575 @@
+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";
+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; } }
+import { TYPES } from '@antv/l7-core';
+import { anchorTranslate, anchorType, applyAnchorClass, DOM } from '@antv/l7-utils';
+import { EventEmitter } from 'eventemitter3';
+import { createL7Icon } from "../utils/icon";
+export { Popup };
+var Popup = /*#__PURE__*/function (_EventEmitter) {
+  _inherits(Popup, _EventEmitter);
+  var _super = _createSuper(Popup);
+  function Popup(cfg) {
+    var _this;
+    _classCallCheck(this, Popup);
+    _this = _super.call(this);
+    /**
+     * 配置
+     * @protected
+     */
+    /**
+     * 关闭按钮对应的 DOM
+     * @protected
+     */
+    /**
+     * Popup 的总容器 DOM，包含 content 和 tip
+     * @protected
+     */
+    /**
+     * popup 气泡容器
+     * @protected
+     */
+    /**
+     * popup 气泡标题
+     * @protected
+     */
+    /**
+     * popup 内容容器
+     * @protected
+     */
+    /**
+     * 气泡箭头对应的 DOM
+     * @protected
+     */
+    /**
+     * 当前是否展示
+     * @protected
+     */
+    _defineProperty(_assertThisInitialized(_this), "isShow", true);
+    _defineProperty(_assertThisInitialized(_this), "onMouseMove", function (e) {
+      var _container$getBoundin;
+      var container = _this.mapsService.getMapContainer();
+      var _ref = (_container$getBoundin = container === null || container === void 0 ? void 0 : container.getBoundingClientRect()) !== null && _container$getBoundin !== void 0 ? _container$getBoundin : {},
+        _ref$left = _ref.left,
+        left = _ref$left === void 0 ? 0 : _ref$left,
+        _ref$top = _ref.top,
+        top = _ref$top === void 0 ? 0 : _ref$top;
+      _this.setPopupPosition(e.clientX - left, e.clientY - top);
+    });
+    /**
+     * 将经纬度转换成对应的像素偏移位置
+     * @protected
+     */
+    _defineProperty(_assertThisInitialized(_this), "updateLngLatPosition", function () {
+      if (!_this.mapsService || _this.popupOption.followCursor) {
+        return;
+      }
+      var _this$lngLat = _this.lngLat,
+        lng = _this$lngLat.lng,
+        lat = _this$lngLat.lat;
+      var _this$mapsService$lng = _this.mapsService.lngLatToContainer([lng, lat]),
+        x = _this$mapsService$lng.x,
+        y = _this$mapsService$lng.y;
+      _this.setPopupPosition(x, y);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
+      if (e.keyCode === 27) {
+        _this.remove();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onCloseButtonClick", function (e) {
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      _this.hide();
+    });
+    _defineProperty(_assertThisInitialized(_this), "update", function () {
+      var hasPosition = !!_this.lngLat;
+      var _this$popupOption = _this.popupOption,
+        className = _this$popupOption.className,
+        style = _this$popupOption.style,
+        maxWidth = _this$popupOption.maxWidth,
+        anchor = _this$popupOption.anchor,
+        stopPropagation = _this$popupOption.stopPropagation;
+      if (!_this.mapsService || !hasPosition || !_this.content) {
+        return;
+      }
+      var popupContainer = _this.mapsService.getMarkerContainer();
+      // 如果当前没有创建 Popup 容器则创建
+      if (!_this.container && popupContainer) {
+        _this.container = DOM.create('div', "l7-popup ".concat(className !== null && className !== void 0 ? className : '', " ").concat(!_this.isShow ? 'l7-popup-hide' : ''), popupContainer);
+        if (style) {
+          _this.container.setAttribute('style', style);
+        }
+        _this.tip = DOM.create('div', 'l7-popup-tip', _this.container);
+        _this.container.appendChild(_this.content);
+
+        // 高德地图需要阻止事件冒泡 // 测试mapbox 地图不需要添加
+        if (stopPropagation) {
+          ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick'].forEach(function (type) {
+            _this.container.addEventListener(type, function (e) {
+              e.stopPropagation();
+            });
+          });
+        }
+        _this.container.style.whiteSpace = 'nowrap';
+      }
+      _this.updateLngLatPosition();
+      DOM.setTransform(_this.container, "".concat(anchorTranslate[anchor]));
+      applyAnchorClass(_this.container, anchor, 'popup');
+      if (maxWidth) {
+        var _this$container$getBo = _this.container.getBoundingClientRect(),
+          width = _this$container$getBo.width;
+        if (width > parseFloat(maxWidth)) {
+          _this.container.style.width = maxWidth;
+        }
+      } else {
+        _this.container.style.removeProperty('width');
+      }
+    });
+    _this.popupOption = _objectSpread(_objectSpread({}, _this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
+    var lngLat = _this.popupOption.lngLat;
+    if (lngLat) {
+      _this.lngLat = lngLat;
+    }
+    return _this;
+  }
+  _createClass(Popup, [{
+    key: "lngLat",
+    get: function get() {
+      var _this$popupOption$lng;
+      return (_this$popupOption$lng = this.popupOption.lngLat) !== null && _this$popupOption$lng !== void 0 ? _this$popupOption$lng : {
+        lng: 0,
+        lat: 0
+      };
+    },
+    set: function set(newLngLat) {
+      this.popupOption.lngLat = newLngLat;
+    }
+  }, {
+    key: "getIsShow",
+    value: function getIsShow() {
+      return this.isShow;
+    }
+  }, {
+    key: "addTo",
+    value: function addTo(scene) {
+      this.mapsService = scene.get(TYPES.IMapService);
+      this.sceneService = scene.get(TYPES.ISceneService);
+      this.layerService = scene.get(TYPES.ILayerService);
+      this.mapsService.on('camerachange', this.update);
+      this.mapsService.on('viewchange', this.update);
+      this.scene = scene;
+      this.update();
+      // 临时关闭
+      this.updateCloseOnClick();
+      this.updateCloseOnEsc();
+      this.updateFollowCursor();
+      var _this$popupOption2 = this.popupOption,
+        html = _this$popupOption2.html,
+        text = _this$popupOption2.text,
+        title = _this$popupOption2.title;
+      if (html) {
+        this.setHTML(html);
+      } else if (text) {
+        this.setText(text);
+      }
+      if (title) {
+        this.setTitle(title);
+      }
+      this.emit('open');
+      return this;
+    }
+
+    // 移除popup
+  }, {
+    key: "remove",
+    value: function remove() {
+      if (!(this !== null && this !== void 0 && this.isOpen())) {
+        return;
+      }
+      if (this.content) {
+        DOM.remove(this.content);
+      }
+      if (this.container) {
+        DOM.remove(this.container);
+        // @ts-ignore
+        delete this.container;
+      }
+      if (this.mapsService) {
+        // TODO: mapbox AMap 事件同步
+        this.mapsService.off('camerachange', this.update);
+        this.mapsService.off('viewchange', this.update);
+        this.updateCloseOnClick(true);
+        this.updateCloseOnEsc(true);
+        this.updateFollowCursor(true);
+        // @ts-ignore
+        delete this.mapsService;
+      }
+      this.emit('close');
+      return this;
+    }
+
+    /**
+     * 获取 option 配置
+     */
+  }, {
+    key: "getOptions",
+    value: function getOptions() {
+      return this.popupOption;
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(option) {
+      this.show();
+      this.popupOption = _objectSpread(_objectSpread({}, this.popupOption), option);
+      if (this.checkUpdateOption(option, ['html', 'text', 'title', 'closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'className', 'style', 'lngLat', 'offsets'])) {
+        if (this.container) {
+          DOM.remove(this.container);
+          // @ts-ignore
+          this.container = undefined;
+        }
+        if (this.popupOption.html) {
+          this.setHTML(this.popupOption.html);
+        } else if (this.popupOption.text) {
+          this.setText(this.popupOption.text);
+        }
+        if (this.popupOption.title) {
+          this.setTitle(this.popupOption.title);
+        }
+      }
+      if (this.checkUpdateOption(option, ['closeOnEsc'])) {
+        this.updateCloseOnEsc();
+      }
+      if (this.checkUpdateOption(option, ['closeOnClick'])) {
+        this.updateCloseOnClick();
+      }
+      if (this.checkUpdateOption(option, ['followCursor'])) {
+        this.updateFollowCursor();
+      }
+      if (this.checkUpdateOption(option, ['html']) && option.html) {
+        this.setHTML(option.html);
+      } else if (this.checkUpdateOption(option, ['text']) && option.text) {
+        this.setText(option.text);
+      }
+      if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
+        this.setLnglat(option.lngLat);
+      }
+      return this;
+    }
+  }, {
+    key: "open",
+    value: function open() {
+      this.addTo(this.scene);
+      return this;
+    }
+  }, {
+    key: "close",
+    value: function close() {
+      this.remove();
+      return this;
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.isShow) {
+        return;
+      }
+      if (this.container) {
+        DOM.removeClass(this.container, 'l7-popup-hide');
+      }
+      this.isShow = true;
+      this.emit('show');
+      return this;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (!this.isShow) {
+        return;
+      }
+      if (this.container) {
+        DOM.addClass(this.container, 'l7-popup-hide');
+      }
+      this.isShow = false;
+      this.emit('hide');
+      return this;
+    }
+
+    /**
+     * 设置 HTML 内容
+     * @param html
+     */
+  }, {
+    key: "setHTML",
+    value: function setHTML(html) {
+      this.popupOption.html = html;
+      return this.setDOMContent(html);
+    }
+
+    /**
+     * 设置 Popup 展示文本
+     * @param text
+     */
+  }, {
+    key: "setText",
+    value: function setText(text) {
+      this.popupOption.text = text;
+      return this.setDOMContent(window.document.createTextNode(text));
+    }
+  }, {
+    key: "setTitle",
+    value: function setTitle(title) {
+      this.show();
+      this.popupOption.title = title;
+      if (title) {
+        if (!this.contentTitle) {
+          this.contentTitle = DOM.create('div', 'l7-popup-content__title');
+          if (this.content.firstChild) {
+            this.content.insertBefore(this.contentTitle, this.content.firstChild);
+          } else {
+            this.content.append(this.contentTitle);
+          }
+        }
+        DOM.clearChildren(this.contentTitle);
+        DOM.appendElementType(this.contentTitle, title);
+      } else if (this.contentTitle) {
+        DOM.remove(this.contentTitle);
+        this.contentTitle = undefined;
+      }
+    }
+
+    /**
+     * 将地图自动平移到气泡位置
+     */
+  }, {
+    key: "panToPopup",
+    value: function panToPopup() {
+      var _this$lngLat2 = this.lngLat,
+        lng = _this$lngLat2.lng,
+        lat = _this$lngLat2.lat;
+      if (this.popupOption.autoPan) {
+        this.mapsService.panTo([lng, lat]);
+      }
+      return this;
+    }
+  }, {
+    key: "setLngLat",
+    value: function setLngLat(lngLat) {
+      return this.setLnglat(lngLat);
+    }
+
+    /**
+     * 设置 Popup 所在经纬度
+     * @param lngLat
+     */
+  }, {
+    key: "setLnglat",
+    value: function setLnglat(lngLat) {
+      var _this2 = this;
+      this.show();
+      this.lngLat = lngLat;
+      if (Array.isArray(lngLat)) {
+        this.lngLat = {
+          lng: lngLat[0],
+          lat: lngLat[1]
+        };
+      }
+      if (this.mapsService) {
+        // 防止事件重复监听
+        this.mapsService.off('camerachange', this.update);
+        this.mapsService.off('viewchange', this.update);
+        this.mapsService.on('camerachange', this.update);
+        this.mapsService.on('viewchange', this.update);
+      }
+      this.update();
+      if (this.popupOption.autoPan) {
+        setTimeout(function () {
+          _this2.panToPopup();
+        }, 0);
+      }
+      return this;
+    }
+
+    /**
+     * 获取 Popup 所在经纬度
+     */
+  }, {
+    key: "getLnglat",
+    value: function getLnglat() {
+      return this.lngLat;
+    }
+
+    /**
+     * 设置 Popup 最大宽度
+     * @param maxWidth
+     */
+  }, {
+    key: "setMaxWidth",
+    value: function setMaxWidth(maxWidth) {
+      this.popupOption.maxWidth = maxWidth;
+      this.update();
+      return this;
+    }
+  }, {
+    key: "isOpen",
+    value: function isOpen() {
+      return !!this.mapsService;
+    }
+  }, {
+    key: "getDefault",
+    value:
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function getDefault(option) {
+      // tslint:disable-next-line:no-object-literal-type-assertion
+      return {
+        closeButton: true,
+        closeOnClick: false,
+        maxWidth: '240px',
+        offsets: [0, 0],
+        anchor: anchorType.BOTTOM,
+        stopPropagation: true,
+        autoPan: false,
+        autoClose: true,
+        closeOnEsc: false,
+        followCursor: false
+      };
+    }
+
+    /**
+     * 设置 Popup 内容 HTML
+     * @param element
+     */
+  }, {
+    key: "setDOMContent",
+    value: function setDOMContent(element) {
+      this.show();
+      this.createContent();
+      DOM.appendElementType(this.contentPanel, element);
+      this.update();
+      return this;
+    }
+
+    /**
+     * 绑定地图点击事件触发销毁 Popup
+     * @protected
+     */
+  }, {
+    key: "updateCloseOnClick",
+    value: function updateCloseOnClick(onlyClear) {
+      var _this3 = this;
+      var mapsService = this.mapsService;
+      if (mapsService) {
+        mapsService === null || mapsService === void 0 ? void 0 : mapsService.off('click', this.onCloseButtonClick);
+        if (this.popupOption.closeOnClick && !onlyClear) {
+          requestAnimationFrame(function () {
+            mapsService === null || mapsService === void 0 ? void 0 : mapsService.on('click', _this3.onCloseButtonClick);
+          });
+        }
+      }
+    }
+  }, {
+    key: "updateCloseOnEsc",
+    value: function updateCloseOnEsc(onlyClear) {
+      window.removeEventListener('keydown', this.onKeyDown);
+      if (this.popupOption.closeOnEsc && !onlyClear) {
+        window.addEventListener('keydown', this.onKeyDown);
+      }
+    }
+  }, {
+    key: "updateFollowCursor",
+    value: function updateFollowCursor(onlyClear) {
+      var _this$mapsService;
+      var container = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getContainer();
+      if (container) {
+        container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', this.onMouseMove);
+        if (this.popupOption.followCursor && !onlyClear) {
+          container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', this.onMouseMove);
+        }
+      }
+    }
+  }, {
+    key: "createContent",
+    value:
+    /**
+     * 创建 Popup 内容容器的 DOM （在每次 setHTML 或 setText 时都会被调用）
+     * @protected
+     */
+    function createContent() {
+      var _this4 = this;
+      if (this.content) {
+        DOM.remove(this.content);
+      }
+      this.contentTitle = undefined;
+      this.content = DOM.create('div', 'l7-popup-content', this.container);
+      this.setTitle(this.popupOption.title);
+      if (this.popupOption.closeButton) {
+        var closeButton = createL7Icon('l7-icon-guanbi');
+        DOM.addClass(closeButton, 'l7-popup-close-button');
+        this.content.appendChild(closeButton);
+        if (this.popupOption.closeButtonOffsets) {
+          // 关闭按钮的偏移
+          closeButton.style.right = this.popupOption.closeButtonOffsets[0] + 'px';
+          closeButton.style.top = this.popupOption.closeButtonOffsets[1] + 'px';
+        }
+
+        // this.closeButton.type = 'button';
+        closeButton.setAttribute('aria-label', 'Close popup');
+        closeButton.addEventListener('click', function (e) {
+          _this4.hide();
+        });
+
+        // 防止点击 Popup 关闭按钮时，触发 Layer click 事件
+        closeButton.addEventListener('pointerup', function (e) {
+          e.stopPropagation();
+        });
+        closeButton.addEventListener('pointerdown', function (e) {
+          e.stopPropagation();
+        });
+        this.closeButton = closeButton;
+      } else {
+        this.closeButton = undefined;
+      }
+      this.contentPanel = DOM.create('div', 'l7-popup-content__panel', this.content);
+    }
+  }, {
+    key: "setPopupPosition",
+    value:
+    /**
+     * 设置 Popup 相对于地图容器的 Position
+     * @param left
+     * @param top
+     * @protected
+     */
+    function setPopupPosition(left, top) {
+      if (this.container) {
+        var offsets = this.popupOption.offsets;
+        this.container.style.left = left + offsets[0] + 'px';
+        this.container.style.top = top - offsets[1] + 'px';
+      }
+    }
+
+    /**
+     * 检查当前传入 option 是否包含 keys 字段
+     * @param option
+     * @param keys
+     * @protected
+     */
+  }, {
+    key: "checkUpdateOption",
+    value: function checkUpdateOption(option, keys) {
+      return keys.some(function (key) {
+        return key in option;
+      });
+    }
+  }]);
+  return Popup;
+}(EventEmitter);
+export { Popup as default };

package/es/utils/anchor.d.ts

@@ -0,0 +1,22 @@
+export declare enum anchorType {
+    'CENTER' = "center",
+    'TOP' = "top",
+    'TOP-LEFT' = "top-left",
+    'TOP-RIGHT' = "top-right",
+    'BOTTOM' = "bottom",
+    'BOTTOM-LEFT' = "bottom-left",
+    'LEFT' = "left",
+    'RIGHT' = "right"
+}
+export declare const anchorTranslate: {
+    center: string;
+    top: string;
+    'top-left': string;
+    'top-right': string;
+    bottom: string;
+    'bottom-left': string;
+    'bottom-right': string;
+    left: string;
+    right: string;
+};
+export declare function applyAnchorClass(element: HTMLElement, anchor: string, prefix: string): void;

package/es/utils/anchor.js

@@ -0,0 +1,31 @@
+export var anchorType = /*#__PURE__*/function (anchorType) {
+  anchorType["CENTER"] = "center";
+  anchorType["TOP"] = "top";
+  anchorType["TOP-LEFT"] = "top-left";
+  anchorType["TOP-RIGHT"] = "top-right";
+  anchorType["BOTTOM"] = "bottom";
+  anchorType["BOTTOM-LEFT"] = "bottom-left";
+  anchorType["LEFT"] = "left";
+  anchorType["RIGHT"] = "right";
+  return anchorType;
+}({});
+export var anchorTranslate = {
+  center: 'translate(-50%,-50%)',
+  top: 'translate(-50%,0)',
+  'top-left': 'translate(0,0)',
+  'top-right': 'translate(-100%,0)',
+  bottom: 'translate(-50%,-100%)',
+  'bottom-left': 'translate(0,-100%)',
+  'bottom-right': 'translate(-100%,-100%)',
+  left: 'translate(0,-50%)',
+  right: 'translate(-100%,-50%)'
+};
+export function applyAnchorClass(element, anchor, prefix) {
+  var classList = element.classList;
+  for (var key in anchorTranslate) {
+    if (anchorTranslate.hasOwnProperty(key)) {
+      classList.remove("l7-".concat(prefix, "-anchor-").concat(key));
+    }
+  }
+  classList.add("l7-".concat(prefix, "-anchor-").concat(anchor));
+}

package/es/utils/icon.d.ts

@@ -0,0 +1 @@
+export declare const createL7Icon: (className: string) => SVGSVGElement;

package/es/utils/icon.js

@@ -0,0 +1,9 @@
+export var createL7Icon = function createL7Icon(className) {
+  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.classList.add('l7-iconfont');
+  svg.setAttribute('aria-hidden', 'true');
+  var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#".concat(className));
+  svg.appendChild(use);
+  return svg;
+};